提交 87807bca 编写于 作者: Five-菜鸟级's avatar Five-菜鸟级 💬

init

上级 bbf5f169
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>#basic-example{
color: #333;
}
</style>
<script src="/tinymce/tinymce.js"></script>
<script src="/tinymce/tinymce-plugin.js"></script>
</head><body style="padding-bottom: 20px"> <textarea id='basic-example'>
<h1><strong>👋 Welcome !</strong></h1>
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="/thinymce-pluginIcon.png" alt="TinyMCE Logo" width="128" /></p>
<p>欢迎来到 <a href="https://github.com/tinymce-plugin" target="_blank"><strong><code class="fv-code_inline">Tinymce-plugin</code></strong></a></p><p>这是一个专注 提供 <strong>强大、好用、丰富</strong><a href="https://www.tiny.cloud" target="_blank"><code class="fv-code_inline">tinymce</code></a> 富文本编辑器 <strong>插件</strong><strong>扩展</strong><strong>技术</strong> 的技术社区,方便 <strong>交流讨论</strong><strong>分享经验</strong></p><p>本社区有多个不错的插件或者项目,欢迎 Star ⭐ 关注~</p>
<h1> ✨Tinymce-plugin</h1>
<p><a href="https://github.com/tinymce-plugin" target="_blank"><img src="https://tinymce-plugin.github.io/badge.svg" alt="tinymce-plugin"></a>&nbsp; <a href="https://www.npmjs.com/package/tinymce-plugin" target="_blank"><img src="https://img.shields.io/npm/v/tinymce-plugin.svg" alt="release candidate"></a>&nbsp; <a href="https://www.tiny.cloud" target="_blank"><img src="https://img.shields.io/badge/tinymce-5.2.0~5.x.x-green.svg" alt="tinymce Version"></a>&nbsp; <a href="https://github.com/tinymce-plugin/tinymce-plugin/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/tinymce-plugin/tp-indent2em.svg" alt="GitHub license"></a>&nbsp; <a href="https://github.com/tinymce-plugin" target="_blank"><img src="https://img.shields.io/npm/dm/tinymce-plugin" alt="tinymce Version"></a></p>
</textarea>
<script> tinymce.init({
selector: 'textarea#basic-example',
height: 500,
menubar: false,
skeletonScreen: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script></body></html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>#basic-example{
color: #333;
}
</style>
<script src="/tinymce/tinymce.js"></script>
<script src="/tinymce/tinymce-plugin.js"></script>
</head><body style="padding-bottom: 20px"> <textarea id='basic-example'>
<h1><strong>👋 Welcome !</strong></h1>
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="/thinymce-pluginIcon.png" alt="TinyMCE Logo" width="128" /></p>
<p>欢迎来到 <a href="https://github.com/tinymce-plugin" target="_blank"><strong><code class="fv-code_inline">Tinymce-plugin</code></strong></a></p><p>这是一个专注 提供 <strong>强大、好用、丰富</strong><a href="https://www.tiny.cloud" target="_blank"><code class="fv-code_inline">tinymce</code></a> 富文本编辑器 <strong>插件</strong><strong>扩展</strong><strong>技术</strong> 的技术社区,方便 <strong>交流讨论</strong><strong>分享经验</strong></p><p>本社区有多个不错的插件或者项目,欢迎 Star ⭐ 关注~</p>
<h1> ✨Tinymce-plugin</h1>
<p><a href="https://github.com/tinymce-plugin" target="_blank"><img src="https://tinymce-plugin.github.io/badge.svg" alt="tinymce-plugin"></a>&nbsp; <a href="https://www.npmjs.com/package/tinymce-plugin" target="_blank"><img src="https://img.shields.io/npm/v/tinymce-plugin.svg" alt="release candidate"></a>&nbsp; <a href="https://www.tiny.cloud" target="_blank"><img src="https://img.shields.io/badge/tinymce-5.2.0~5.x.x-green.svg" alt="tinymce Version"></a>&nbsp; <a href="https://github.com/tinymce-plugin/tinymce-plugin/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/tinymce-plugin/tp-indent2em.svg" alt="GitHub license"></a>&nbsp; <a href="https://github.com/tinymce-plugin" target="_blank"><img src="https://img.shields.io/npm/dm/tinymce-plugin" alt="tinymce Version"></a></p>
</textarea>
<script> tinymce.init({
selector: 'textarea#basic-example',
height: 500,
menubar: false,
skeletonScreen: true,
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help wordcount'
],
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent | ' +
'removeformat | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script></body></html>
\ No newline at end of file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>#basic-example{
color: #333;
}
</style>
<script src="/tinymce/tinymce.js"></script>
<script src="/tinymce/tinymce-plugin.js"></script>
</head><body style="padding-bottom: 20px"> <textarea id='basic-example'>
<h1><strong>👋 Welcome !</strong></h1>
<p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="/thinymce-pluginIcon.png" alt="TinyMCE Logo" width="128" /></p>
<p>欢迎来到 <a href="https://github.com/tinymce-plugin" target="_blank"><strong><code class="fv-code_inline">Tinymce-plugin</code></strong></a></p><p>这是一个专注 提供 <strong>强大、好用、丰富</strong><a href="https://www.tiny.cloud" target="_blank"><code class="fv-code_inline">tinymce</code></a> 富文本编辑器 <strong>插件</strong><strong>扩展</strong><strong>技术</strong> 的技术社区,方便 <strong>交流讨论</strong><strong>分享经验</strong></p><p>本社区有多个不错的插件或者项目,欢迎 Star ⭐ 关注~</p>
<h1> ✨Tinymce-plugin</h1>
<p><a href="https://github.com/tinymce-plugin" target="_blank"><img src="https://tinymce-plugin.github.io/badge.svg" alt="tinymce-plugin"></a>&nbsp; <a href="https://www.npmjs.com/package/tinymce-plugin" target="_blank"><img src="https://img.shields.io/npm/v/tinymce-plugin.svg" alt="release candidate"></a>&nbsp; <a href="https://www.tiny.cloud" target="_blank"><img src="https://img.shields.io/badge/tinymce-5.2.0~5.x.x-green.svg" alt="tinymce Version"></a>&nbsp; <a href="https://github.com/tinymce-plugin/tinymce-plugin/blob/main/LICENSE" target="_blank"><img src="https://img.shields.io/github/license/tinymce-plugin/tp-indent2em.svg" alt="GitHub license"></a>&nbsp; <a href="https://www.tiny.cloud" target="_blank"><img src="https://img.shields.io/npm/dm/tinymce-plugin" alt="tinymce Version"></a></p>
<p>
<span contenteditable="false" data-tp-logicflow="" data-tp-no-img="" data-mce-selected="1"><object style="width: 160px; height: 160px; transform: scale(1, 1);" data="/tpLogicFlow.svg" data-mce-style="width: 556px; height: 260px; transform: scale(1, 1);"></object></span>
</p>
</textarea>
<script> tinymce.init({
selector: 'textarea#basic-example',
height: 790,
max_height:790,
language: 'zh_CN',
tp_i18n_langs:true,
base_url:'/tinymce',
skeletonScreen: true,
menubar: 'file edit insert view format table tools help mymenubar',
menu: {
mymenubar: {title: 'I18n', items: 'tpI18n' },
},
plugins: [
'advlist autolink lists link image charmap print preview anchor',
'searchreplace visualblocks code fullscreen',
'insertdatetime media table paste code help tpIndent2em tpLetterspacing tpImportword tpLogicflow tpLayout tpLineheight wordcount'
],
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
if (!file.name) file.name = 'vue-' + Date.now() + Math.floor(Math.random() * 1000) + '.png';
var DOMURL = window.URL || window.webkitURL || window;
succFun(DOMURL.createObjectURL(file))
},
setup(props) {
},
toolbar: 'undo redo | formatselect | ' +
'bold italic backcolor | alignleft aligncenter ' +
'alignright alignjustify | bullist numlist outdent indent tpLayout tpIndent2em tpLineheight tpLetterspacing | tpImportword tpLogicflow | ' +
'removeformat image media | help',
content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'
});
</script></body></html>
\ No newline at end of file
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px; min-width: 900px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px; min-width: 900px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<style>
#tinymce-app{display:none;}
#tinymce-app .toolbar {padding-bottom:10px;}
#tinymce-app .tox .tox-toolbar{background:none;}
#tinymce-app .tox-tinymce-inline .tox-editor-header{border:none;}
#tinymce-app .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type){border:none;}
#tinymce-app .tox:not([dir=rtl]) .tox-toolbar__group:not(:last-of-type):after{border:none;}
#tinymce-app .box {padding:10px;border:1px solid #ddd;}
#tinymce-app .tit{padding-bottom:10px;}
#tinymce-app .tit input{font-size:24px;padding:8px 8px;width:100%;box-sizing:border-box;border:none;box-shadow:none;background-color:#fefefe;color:#777;border-bottom:1px dotted #ccc;}
#tinymce-app .tit input:focus{outline:0;}
#tinymce-app .tinymce-cnt{min-height:300px;max-height:500px;overflow:auto;font-size:16px;padding:0.5em;}
#tinymce-app .tinymce-cnt:focus{outline:0;}
#tinymce-app .tinymce-cnt p{text-indent:0; margin:0;padding: 0; margin-bottom: 0.5em;}
</style>
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
</head>
<body tp-page-height="90">
<div class="demo">
<div id="tinymce-app">
<div class="toolbar"></div>
<div class="tit"><input type="text" placeholder="请输入标题……"></div>
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="tinymce-doc">
</div>
</div>
</div>
</div>
<script>
tinymce.init({
selector: '#tinymce-doc',
language:'zh_CN',
menubar:false,
inline: true,
plugins: 'print preview searchreplace autolink fullscreen image link media code codesample table charmap hr pagebreak nonbreaking anchor advlist lists textpattern help emoticons autosave bdmap tpIndent2em axupimgs',
toolbar: 'code undo redo restoredraft | cut copy | forecolor backcolor bold italic underline strikethrough link | alignleft aligncenter alignright alignjustify | bullist numlist blockquote subscript superscript removeformat | \
formatselect fontselect fontsizeselect | \
table image media charmap emoticons hr pagebreak print preview | fullscreen | bdmap tpIndent2em axupimgs',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: 'body',
placeholder:'placeholder占位文字',
//auto_focus: true,
toolbar_mode : 'wrap',
toolbar_sticky: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1500);
editor.execCommand('selectAll');
editor.selection.getRng().collapse(false);
editor.focus();
}
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">
<title>Tinymce-Plugin</title>
<style>
.open-plugin{
width:150px;
height: 30px;
display: flex;
padding: 0px 10px;
background-color:rgb(27, 158, 234);
border-radius:5px;
color:white;
font-size:0;
text-align:center;
cursor:pointer;
align-content: space-around;
flex-wrap: nowrap;
align-items: center;
justify-items: center;
}
.open-plugin img{
display: block;
width: 20px;
height: 20px;
}
.open-plugin span{
display: inline-block;
height:20px;
line-height:20px;
vertical-align: middle;
margin-left:10px;
font-size:14px;
}
</style>
<script src='/tinymce/tinymce.js'></script>
<script src="/tinymce/tinymce-plugin.js"></script>
<script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
<script src="https://unpkg.com/tinymce-plugin/plugins/tpLayout/plugin.min.js"></script>
</head>
<body tp-page-height="298">
<div>
<textarea class="tinymce">
<p>这是一个一键排版插件</p>
</textarea>
</div>
<div>
<p></p>
<a onclick="openPlugin()" class="open-plugin" title="点击调用触发插件" ><img src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>点击调用触发插件</span></a>
</div>
<script>
tinymce.init({
selector: 'textarea.tinymce',
language: 'zh_CN',
skeletonScreen: true,
plugins: 'code tpLayout autoresize',
toolbar: 'code tpLayout'
});
var openPlugin=()=>{
tinymce.activeEditor.execCommand('mceTpLayout');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">
<title>Tinymce-Plugin</title>
<style>
.open-plugin{
width:150px;
height: 30px;
display: flex;
padding: 0px 10px;
background-color:rgb(27, 158, 234);
border-radius:5px;
color:white;
font-size:0;
text-align:center;
cursor:pointer;
align-content: space-around;
flex-wrap: nowrap;
align-items: center;
justify-items: center;
}
.open-plugin img{
display: block;
width: 20px;
height: 20px;
}
.open-plugin span{
display: inline-block;
height:20px;
line-height:20px;
vertical-align: middle;
margin-left:10px;
font-size:14px;
}
</style>
<script src='/tinymce/tinymce.js'></script>
<script src="/tinymce/tinymce-plugin.js"></script>
<script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
<script src="https://unpkg.com/tinymce-plugin/plugins/tpImportword/plugin.min.js"></script>
</head>
<body tp-page-height="298">
<div>
<textarea class="tinymce">
<p>这是一个导入word插件</p>
</textarea>
</div>
<div>
<p></p>
<a onclick="openPlugin()" class="open-plugin" title="点击调用触发插件" ><img src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>点击调用触发插件</span></a>
</div>
<script>
tinymce.init({
selector: 'textarea.tinymce',
language: 'zh_CN',
skeletonScreen: true,
plugins: 'code tpImportword autoresize',
toolbar: 'code tpImportword'
});
var openPlugin=()=>{
tinymce.activeEditor.execCommand('mceTpImportword');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="478">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->
<style>
body{max-width: 1920px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="478">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='https://tinymce-plugin.gitee.io/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='https://unpkg.com/tinymce-plugin'></script><!-- 必要 -->
<style>
body{max-width: 1920px; min-width: 900px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="renderer" content="webkit">
<script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>
<!-- <script src='./api/api.js'></script> -->
<script src='https://tinymce-plugin.gitee.io/tinymce/tinymce.js'></script><!-- 必要 -->
<script src='https://unpkg.com/tinymce-plugin'></script><!-- 必要 -->
<style>
body{max-width: 1920px; min-width: 900px;width: 100%; margin: 0 auto;}
header{}
.header_logo{ display: inline-block;vertical-align: middle;}
header > div{ display: block; text-align: center;}
.demo,#showID{ margin-top:50px;}
#showID{ padding: 20px;}
#tinymce-app .tinymce-box {padding-bottom: 0px!important;}
.tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}
.plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}
.text-center{ text-align: center;}
.animated #logoSvgId{
fill-opacity: 0.75
}
a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}
#logoSvgId{display: inline-block; vertical-align: middle;}
.btn{ border-radius: 20px; outline: none; width: 300px;height: 60px; margin: 20px auto; display: block; background: #1488F5; text-align: center;line-height: 60px; font-size: 28px;letter-spacing: 2px; color: #dedede;}
</style>
</head>
<body tp-page-height="498">
<div class="demo">
<div id="tinymce-app">
<div class="tinymce-demo" style="color: #000;">
<div class="tinymce-cnt" id="mytextarea">
<div id="fvContentID"><ol>
<li style="letter-spacing: 2px;"><span style="color: #2dc26b;"><span style="color: #000000;">不知如何使用编辑框可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/fcd5cc64-aff6-4ded-8f14-6a98b66a2aea.png">(或 Alt+0),查看帮助-【快捷键】【功能介绍】【操作手册】【疑问解答】【反馈问题】 。</span></span></li>
<li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span><em>功能图标</em>上可了解功能名称</li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">如过需要修改2020年11月之前的旧新闻,建议先清除格式&nbsp;&nbsp; 一键布局<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/13/e952a0d5-2d30-4d86-ae7d-e8fd5c4e7cc7.png">,将旧新闻样式去掉重新排版</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;">若文档编辑调整过程中发生意外关闭【如:登录时间过长】,并且未存为草稿 可以点击<img src="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/12/25/9b1473d3-e399-43d9-86b1-a0cb5970d7d0.png">,恢复文档编辑状态(1小时以内的最近状态)</span></li>
<li style="letter-spacing: 2px;"><span style="color: #e03e2d;"><span id="attachment_mce_1" contenteditable="false"><img style="width: 30px;" src="https://api.hope55.com/Content/js/tinymce/plugins/attachment/icons/file_type_pdf2.svg" width="30px"><a href="https://xwjywjb.obs.cn-southwest-2.myhuaweicloud.com/db/UploadFile/2020/11/9/a7653b78-f186-4237-81fb-213aac317ebe.pdf" target="_blank" rel="noopener">新编辑器新闻上传操作说明(1).pdf (1.04 M)</a></span> </span></li>
</ol></div>
<style> #fvContentID a{display:inline-block!important} #fvContentID .attachment>img{display:inline-block!important;max-width:30px!important;min-width:30px!important;}#fvContentID .attachment>a{display:contents!important;}</style>
</div>
</div>
</div>
</div>
<script>
function savefun(){
$("#showID").html(tinymceConfig.getHtml())
}
var xhrOnProgress = function (fun) {
xhrOnProgress.onprogress = fun;
return function () {
var xhr = $.ajaxSettings.xhr();
if (typeof xhrOnProgress.onprogress !== 'function')
return xhr;
if (xhrOnProgress.onprogress && xhr.upload) {
xhr.upload.onprogress = xhrOnProgress.onprogress;
}
return xhr;
}
}
var tinymceConfig= {
tinyID: "mytextarea",//作用域ID
placeholder: '', //默认文字
infoHtml: $(this.tinyID).html(),//初始化内容
GbaseUrl: '',//全局baseUrl
OMHtml: '<div style="height: 1500px;"><p><h2>操作手册:</h2></p></div><p>666</p>', //设置操作手册Html
CPHtml: '',
}
tinymce.init({
selector: '#'+tinymceConfig.tinyID,
language:'zh_CN',
menubar:false,
branding: false,
min_height:400,
max_height: 700,
// baseURL: './'
plugins: ' print axupimgs clearhtml preview insertdatetime attachment searchreplace visualblocks autolink layout fullscreen toc image upfile link media code codesample table charmap hr pagebreak anchor advlist lists textpattern help emoticons autosave bdmap indent2em axupimgs letterspacing imagetools quickbars attachment wordcount autoresize importword tpCollapse tpTabs tpButtons',
toolbar_groups: {
formatting: {
text: '文字格式',
tooltip: 'Formatting',
items: 'bold italic underline | superscript subscript',
},
alignment: {
icon: 'align-left',
tooltip: 'alignment',
items: 'alignleft aligncenter alignright alignjustify',
}
},
toolbar: ['|code formatselect fontselect fontsizeselect forecolor backcolor bold italic underline strikethrough link alignment indent2em outdent indent lineheight letterspacing bullist numlist blockquote subscript superscript layout removeformat table image axupimgs media upfile attachment emoticons importword charmap hr pagebreak clearhtml tpImportword codesample visualblocks insertdatetime bdmap quickbars toc cut copy undo redo ltr rtl tpCollapse tpTabs tpButtons restoredraft searchreplace fullscreen help wordcount preview'],
table_style_by_css: true,
OperationManualHtml: '',
CommonProblemHtml: '',
fixed_toolbar_container:'#tinymce-app .toolbar',
custom_ui_selector: '#tinymce-app',
placeholder:''+tinymceConfig.placeholder,
file_picker_types: 'media',
powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge
powerpaste_html_import: 'clean', // propmt, merge, clean
powerpaste_allow_local_images: true,//
powerpaste_keep_unsupported_src:true,
paste_data_images: true,
toolbar_sticky: false,
skeletonScreen: true,
autosave_ask_before_unload: false,
fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;',
images_upload_base_path: '',
images_upload_handler: function (blobInfo, succFun, failFun) {
var file = blobInfo.blob();
var reader = new FileReader();
reader.onload = function(e){
succFun(e.target.result)
}
reader.readAsDataURL(file)
},
file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数
var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';
var input = document.createElement('input');
input.setAttribute('type', 'file');
input.setAttribute('accept', filetype);
input.click();
input.onchange = function () {
var file = this.files[0];
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: './api/file.json',
header:{'Content-Type':'multipart/form-data'},
cache: false,
contentType: false,
processData: false,
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
// console.log(percent);
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{ text: data.data });
}
}).fail(function (error) {
failFun('上传失败:' + error.message)
});
}
},
file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调
var data = new FormData();
data.append("file", file);
$.ajax({
data: data,
type: 'GET',
url: '/tinymce/api/file.json',
cache: false,
contentType: false,
processData: false,
header:{'Content-Type':'multipart/form-data'},
dataType: 'json',
xhr: xhrOnProgress(function (e) {
const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比
progressCallback(percent);
}),
}).then(function (data) {
if ( data.code== 200) {
succFun(data.data,{text: file.name});
}
}).fail(function (error) {
// failFun('上传失败:' + error.message)
});
},
tp_attachment_max_size: 5009715200,
// attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',
tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',
init_instance_callback: function(editor){
$('#tinymce-app').fadeIn(1000);
// editor.execCommand('selectAll');
// editor.selection.getRng().collapse(false);
// editor.focus();
}
}).then(function(res){
tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接
});
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">
<title>Tinymce-Plugin</title>
<style>
.open-plugin{
width:150px;
height: 30px;
display: flex;
padding: 0px 10px;
background-color:rgb(27, 158, 234);
border-radius:5px;
color:white;
font-size:0;
text-align:center;
cursor:pointer;
align-content: space-around;
flex-wrap: nowrap;
align-items: center;
justify-items: center;
}
.open-plugin img{
display: block;
width: 20px;
height: 20px;
}
.open-plugin span{
display: inline-block;
height:20px;
line-height:20px;
vertical-align: middle;
margin-left:10px;
font-size:14px;
}
</style>
<script src='/tinymce/tinymce.js'></script>
<script src="/tinymce/tinymce-plugin.js"></script>
<script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
<script src="https://unpkg.com/tinymce-plugin/plugins/tpImportword/plugin.min.js"></script>
</head>
<body tp-page-height="298">
<div>
<textarea class="tinymce">
<p>这是一个导入word插件</p>
</textarea>
</div>
<div>
<p></p>
<a onclick="openPlugin()" class="open-plugin" title="点击调用触发插件" ><img src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>点击调用触发插件</span></a>
</div>
<script>
tinymce.init({
selector: 'textarea.tinymce',
language: 'zh_CN',
skeletonScreen: true,
plugins: 'code tpImportword autoresize',
toolbar: 'code tpImportword'
});
var openPlugin=()=>{
tinymce.activeEditor.execCommand('mceTpImportword');
}
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<link rel="icon" href="/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="shortcut icon" href="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" type="image/x-icon">
<title>Tinymce-Plugin</title>
<style>
.open-plugin{
width:150px;
height: 30px;
display: flex;
padding: 0px 10px;
background-color:rgb(27, 158, 234);
border-radius:5px;
color:white;
font-size:0;
text-align:center;
cursor:pointer;
align-content: space-around;
flex-wrap: nowrap;
align-items: center;
justify-items: center;
}
.open-plugin img{
display: block;
width: 20px;
height: 20px;
}
.open-plugin span{
display: inline-block;
height:20px;
line-height:20px;
vertical-align: middle;
margin-left:10px;
font-size:14px;
}
</style>
<script src='/tinymce/tinymce.js'></script>
<script src="/tinymce/tinymce-plugin.js"></script>
<script src="https://unpkg.com/tinymce-plugin/langs/zh_CN.js"></script>
<script src="https://unpkg.com/tinymce-plugin/plugins/tpIndent2em/plugin.min.js"></script>
</head>
<body tp-page-height="298">
<div>
<textarea class="tinymce">
<p>这是一个首行缩进插件</p>
</textarea>
</div>
<div>
<p></p>
<a onclick="openPlugin()" class="open-plugin" title="点击调用触发插件" ><img src="https://avatars.githubusercontent.com/u/87648636?s=60&v=4" alt=""><span>点击调用触发插件</span></a>
</div>
<script>
tinymce.init({
selector: 'textarea.tinymce',
language: 'zh_CN',
skeletonScreen: true,
plugins: 'code tpIndent2em autoresize',
toolbar: 'code tpIndent2em'
});
var openPlugin=()=>{
tinymce.activeEditor.execCommand('mceTpIndent2em');
}
</script>
</body>
</html>
Markdown is supported
0% .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑!
想要评论请 注册