@packy-tang/vue-tinymce
Version:
A simple vue-based tinymce component
3 lines (2 loc) • 2.37 kB
JavaScript
const t=["INIT","INPUT","CHANGED"];var e={name:"VueTinymce",model:{prop:"content",event:"change"},props:{content:{type:[String,Object],default:""},setup:{type:Function,default:function(){}},disabled:{type:Boolean,default:!1},setting:{type:Object,default:function(){return{}}},debug:Boolean},render(t){return"undefined"==typeof tinymce?t("div","tinymce is undefined"):t("div",{attrs:{id:this.id}})},data:()=>({id:"vue-tinymce-"+Date.now()+Math.floor(1e3*Math.random()),editor:null,status:0,bookmark:null}),watch:{content(t,e){if(this.changedLog({type:"propsChanged"},this.status,`${t} | ${e}`,"--"),1!==this.status&&e!==t&&this.editor&&this.editor.initialized)return null===t?this.resetContent(""):void this.setContent(t)},disabled(t){this.editor.setMode(t?"readonly":"design")}},created(){if(this.changedLog=this.debug?(console.warn("`@packy-tang/vue-tinymce`进入debug模式"),(e,n,o,i)=>console.log("来自:%s | 状态:%s \n %s \n %s",e.type,t[n],o,i)):()=>!1,"undefined"==typeof tinymce)throw new Error("tinymce undefined")},beforeMount(){const t=Object.assign({},this.setting,{selector:"#"+this.id,setup:t=>{this.setup(t),t.on("init",(()=>{this.setContent(this.content,t),t.on("keyup input",(t=>{this.status=1})),t.on("SetContent",(e=>{this.changedLog(e,this.status,t.getContent(),"--")})),t.on("Blur",(e=>{this.status=0,this.changedLog(e,this.status,t.getContent(),"--")})),t.on("input keyup Change Undo Redo ExecCommand NodeChange",(e=>{this.onChanged(e,t)}))}))}});this.editor=tinymce.createEditor(t.selector,t)},mounted(){this.editor.targetElm=this.$el,this.editor.render()},updated(){this.editor.render()},beforeDestroy:function(){this.editor.remove()},methods:{setContent(t,e){e||(e=this.editor),e.setContent(t),e.selection.moveToBookmark(this.bookmark)},resetContent(t,e){if(e||(e=this.editor),e.resetContent)return e.resetContent(t);e.setContent(t),e.setDirty(!1),e.undoManager.clear()},onChanged(t,e){e||(e=this.editor),"change"===t.type&&(this.bookmark=t.level.bookmark);const n=e.getContent();this.changedLog(t,this.status,n,"--"),this.$emit("change",n)}}};var n=new class{constructor(){const{prefix:t}={prefix:""};this.prefix=t}install(t,n={}){const o=n.prefix||this.prefix,i={VueTinymce:e};Object.keys(i).forEach((e=>{const n=i[e];t.component(o+n.name,n)}))}};export default n;export{e as VueTinymce};
//# sourceMappingURL=vue-tinymce.esm.js.map