!function(){function s(a){return s="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(s){return typeof s}:function(s){return s&&"function"==typeof Symbol&&s.constructor===Symbol&&s!==Symbol.prototype?"symbol":typeof s},s(a)}function a(s,a){if(!(s instanceof a))throw new TypeError("Cannot call a class as a function")}function n(s,a){for(var n=0;n<!DOCTYPE html>\n<html>\n<head>\n <meta charset="UTF-8">\n <meta http-equiv="X-UA-Compatible" content="IE=edge">\n <meta name="viewport" content="width=device-width, initial-scale=1.0">\n <meta name="renderer" content="webkit">\n <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>\n <!-- <script src='./api/api.js'></script> -->\n \n <script src='/tinymce/tinymce.js'></script><!-- 必要 -->\n <script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->\n\n <style>\n body{max-width: 1920px;width: 100%; margin: 0 auto;}\n header{}\n .header_logo{ display: inline-block;vertical-align: middle;}\n header > div{ display: block; text-align: center;}\n .demo,#showID{ margin-top:50px;}\n #showID{ padding: 20px;}\n #tinymce-app .tinymce-box {padding-bottom: 0px!important;}\n .tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}\n .plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}\n .text-center{ text-align: center;}\n .animated #logoSvgId{\n fill-opacity: 0.75\n }\n a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}\n #logoSvgId{display: inline-block; vertical-align: middle;}\n .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;}\n </style>\n</head>\n\n<body tp-page-height="498">\n <div class="demo">\n <div id="tinymce-app">\n <div class="tinymce-demo" style="color: #000;">\n <div class="tinymce-cnt" id="mytextarea">\n <div id="fvContentID"><ol>\n <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>\n <li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span>在<em>功能图标</em>上可了解功能名称</li>\n <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>\n <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>\n <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>\n </ol></div>\n <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>\n </div>\n </div>\n </div>\n </div>\n <script>\n function savefun(){\n $("#showID").html(tinymceConfig.getHtml())\n }\n\n var xhrOnProgress = function (fun) {\n xhrOnProgress.onprogress = fun;\n return function () {\n var xhr = $.ajaxSettings.xhr();\n if (typeof xhrOnProgress.onprogress !== 'function')\n return xhr;\n if (xhrOnProgress.onprogress && xhr.upload) {\n xhr.upload.onprogress = xhrOnProgress.onprogress;\n }\n return xhr;\n }\n }\n var tinymceConfig= {\n tinyID: "mytextarea",//作用域ID\n placeholder: '', //默认文字\n infoHtml: $(this.tinyID).html(),//初始化内容\n GbaseUrl: '',//全局baseUrl\n OMHtml: '<div style="height: 1500px;"><p><h2>操作手册：</h2></p></div><p>666</p>', //设置操作手册Html\n CPHtml: '',\n }\n tinymce.init({\n selector: '#'+tinymceConfig.tinyID,\n language:'zh_CN',\n menubar:false,\n branding: false,\n min_height:400,\n max_height: 700,\n // baseURL: './'\n 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',\n toolbar_groups: {\n formatting: {\n text: '文字格式',\n tooltip: 'Formatting',\n items: 'bold italic underline | superscript subscript',\n },\n alignment: {\n icon: 'align-left',\n tooltip: 'alignment',\n items: 'alignleft aligncenter alignright alignjustify',\n }\n },\n 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'],\n table_style_by_css: true,\n OperationManualHtml: '',\n CommonProblemHtml: '',\n fixed_toolbar_container:'#tinymce-app .toolbar',\n custom_ui_selector: '#tinymce-app',\n placeholder:''+tinymceConfig.placeholder,\n file_picker_types: 'media',\n powerpaste_word_import: "clean", // 是否保留word粘贴样式 clean | merge \n powerpaste_html_import: 'clean', // propmt, merge, clean\n powerpaste_allow_local_images: true,//\n powerpaste_keep_unsupported_src:true,\n paste_data_images: true,\n toolbar_sticky: false,\n skeletonScreen: true,\n autosave_ask_before_unload: false,\n fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',\n 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;',\n images_upload_base_path: '',\n \n images_upload_handler: function (blobInfo, succFun, failFun) {\n var file = blobInfo.blob();\n var reader = new FileReader();\n reader.onload = function(e){\n succFun(e.target.result)\n }\n reader.readAsDataURL(file)\n },\n file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数 \n var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';\n var input = document.createElement('input');\n input.setAttribute('type', 'file');\n input.setAttribute('accept', filetype);\n input.click();\n input.onchange = function () {\n var file = this.files[0];\n var data = new FormData();\n data.append("file", file);\n $.ajax({\n data: data,\n type: 'GET',\n url: './api/file.json',\n header:{'Content-Type':'multipart/form-data'},\n cache: false,\n contentType: false,\n processData: false,\n dataType: 'json',\n xhr: xhrOnProgress(function (e) {\n const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比\n // console.log(percent);\n progressCallback(percent);\n \n }),\n }).then(function (data) {\n if ( data.code== 200) {\n succFun(data.data,{ text: data.data });\n }\n }).fail(function (error) {\n failFun('上传失败:' + error.message)\n });\n }\n },\n file_callback: function (file, succFun) { //文件上传 file:文件对象 succFun(url|string,obj) 成功回调\n var data = new FormData();\n data.append("file", file);\n $.ajax({\n data: data,\n type: 'GET',\n url: '/tinymce/api/file.json',\n cache: false,\n contentType: false,\n processData: false,\n header:{'Content-Type':'multipart/form-data'},\n dataType: 'json',\n xhr: xhrOnProgress(function (e) {\n const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比\n progressCallback(percent);\n }),\n }).then(function (data) {\n if ( data.code== 200) {\n succFun(data.data,{text: file.name});\n } \n }).fail(function (error) {\n // failFun('上传失败:' + error.message)\n });\n },\n tp_attachment_max_size: 5009715200,\n // attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',\n tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',\n \n \n init_instance_callback: function(editor){\n $('#tinymce-app').fadeIn(1000);\n // editor.execCommand('selectAll');\n // editor.selection.getRng().collapse(false);\n // editor.focus();\n }\n }).then(function(res){\n tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接\n });\n </script>\n</body>\n</html>\n\n
html
'},sourceCode:function(){return''}},template:'\n \n '},h={name:"domeVue3",components:{TinymceVue:n},data:function(){return{content:"Tinymce-Plugin",tinymceOptions:{min_height:200,max_height:700,skeletonScreen:!0,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview",toolbar:["|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview"]}}}};h.methods?h.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-Plugin',\n        tinymceOptions:{\n                // custom_elements: 'tp-collapse',\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}:h.methods={source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-Plugin',\n        tinymceOptions:{\n                // custom_elements: 'tp-collapse',\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}},h.template='\n \'\n \n ';var j={};j.methods?(j.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'fivesdsdsd',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'},j.methods.template=function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},j.methods.sourceCode=function(){return{name:"domeVue2",components:{TinymceVue:n},data:function(){return{content:"fivesdsdsd",tinymceOptions:{min_height:200,max_height:700,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview",toolbar:["code tpIndent2em tpCollapse tpTabs tpButtons Preview"],skeletonScreen:!0}}}}}):j.methods={template:function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},sourceCode:function(){return{name:"domeVue2",components:{TinymceVue:n},data:function(){return{content:"fivesdsdsd",tinymceOptions:{min_height:200,max_height:700,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview",toolbar:["code tpIndent2em tpCollapse tpTabs tpButtons Preview"],skeletonScreen:!0}}}}},source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'fivesdsdsd',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}},j.template='\n \n ';var m={};m.methods={source:function(){return'
<script>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport { Editor } from '@tinymce/tinymce-react';\n\n     class ReactDemo extends React.Component{\n       constructor(props) {\n           super(props);\n           this.state = { reactDemoInitialValue: "<p>这是一个REactDemo</p>"};\n           this.reactDemoInit = {\n                    min_height: 220,\n                    base_url:'/tinymce',\n                    branding: false,\n                    language:'zh_CN',\n                    menubar: false,\n                    skeletonScreen: true,\n                    plugins: ['advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons', 'insertdatetime media table paste code help wordcount tpImportword'],\n                    toolbar: 'undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help',\n                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n             };\n       this.handleChange = (data)=>{\n              this.setState({reactDemoInitialValue: data})\n        }\n      }\n      render(){\n        return (\n           <div>\n            <h1>tinymce demo2</h1>\n            <div>\n            <Editor initialValue={this.state.reactDemoInitialValue} init={this.reactDemoInit} onEditorChange={this.handleChange} />\n            </div>\n            <div dangerouslySetInnerHTML={{__html: this.state.reactDemoInitialValue }} ></div>\n          </div>\n          );\n      }\n    }\n\n   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));\n</script>\n
html
'},sourceCode:function(s){var n=function(s){p(c,s);var n=i(c);function c(s){var l;return a(this,c),(l=n.call(this,s)).state={reactDemoInitialValue:"

这是一个REactDemo

"},l.reactDemoInit={min_height:220,base_url:"/tinymce",branding:!1,language:"zh_CN",menubar:!1,skeletonScreen:!0,plugins:["advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons","insertdatetime media table paste code help wordcount tpImportword"],toolbar:"undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | 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 }"},l.handleChange=function(s){l.setState({reactDemoInitialValue:s})},l}return l(c,[{key:"render",value:function(){return t.createElement("div",null,t.createElement("h1",null,"tinymce demo2"),t.createElement("div",null,t.createElement(e,{initialValue:this.state.reactDemoInitialValue,init:this.reactDemoInit,onEditorChange:this.handleChange})),t.createElement("div",{dangerouslySetInnerHTML:{__html:this.state.reactDemoInitialValue}}))}}]),c}(t.Component);return c.render(t.createElement(n,null),s)}},m.template='\n \n ';var g={methods:{source:function(){return'
<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta name="renderer" content="webkit">\n  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>\n  <!-- <script src='./api/api.js'></script> -->\n  \n  <script src='/tinymce/tinymce.js'></script><!-- 必要 -->\n  <script src='/tinymce/tinymce-plugin.js'></script><!-- 必要 -->\n\n  <style>\n    body{max-width: 1920px;width: 100%; margin: 0 auto;}\n    header{}\n    .header_logo{ display: inline-block;vertical-align: middle;}\n    header > div{ display: block; text-align: center;}\n   .demo,#showID{ margin-top:50px;}\n   #showID{ padding: 20px;}\n   #tinymce-app .tinymce-box {padding-bottom: 0px!important;}\n   .tiny_color{ color:#344A85 ;text-shadow: 0 3px 5px #677285; display: inline-block;margin-right: -20px; vertical-align: middle;}\n   .plugin_color { color: #43B984;text-shadow: 0 3px 5px #34435C;display: inline-block;margin-left: -23px; vertical-align: middle;}\n   .text-center{ text-align: center;}\n   .animated #logoSvgId{\n    fill-opacity: 0.75\n   }\n   a{display: inline-block; padding: 20px;font-size: 20px; list-style: none; text-decoration: none;color: #333;}\n   #logoSvgId{display: inline-block; vertical-align: middle;}\n   .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;}\n  </style>\n</head>\n\n<body tp-page-height="478">\n      <div class="demo">\n        <div id="tinymce-app">\n            <div class="tinymce-demo" style="color: #000;">\n                <div class="tinymce-cnt" id="mytextarea">\n                  <div id="fvContentID"><ol>\n                    <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>\n                    <li style="letter-spacing: 2px;"><span style="color: #3598db;">鼠标悬浮</span>在<em>功能图标</em>上可了解功能名称</li>\n                    <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>\n                    <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>\n                    <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>\n                  </ol></div>\n                  <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>\n                </div>\n            </div>\n        </div>\n      </div>\n  <script>\n    function savefun(){\n      $("#showID").html(tinymceConfig.getHtml())\n    }\n\n                var xhrOnProgress = function (fun) {\n                xhrOnProgress.onprogress = fun;\n                return function () {\n                    var xhr = $.ajaxSettings.xhr();\n                    if (typeof xhrOnProgress.onprogress !== 'function')\n                        return xhr;\n                    if (xhrOnProgress.onprogress && xhr.upload) {\n                        xhr.upload.onprogress = xhrOnProgress.onprogress;\n                    }\n                    return xhr;\n                }\n            }\n            var tinymceConfig= {\n                tinyID: "mytextarea",//作用域ID\n                placeholder: '', //默认文字\n                infoHtml: $(this.tinyID).html(),//初始化内容\n                GbaseUrl: '',//全局baseUrl\n                OMHtml: '<div style="height: 1500px;"><p><h2>操作手册：</h2></p></div><p>666</p>', //设置操作手册Html\n                CPHtml: '',\n            }\n          tinymce.init({\n                 selector: '#'+tinymceConfig.tinyID,\n                 language:'zh_CN',\n                 menubar:false,\n                 branding: false,\n                 min_height:400,\n                 max_height: 700,\n                //  baseURL: './'\n                 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',\n                 toolbar_groups: {\n                         formatting: {\n                             text: '文字格式',\n                             tooltip: 'Formatting',\n                             items: 'bold italic underline | superscript subscript',\n                         },\n                         alignment: {\n                             icon: 'align-left',\n                             tooltip: 'alignment',\n                             items: 'alignleft aligncenter alignright alignjustify',\n                         }\n                  },\n                 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'],\n                 table_style_by_css: true,\n                 OperationManualHtml: '',\n                 CommonProblemHtml: '',\n                 fixed_toolbar_container:'#tinymce-app .toolbar',\n                 custom_ui_selector: '#tinymce-app',\n                 placeholder:''+tinymceConfig.placeholder,\n                 file_picker_types: 'media',\n                 powerpaste_word_import: "clean", // 是否保留word粘贴样式  clean | merge \n                 powerpaste_html_import: 'clean', // propmt, merge, clean\n                 powerpaste_allow_local_images: true,//\n                 powerpaste_keep_unsupported_src:true,\n                 paste_data_images: true,\n                 toolbar_sticky: false,\n                skeletonScreen: true,\n                 autosave_ask_before_unload: false,\n                 fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',\n                 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;',\n                 images_upload_base_path: '',\n               \n                 images_upload_handler: function (blobInfo, succFun, failFun) {\n                    var file = blobInfo.blob();\n                    var reader = new FileReader();\n                    reader.onload = function(e){\n                     succFun(e.target.result)\n                    }\n                   reader.readAsDataURL(file)\n                 },\n                 file_picker_callback: function (succFun, value, meta) { //自定义文件上传函数 \n                    var filetype = '.pdf, .txt, .zip, .rar, .7z, .doc, .docx, .xls, .xlsx, .ppt, .pptx, .mp3, .mp4';\n                    var input = document.createElement('input');\n                    input.setAttribute('type', 'file');\n                    input.setAttribute('accept', filetype);\n                    input.click();\n                    input.onchange = function () {\n                        var file = this.files[0];\n                        var data = new FormData();\n                         data.append("file", file);\n                        $.ajax({\n                            data: data,\n                            type: 'GET',\n                            url: './api/file.json',\n                            header:{'Content-Type':'multipart/form-data'},\n                            cache: false,\n                            contentType: false,\n                            processData: false,\n                            dataType: 'json',\n                            xhr: xhrOnProgress(function (e) {\n                                const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比\n                                // console.log(percent);\n                                progressCallback(percent);\n                  \n                            }),\n                        }).then(function (data) {\n                            if ( data.code== 200) {\n                                succFun(data.data,{ text: data.data });\n                            }\n                        }).fail(function (error) {\n                            failFun('上传失败:' + error.message)\n                        });\n                    }\n                 },\n                 file_callback: function (file, succFun) { //文件上传  file:文件对象 succFun(url|string,obj) 成功回调\n                    var data = new FormData();\n                    data.append("file", file);\n                    $.ajax({\n                        data: data,\n                        type: 'GET',\n                        url: '/tinymce/api/file.json',\n                        cache: false,\n                        contentType: false,\n                        processData: false,\n                        header:{'Content-Type':'multipart/form-data'},\n                        dataType: 'json',\n                        xhr: xhrOnProgress(function (e) {\n                            const percent = (e.loaded / e.total * 100 | 0) + '%';//计算百分比\n                            progressCallback(percent);\n                        }),\n                    }).then(function (data) {\n                        if ( data.code== 200) {\n                            succFun(data.data,{text: file.name});\n                        } \n                    }).fail(function (error) {\n                        // failFun('上传失败:' + error.message)\n                    });\n                 },\n                 tp_attachment_max_size: 5009715200,\n                //  attachment_style: '.attachment>img{display:inline-block!important;max-width:30px!important;}',\n                 tp_attachment_assets_path: '/tinymce/plugins/attachment/icons',\n                \n              \n                 init_instance_callback: function(editor){\n                     $('#tinymce-app').fadeIn(1000);\n                  //    editor.execCommand('selectAll');\n                  //    editor.selection.getRng().collapse(false);\n                  //    editor.focus();\n                 }\n          }).then(function(res){\n                 tinymce.feedBackIframeUrl ='/tinymce/plugins/help/docBox.html'; //反馈链接\n             });\n  </script>\n</body>\n</html>\n\n
html
'},sourceCode:function(){return''}},template:'\n \n '},u={name:"domeVue3",components:{TinymceVue:n},data:function(){return{content:"Tinymce-Plugin",tinymceOptions:{min_height:200,max_height:700,skeletonScreen:!0,base_url:"/tinymce",plugins:"code tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview",toolbar:["|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview"]}}}};u.methods?u.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-Plugin',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}:u.methods={source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-Plugin',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}},u.template='\n \'\n \n ';var d={};d.methods?(d.methods.source=function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-plugin',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'},d.methods.template=function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},d.methods.sourceCode=function(){return{name:"domeVue2",components:{TinymceVue:n},data:function(){return{content:"Tinymce-plugin",tinymceOptions:{min_height:200,max_height:700,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview",toolbar:["code tpIndent2em tpCollapse tpTabs tpButtons Preview"],skeletonScreen:!0}}}}}):d.methods={template:function(){return'
\n

插件demo展示区域

\n
\n \n
\n
\n
'},sourceCode:function(){return{name:"domeVue2",components:{TinymceVue:n},data:function(){return{content:"Tinymce-plugin",tinymceOptions:{min_height:200,max_height:700,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview",toolbar:["code tpIndent2em tpCollapse tpTabs tpButtons Preview"],skeletonScreen:!0}}}}},source:function(){return'
<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'Tinymce-plugin',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n
vue
'}},d.template='\n \n ';var y={};y.methods={source:function(){return'
<script>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport { Editor } from '@tinymce/tinymce-react';\n\n     class ReactDemo extends React.Component{\n       constructor(props) {\n           super(props);\n           this.state = { reactDemoInitialValue: "<p>这是一个REactDemo</p>"};\n           this.reactDemoInit = {\n                    min_height: 220,\n                    base_url:'/tinymce',\n                    branding: false,\n                    language:'zh_CN',\n                    menubar: false,\n                    skeletonScreen: true,\n                    plugins: ['advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons', 'insertdatetime media table paste code help wordcount tpImportword'],\n                    toolbar: 'undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help',\n                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n             };\n       this.handleChange = (data)=>{\n              this.setState({reactDemoInitialValue: data})\n        }\n      }\n      render(){\n        return (\n           <div>\n            <h1>tinymce demo2</h1>\n            <div>\n            <Editor initialValue={this.state.reactDemoInitialValue} init={this.reactDemoInit} onEditorChange={this.handleChange} />\n            </div>\n            <div dangerouslySetInnerHTML={{__html: this.state.reactDemoInitialValue }} ></div>\n          </div>\n          );\n      }\n    }\n\n   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));\n</script>\n
html
'},sourceCode:function(s){var n=function(s){p(c,s);var n=i(c);function c(s){var l;return a(this,c),(l=n.call(this,s)).state={reactDemoInitialValue:"

这是一个REactDemo

"},l.reactDemoInit={min_height:220,base_url:"/tinymce",branding:!1,language:"zh_CN",menubar:!1,skeletonScreen:!0,plugins:["advlist autolink lists link image charmap print preview anchor","searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons","insertdatetime media table paste code help wordcount tpImportword"],toolbar:"undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | 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 }"},l.handleChange=function(s){l.setState({reactDemoInitialValue:s})},l}return l(c,[{key:"render",value:function(){return t.createElement("div",null,t.createElement("h1",null,"tinymce demo2"),t.createElement("div",null,t.createElement(e,{initialValue:this.state.reactDemoInitialValue,init:this.reactDemoInit,onEditorChange:this.handleChange})),t.createElement("div",{dangerouslySetInnerHTML:{__html:this.state.reactDemoInitialValue}}))}}]),c}(t.Component);return c.render(t.createElement(n,null),s)}},y.template='\n \n ';s("default",r({components:{Demo0:o,Demo1:h,Demo2:j,Demo3:m,Demo4:g,Demo5:u,Demo6:d,Demo7:y},template:'

# 实例 Demo 语法

\n
\n
点击查看demo组用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
<demoGroup>\n<demoGroupItem title="Javascript">\n// 需要空一行很重要\n:::tinymce\n```html\n<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta name="renderer" content="webkit">\n  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>\n  <!-- <script src='./api/api.js'></script> -->\n  \n  <script src='https://tinymce-plugin.gitee.io/tinymce/tinymce.js'></script><!-- 必要 -->\n  <script src='https://unpkg.com/tinymce-plugin'></script><!-- 必要 -->\n</head>\n\n<body tp-page-height="498">\n      <div class="demo">\n        <div id="tinymce-app">\n           ...\n        </div>\n      </div>\n  <script>\n    ...\n  </script>\n</body>\n</html>\n\n```\n:::\n </demoGroupItem>\n <demoGroupItem title="Vue" active>\n\n:::tinymce-vue3\n\n```vue\n<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em";\nimport "tinymce-plugin/plugins/tpImportword";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'dsdsdssfdddddddddddddddddddsd',\n        tinymceOptions:{\n                // custom_elements: 'tp-collapse',\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n```\n\n:::\n </demoGroupItem>\n <demoGroupItem title="Vue2">\n\n:::tinymce-vue2\n\n```vue\n<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em";\nimport "tinymce-plugin/plugins/tpImportword";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'fivesdsdsd',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n```\n\n:::\n </demoGroupItem>\n <demoGroupItem title="React">\n  \n:::tinymce-react\n\n```html\n<script>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em";\nimport "tinymce-plugin/plugins/tpImportword";\nimport { Editor } from '@tinymce/tinymce-react';\n\n     class ReactDemo extends React.Component{\n       constructor(props) {\n         super(props);\n           this.reactDemoInit = {\n                    min_height: 220,\n                    base_url:'/tinymce',\n                    branding: false,\n                    language:'zh_CN',\n                    menubar: false,\n                    skeletonScreen: true,\n                    plugins: ['advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons', 'insertdatetime media table paste code help wordcount tpImportword'],\n                    toolbar: 'undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help',\n                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n             };\n           this.reactDemoInitialValue = "<p>这是一个REactDemo</p>"\n        }\n      render(){\n        return (\n           <div>\n            ...\n          </div>\n          );\n      }\n    }\n\n   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));\n</script>\n```\n:::\n\n </demoGroupItem>\n</demoGroup>\n
md
\n
\n
点击查看javascript用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
:::tinymce\n```html\n<!DOCTYPE html>\n<html>\n<head>\n    <meta charset="UTF-8">\n    <meta http-equiv="X-UA-Compatible" content="IE=edge">\n    <meta name="viewport" content="width=device-width, initial-scale=1.0">\n    <meta name="renderer" content="webkit">\n  <script src="https://cdn.staticfile.org/jquery/2.2.4/jquery.min.js"></script>\n  <!-- <script src='./api/api.js'></script> -->\n  \n  <script src='https://tinymce-plugin.gitee.io/tinymce/tinymce.js'></script><!-- 必要 -->\n  <script src='https://unpkg.com/tinymce-plugin'></script><!-- 必要 -->\n</head>\n\n<body tp-page-height="498">\n      <div class="demo">\n        <div id="tinymce-app">\n           ...\n        </div>\n      </div>\n  <script>\n    ...\n  </script>\n</body>\n</html>\n\n```\n:::\n
md
\n
\n
点击查看vue3 Dome用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
:::tinymce-vue3\n\n```vue\n<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div  v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nexport default{\nname: 'domeVue3',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'tinymce-plugin',\n        tinymceOptions:{\n                // custom_elements: 'tp-collapse',\n                min_height: 200,\n                max_height: 700,\n                skeletonScreen: true,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword preview',\n                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons tpImportword | Preview'],\n             \n        }\n    }\n  }\n}\n</script>\n```\n\n:::\n
md
\n
\n
点击查看vue2 Dome用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
:::tinymce-vue2\n```vue\n<template>\n<div>\n <h1>插件demo展示区域</h1>\n  <div class="vueDemo">\n    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>\n  </div>\n  <div v-html="content"></div>\n</div>\n</template>\n\n<script>\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport TinymceVue from "@tinymce-plugin/tinymce-vue";\nexport default{\nname: 'domeVue2',\ncomponents: { TinymceVue },\ndata(){\n    return {\n        content: 'five',\n        tinymceOptions:{\n                min_height: 200,\n                max_height: 700,\n                base_url:'/tinymce',\n                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons image preview',\n                toolbar: ['code tpIndent2em tpCollapse tpTabs tpButtons Preview'],\n                skeletonScreen: true,\n             \n        }\n    }\n  }\n}\n</script>\n```\n:::\n\n
md
\n
\n
点击查看 React Dome用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
\n:::tinymce-react\n```html\n<script>\nimport React from 'react';\nimport ReactDOM from 'react-dom';\nimport tinymce from "tinymce";\nimport "tinymce-plugin";\nimport "tinymce-plugin/plugins/tpIndent2em/plugin.js";\nimport "tinymce-plugin/plugins/tpImportword/plugin.js";\nimport { Editor } from '@tinymce/tinymce-react';\n\n     class ReactDemo extends React.Component{\n       constructor(props) {\n         super(props);\n           this.reactDemoInit = {\n                    min_height: 220,\n                    base_url:'/tinymce',\n                    branding: false,\n                    language:'zh_CN',\n                    menubar: false,\n                    skeletonScreen: true,\n                    plugins: ['advlist autolink lists link image charmap print preview anchor', 'searchreplace visualblocks code fullscreen tpIndent2em autoresize tpCollapse tpTabs tpButtons', 'insertdatetime media table paste code help wordcount tpImportword'],\n                    toolbar: 'undo redo tpIndent2em autoresize tpCollapse tpTabs tpButtons tpImportword | formatselect image | ' + 'bold italic backcolor | alignleft aligncenter ' + 'alignright alignjustify | bullist numlist outdent indent | ' + 'removeformat | help',\n                    content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n             };\n           this.reactDemoInitialValue = "<p>这是一个REactDemo</p>"\n        }\n      render(){\n        return (\n           <div>\n           ...\n          </div>\n          );\n      }\n    }\n\n   ReactDOM.render(<ReactDemo />, document.getElementById('ReactRootID'));\n</script>\n```\n\n:::\n\n
md
\n
\n
点击查看 tinymce-box用法\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
::::tinymce-box\n:::html\n```html\n<textarea id='basic-example'>\n  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="https://www.tiny.cloud/docs/images/logos/android-chrome-256x256.png" alt="TinyMCE Logo" width="128" height="128" /></p>\n  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>\n\n  <h2>Got questions or need help?</h2>\n\n  <ul>\n    <li>Our <a href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>\n    <li>Have a specific question? Try the <a href="https://stackoverflow.com/questions/tagged/tinymce" target="_blank" rel="noopener"><code>tinymce</code> tag at Stack Overflow</a>.</li>\n    <li>We also offer enterprise grade support as part of <a href="https://www.tiny.cloud/pricing">TinyMCE premium plans</a>.</li>\n  </ul>\n\n  <h2>A simple table to play with</h2>\n\n  <table style="border-collapse: collapse; width: 100%;" border="1">\n    <thead>\n      <tr>\n        <th>Product</th>\n        <th>Cost</th>\n        <th>Really?</th>\n      </tr>\n    </thead>\n    <tbody>\n      <tr>\n        <td>TinyMCE</td>\n        <td>Free</td>\n        <td>YES!</td>\n      </tr>\n      <tr>\n        <td>Plupload</td>\n        <td>Free</td>\n        <td>YES!</td>\n      </tr>\n    </tbody>\n  </table>\n\n  <h2>Found a bug?</h2>\n\n  <p>\n    If you think you have found a bug please create an issue on the <a href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.\n  </p>\n\n  <h2>Finally ...</h2>\n\n  <p>\n    Don't forget to check out our other product <a href="http://www.plupload.com" target="_blank">Plupload</a>, your ultimate upload solution featuring HTML5 upload support.\n  </p>\n  <p>\n    Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br>All the best from the TinyMCE team.\n  </p>\n</textarea>\n\n```\n:::\n:::js\n```js\ntinymce.init({\n  selector: 'textarea#basic-example',\n  height: 500,\n  menubar: false,\n  skeletonScreen: true,\n  plugins: [\n    'advlist autolink lists link image charmap print preview anchor',\n    'searchreplace visualblocks code fullscreen',\n    'insertdatetime media table paste code help wordcount'\n  ],\n  toolbar: 'undo redo | formatselect | ' +\n  'bold italic backcolor | alignleft aligncenter ' +\n  'alignright alignjustify | bullist numlist outdent indent | ' +\n  'removeformat | help',\n  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n});\n```\n:::css\n```css\n#basic-example{\n    color: #333;\n}\n```\n:::\n::::\n
md
\n
\n\n \n\n \n \n\n \n \n\n \n \n\n \n\n\n\n\n\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
<textarea id='basic-example'>\n  <h1><strong>👋 Welcome !</strong></h1>\n  <p><img style="display: block; margin-left: auto; margin-right: auto;" title="Tiny Logo" src="/thinymce-pluginIcon.png" alt="TinyMCE Logo" width="128"  /></p>\n  <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>\n  <h1> ✨Tinymce-plugin</h1>\n  <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>\n</textarea>\n\n
html
\n
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
tinymce.init({\n  selector: 'textarea#basic-example',\n  height: 500,\n  menubar: false,\n  skeletonScreen: true,\n  plugins: [\n    'advlist autolink lists link image charmap print preview anchor',\n    'searchreplace visualblocks code fullscreen',\n    'insertdatetime media table paste code help wordcount'\n  ],\n   images_upload_handler: function (blobInfo, succFun, failFun) {\n                    var file = blobInfo.blob();\n                    var reader = new FileReader();\n                    reader.onload = function(e){\n                     succFun(e.target.result)\n                    }\n                   reader.readAsDataURL(file)\n  },\n  toolbar: 'undo redo | formatselect | ' +\n  'bold italic backcolor | alignleft aligncenter ' +\n  'alignright alignjustify | bullist numlist outdent indent | ' +\n  'removeformat | help',\n  content_style: 'body { font-family:Helvetica,Arial,sans-serif; font-size:14px }'\n});\n
js
\n
  • 1
  • 2
  • 3
#basic-example{\n    color: #333;\n}\n
css
\n
'}))}}}))}();