本地引用方便于插件的自定义修改，针对于客户脑洞大开的需求还是方便一些。
1、首先把tiny从官网下载下来。
https://www.tiny.cloud/get-tiny/self-hosted/
4.png
2、然后把tiny整个包扔到static中。（我是webpack3.0的版本，所以放到static中不会被编译。如果是webpack4.0以后放到public中道理是一样的，注意下一步引入的路径即可）
5.png
3、然后在index.html中引入tiny
<body>
<script src="static/tinymce/tinymce.js"></script>
<div id="app"></div>
</body>
4、现在就可以用了。
<template>
<div class="tinymce-container" >
<textarea :id="tinymceId" class="tinymce-textarea" />
</div>
</template>
data(){
return {
tinymceId:'vue-tinymce-' + +new Date() + ((Math.random() * 1000).toFixed(0) + '')
}
}
mounted() {
this.initTinymce()
}
activated() {
this.initTinymce()
},
methods: {
initTinymce() {
const _this = this
window.tinymce.init({
selector: `#${this.tinymceId}`,
branding: false,
language: 'zh_CN',
height: 550,
body_class: 'panel-body editor-content',
object_resizing: false,
toolbar: ['newdocument undo redo | textpattern formatpainter template pastetext selectall| forecolor backcolor bold italic underline | fontborder strikethrough anchor |ltr rtl | alignleft aligncenter alignright alignjustify indent2em lineheight predistance postdistance| \
blockquote subscript superscript removeformat | styleselect formatselect | fontselect fontsizeselect | table image media link charmap emoticons hr pagebreak insertdatetime print preview | fullscreen | savetooss addnewslink'],
plugins:['print preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount imagetools textpattern help paste emoticons autosave indent2em lineheight postdistance savetooss quickbars formatpainter predistance bdmap fontborder addnewslink axupimgs'],
init_instance_callback: editor => {
if (_this.value) {
editor.setContent(_this.value)
}
_this.hasInit = true
/****改成了只绑定keyup事件 要不然编辑的时候一进来就走这个方法了*/
editor.on('KeyUp', () => {
_this.hasChange = true
_this.$emit('input', editor.getContent())
})
},
})
},
setContent(value) {
window.tinymce.get(this.tinymceId).setContent(value)
},
getContent() {
return window.tinymce.get(this.tinymceId).getContent()
},
}
以上，vue中简单的使用就完成了。剩下配置项中一些修修改改就需要根据实际需求了。
网友评论