vue中本地引用tinymce

最新推荐文章于 2024-08-05 17:45:34 发布

大帅丫

最新推荐文章于 2024-08-05 17:45:34 发布

阅读量2.9k

点赞数

分类专栏： tinymce js

本文链接：https://blog.csdn.net/weixin_40136189/article/details/103199542

版权

tinymce 同时被 2 个专栏收录

4 篇文章 0 订阅

订阅专栏

2 篇文章 0 订阅

订阅专栏

本地引用方便于插件的自定义修改，针对于客户脑洞打开的需求还是方便一些。
1、首先把tiny从官网下载下来。
https://www.tiny.cloud/get-tiny/self-hosted/

2、然后把tiny整个包扔到static中。（我是webpack3.0的版本，所以放到static中不会被编译。如果是webpack4.0以后放到public中道理是一样的，注意下一步引入的路径即可）

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中简单的使用就完成了。剩下配置项中一些修修改改就需要根据实际需求了。