import"./pinia.js";import"./tinymce.js";import{E as B}from"./Editor.js";import"./plugin.js";import"./plugin2.js";import{M as A}from"./vue.js";/*! * @plugin @tinymce-plugin/tp-layout * @version 0.0.2 (2022-8-3) * @description 一键排版 * @copyright (2022) Five(Li Hailong) . All rights reserved. https://github.com/tinymce-plugin/tp-layout */(function(){var x=function(l){return l.getParam("tp_layout_options",{selection:"p,table,tr,td,h1,h2,h3,h4,h5,h6,ul,blockquote",clearStyle:[],filterTags:["table>*","img"],style:{"text-align":"justify","text-indent":"2em","line-height":1.5},tagsStyle:{}})},o={},j={},v=function(l){var t=l.dom,c=[],g=tinymce.util.Tools.resolve("tinymce.util.Tools");l.execCommand("selectAll");var a=x(l);for(var e in a.filterTags)a.filterTags[e].indexOf(">*")!=-1?j[a.filterTags[e].replace(">*","").toUpperCase()]=!0:o[a.filterTags[e].toUpperCase()]=!0;a.selection=a.selection||"p,table,tr,td,h1,h2,h3,h4,h5,h6,ul,blockquote";for(var e in a.tagsStyle){var i=e.split(",");a.selection+=","+e;for(var h in i)i[h].indexOf(">*")!=-1?j[i[h].replace(">*","").toUpperCase()]=e:o[i[h].toUpperCase()]=e}c=l.selection.getNode().querySelectorAll(a.selection);function w(p,u){var m=u.match(new RegExp(p+':?(.+?)"?[;}]'));return m?m[1]:!1}function S(p,u){var m="BODY",r=p.tagName;if(o[r]||j[r])return!a.tagsStyle[o[r]]||u?u&&_(p,a.tagsStyle[o[r]]):T(p,a.tagsStyle[o[r]]),!0;for(var y=p.parentNode,L=y.tagName;L!==m;){var C=y;if(r=L+">"+r,o[r]||j[L])return!a.tagsStyle[j[L]]||u?u&&_(p,a.tagsStyle[j[L]]):T(p,a.tagsStyle[j[L]]),!a.tagsStyle[o[r]]||u?u&&_(p,a.tagsStyle[o[r]]):T(p,a.tagsStyle[o[r]]),!0;y=C.parentNode,L=y.tagName}return!1}function M(p){var u=t.getAttrib(p,"style");for(var m in a.clearStyle){var r=new RegExp(a.clearStyle[m]+':?(.+?)"?[;}]');u=u.replace(r,"")}t.setAttrib(p,"style",u)}function _(p,u){var m=t.getAttrib(p,"style");for(var r in u){var y=new RegExp(r+':?(.+?)"?[;}]');m=m.replace(y,"")}t.setAttrib(p,"style",m)}function T(p,u){for(var m in u)t.setStyle(p,m,u[m]);if(u["text-indent"]){var r="",y="";p&&p.children[0]&&p.children[0].attributes&&p.children[0].attributes.style&&(r=w("font-size",p.children[0].attributes.style.textContent),y=w("letter-spacing",p.children[0].attributes.style.textContent),r?r=(parseInt(r)+parseInt(y||0))*2+"px":r=(parseInt(y||0)+16)*2+"px"),t.setStyle(p,"text-indent",a.style["text-indent"]&&a.style["text-indent"]!="2em"?a.style["text-indent"]:r||"2em")}}var N="";c[0]&&(c[0].dataset.layoutFv=c[0].dataset.layoutFv?"":c[0].dataset.layoutFv="layoutFV"),g.each(c,function(p){N==""&&(t.hasClass(p,"layoutFV")?(N="remove",t.removeClass(p,"layoutFV")):(N="add",t.addClass(p,"layoutFV"))),N=="add"?(S(p)||T(p,a.style),a.clearStyle&&M(p)):S(p,"remove")||_(p,a.style)})},b=function(l,t){l.undoManager.transact(function(){l.focus(),v(l)})},q=function(l,t){l.ui.registry.getAll().icons[t.registryName]||l.ui.registry.addIcon(t.registryName,t.icon),l.ui.registry.addToggleButton(t.registryName,{icon:t.registryName,tooltip:t.title,onAction:function(){return b(l)}}),l.ui.registry.addMenuItem(t.registryName,{icon:t.registryName,text:t.title,onAction:function(){return b(l)}})},k=function(l,t){l.addCommand("mce".concat(t.registryName.substring(0,1).toUpperCase()+t.registryName.substring(1)),function(c,g){b(l)})},s=function(l,t){try{tinymce.util.XHR.send({url:l.tp$.isDev()?"/langs/i18n.json":l.editorManager.PluginManager.urls[t.registryName]+"/langs/i18n.json",async:!1,success:function(c){try{l.tp$.I18n.add(l.settings.language,JSON.parse(c)[l.settings.language])}catch{}}})}catch{}},n=function(l){tinymce.PluginManager.add(l.registryName,function(t,c){return s(t,l),q(t,l),k(t,l),{getMetadata:function(){return{name:l.name,url:l.repo}}}})},d={name:"Layout",registryName:"tpLayout",title:"One click layout",repo:"https://github.com/tinymce-plugin/tp-layout",icon:''};n(d);var f={opt:d};return f})();/*! * @plugin @tinymce-plugin/tp-lineheight * @version 0.0.9 (2022-5-5) * @description 行间距 * @copyright (2022) Five(Li Hailong) https://github.com/tinymce-plugin/tp-lineheight */(function(){var x=function(s){return s.getParam("tp_lineheight_value","1 1.5 1.6 1.75 1.8 2 3 4 5")},o=function(s,n){s.undoManager.transact(function(){s.focus(),s.execCommand("tpLineHeight",!1,n)})},j=function(s,n){s.ui.registry.getAll().icons[n.registryName]||s.ui.registry.addIcon(n.registryName,n.icon);var d=tinymce.util.Tools.resolve("tinymce.util.Tools"),f=s.tp$.Tools,l=function(g){return g.length>0?g[0]:""},t=x(s).split(" "),c=f.selection.cell(l(t));s.ui.registry.addSplitButton(n.registryName,{icon:n.registryName,tooltip:n.title,select:function(g){return g===c.get()},fetch:function(g){var a=s.dom,e=s.selection.getSelectedBlocks(),i=-1;i==-1&&(i=a.getStyle(e,"line-height")?a.getStyle(e,"line-height"):""),g(d.map(t,function(h){return i==h&&c.set(h),{type:"choiceitem",text:h,value:h}}))},onAction:function(){o(s,c.getAction())},onItemAction:function(g,a){c.set(a,a),o(s,a)}}),s.ui.registry.addNestedMenuItem(n.registryName,{text:n.title,icon:n.registryName,getSubmenuItems:function(){var g=s.dom,a=s.selection.getSelectedBlocks(),e=-1;return e==-1&&(e=g.getStyle(a,"line-height")?g.getStyle(a,"line-height"):""),d.map(t,function(i){return{type:"togglemenuitem",text:i,active:e===i,onAction:function(){c.set(i,i),o(s,i)}}})}})},v=function(s,n){s.addCommand("mce".concat(n.registryName.substring(0,1).toUpperCase()+n.registryName.substring(1)),function(d,f){o(s,f)})},b=function(s){tinymce.PluginManager.add(s.registryName,function(n,d){return j(n,s),v(n,s),{getMetadata:function(){return{name:s.name,url:s.repo}}}})},q={name:"Lineheight",registryName:"tpLineheight",title:"Line Height",repo:"https://github.com/tinymce-plugin/tp-lineheight",icon:''};b(q);var k={opt:q};return k})();/*! * @plugin @tinymce-plugin/tp-letterspacing * @version 0.0.9 (2022-4-19) * @description 字母间距 * @copyright (2022) Five(Li Hailong) https://github.com/tinymce-plugin/tp-letterspacing */(function(){var x=function(s){return s.getParam("tp-letterspacing","0px 1px 2px 4px 6px 8px 10px 20px 40px")},o=function(s,n){s.undoManager.transact(function(){s.focus(),s.execCommand("tpLetterspacing",!1,n)})},j=function(s,n){s.ui.registry.getAll().icons[n.registryName]||s.ui.registry.addIcon(n.registryName,n.icon);var d=tinymce.util.Tools.resolve("tinymce.util.Tools"),f=s.tp$.Tools,l=function(a){var e=a,i=a,h=function(){return e},w=function(){return i},S=function(M,_){e=M,_&&(i=_)};return{get:h,set:S,getAction:w}},t=function(a){return a.length>0?a[0]:""},c=x(s).split(" "),g=l(t(c));s.ui.registry.addSplitButton(n.registryName,{icon:n.registryName,tooltip:n.title,select:function(a){return a===g.get()},fetch:function(a){var e=s.selection.getStart(),i=-1;if(i==-1){var h=f.getCurrentValue(e,"letter-spacing");i=h||t(c)}a(d.map(c,function(w){return i==w&&g.set(w),{type:"choiceitem",text:w,value:w}}))},onAction:function(){o(s,g.getAction())},onItemAction:function(a,e){g.set(e,e),o(s,e)}}),s.ui.registry.addNestedMenuItem(n.registryName,{text:n.title,icon:n.registryName,getSubmenuItems:function(){var a=s.selection.getStart(),e=-1;if(e==-1){var i=f.getCurrentValue(a,"letter-spacing");e=i||t(c)}return d.map(c,function(h){return{type:"togglemenuitem",text:h,active:e===h,onAction:function(){g.set(h,h),o(s,h)}}})}})},v=function(s,n){s.addCommand("mce".concat(n.registryName.substring(0,1).toUpperCase()+n.registryName.substring(1)),function(d,f){o(s,f)})},b=function(s){tinymce.PluginManager.add(s.registryName,function(n,d){return j(n,s),v(n,s),{getMetadata:function(){return{name:s.name,url:s.repo}}}})},q={name:"Letterspacing",registryName:"tpLetterspacing",title:"Letter Spacing",repo:"https://github.com/tinymce-plugin/tp-letterspacing",icon:''};b(q);var k={opt:q};return k})();const I={name:"domeVue3",components:{TinymceVue:B},data(){return{content:"\u6B22\u8FCE\u6765\u5230 Tinymce-plugin",tinymceOptions:{min_height:200,max_height:700,skeletonScreen:!0,menubar:!1,base_url:"/tinymce",plugins:"tp code tpIndent2em autoresize tpCollapse tpTabs tpButtons tpLineheight tpLetterspacing tpImportword tpLogicflow preview",toolbar:["|code tpIndent2em tpCollapse tpTabs tpButtons tpLayout tpLineheight tpLetterspacing tpImportword tpLogicflow | Preview"],images_upload_handler:function(x,o,j){var v=x.blob();v.name||(v.name="vue-"+Date.now()+Math.floor(Math.random()*1e3)+".png");var b=window.URL||window.webkitURL||window;o(b.createObjectURL(v))}}}}};I.methods?I.methods.source=function(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div  v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
import "tinymce-plugin/plugins/tpLayout/plugin.js";
import "tinymce-plugin/plugins/tpLineheight/plugin.js";
import "tinymce-plugin/plugins/tpLetterspacing/plugin.js";
import "tinymce-plugin/plugins/tpImportword/plugin.js"; 
export default{
name: 'domeVue3',
components: { TinymceVue },
data(){
    return {
        content: '\u6B22\u8FCE\u6765\u5230 Tinymce-plugin',
        tinymceOptions:{
                // custom_elements: 'tp-collapse',
                min_height: 200,
                max_height: 700,
                skeletonScreen: true,
                menubar: false,
                base_url:'/tinymce',
                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpLineheight tpLetterspacing tpImportword tpLogicflow preview',
                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons  tpLayout tpLineheight tpLetterspacing tpImportword tpLogicflow | Preview'],
                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))
                }
             
        }
    }
  }
}
</script>

vue
`}:I.methods={source(){return`
<template>
<div>
 <h1>\u63D2\u4EF6demo\u5C55\u793A\u533A\u57DF</h1>
  <div class="vueDemo">
    <tinymce-vue v-model="content" :init="tinymceOptions" ></tinymce-vue>
  </div>
  <div  v-html="content"></div>
</div>
</template>

<script>
import tinymce from "tinymce";
import "tinymce-plugin";
import TinymceVue from "@tinymce-plugin/tinymce-vue";
import "tinymce-plugin/plugins/tpIndent2em/plugin.js";
import "tinymce-plugin/plugins/tpLayout/plugin.js";
import "tinymce-plugin/plugins/tpLineheight/plugin.js";
import "tinymce-plugin/plugins/tpLetterspacing/plugin.js";
import "tinymce-plugin/plugins/tpImportword/plugin.js"; 
export default{
name: 'domeVue3',
components: { TinymceVue },
data(){
    return {
        content: '\u6B22\u8FCE\u6765\u5230 Tinymce-plugin',
        tinymceOptions:{
                // custom_elements: 'tp-collapse',
                min_height: 200,
                max_height: 700,
                skeletonScreen: true,
                menubar: false,
                base_url:'/tinymce',
                plugins: 'tp code  tpIndent2em autoresize tpCollapse tpTabs tpButtons tpLineheight tpLetterspacing tpImportword tpLogicflow preview',
                toolbar: ['|code tpIndent2em tpCollapse tpTabs tpButtons  tpLayout tpLineheight tpLetterspacing tpImportword tpLogicflow | Preview'],
                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))
                }
             
        }
    }
  }
}
</script>

vue
`}};I.template=` ' `;const F=A({components:{Demo0:I},template:`

# \u{1F44B} Welcome !

\u6B22\u8FCE\u6765\u5230 Tinymce-plugin

\u8FD9\u662F\u4E00\u4E2A\u4E13\u6CE8 \u63D0\u4F9B \u5F3A\u5927\u3001\u597D\u7528\u3001\u4E30\u5BCC \u7684 tinymce \u5BCC\u6587\u672C\u7F16\u8F91\u5668 \u63D2\u4EF6\u3001\u6269\u5C55 \u548C \u6280\u672F \u7684\u6280\u672F\u793E\u533A\uFF0C\u65B9\u4FBF \u4EA4\u6D41\u8BA8\u8BBA\uFF0C\u5206\u4EAB\u7ECF\u9A8C \u3002

\u672C\u793E\u533A\u6709\u591A\u4E2A\u4E0D\u9519\u7684\u63D2\u4EF6\u6216\u8005\u9879\u76EE\uFF0C\u6B22\u8FCE Star \u2B50 \u5173\u6CE8~

\u6D4B\u8BD5\u4E2D

# \u2728Tinymce-plugin

tinymce-plugin\xA0 release candidate\xA0 tinymce Version\xA0 GitHub license\xA0 tinymce Version

Tinymce-plugin \u793E\u533A \u6240\u6709\u7A33\u5B9A\u63D2\u4EF6 \u5C06\u6536\u5F55\u5728 tinymce-plugin \u548C @npkg/tinymce-plugin \u4E2D\u3002\uFF08\u4E8C\u8005\u540C\u6B65\uFF09

# \u6CE8\u610F

\u65E7\u7248\u5305 @npkg/tinymce-plugins \u505C\u6B62\u7EF4\u62A4

\u7531tinymce-plugin \u548C @npkg/tinymce-plugin \u66FF\u4EE3

# \u{1F64B}\u200D\u2642\uFE0F \u52A0\u5165\u793E\u533A

\u5982\u679C\u4F60\u6B63\u5728\u4F7F\u7528tinymce\uFF0C\u4E0D\u59A8\u52A0\u5165 Tinymce-plugin \u7EC4\u7EC7\uFF0C\u548C\u6211\u4EEC\u4E00\u8D77\u7EF4\u62A4\u53D1\u5C55\uFF0C\u5171\u540C\u6210\u957F\u3002\u53EF\u4EE5\u901A\u8FC7\u4EE5\u4E0B\u4E24\u79CD\u65B9\u5F0F\u52A0\u5165\uFF1A

# \u{1F4AC} \u4EA4\u6D41\u8BA8\u8BBA

# \u{1F44D} \u8D21\u732E\u8005\u5217\u8868

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
<textarea id='basic-example'>
  <h1><strong>\u{1F44B} 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>\u6B22\u8FCE\u6765\u5230 <a href="https://github.com/tinymce-plugin" target="_blank"><strong><code class="fv-code_inline">Tinymce-plugin</code></strong></a></p><p>\u8FD9\u662F\u4E00\u4E2A\u4E13\u6CE8 \u63D0\u4F9B <strong>\u5F3A\u5927\u3001\u597D\u7528\u3001\u4E30\u5BCC</strong> \u7684 <a href="https://www.tiny.cloud" target="_blank"><code class="fv-code_inline">tinymce</code></a> \u5BCC\u6587\u672C\u7F16\u8F91\u5668 <strong>\u63D2\u4EF6</strong>\u3001<strong>\u6269\u5C55</strong> \u548C <strong>\u6280\u672F</strong> \u7684\u6280\u672F\u793E\u533A\uFF0C\u65B9\u4FBF <strong>\u4EA4\u6D41\u8BA8\u8BBA</strong>\uFF0C<strong>\u5206\u4EAB\u7ECF\u9A8C</strong> \u3002</p><p>\u672C\u793E\u533A\u6709\u591A\u4E2A\u4E0D\u9519\u7684\u63D2\u4EF6\u6216\u8005\u9879\u76EE\uFF0C\u6B22\u8FCE Star \u2B50 \u5173\u6CE8~</p>
  <h1> \u2728Tinymce-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>


html
 
  • 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
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 }'
});

js
 
  • 1
  • 2
  • 3
#basic-example{
    color: #333;
}

css

\u66F4\u591A\u4F8B\u5B50\u89C1\u53C2\u4E0E\u8D21\u732E

`});export{F as default};