[JavaScript知识库]VUE中引入富文本，并操作节点。

? 中文文档 ：http://tinymce.ax-z.cn/

1.下载

yarn add tinymce  ||  npm install tinymce -S

yarn add @tinymce/tinymce-vue  ||  npm install @tinymce/tinymce-vue -S

汉化包?https://www.tiny.cloud/get-tiny/language-packages/

这里我没有用到汉化，样式也没用到，如需用将node_modules/tinymce/skins中的文件夹放入static文件夹中

2.在页面直接引入

import tinymce from 'tinymce/tinymce'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/themes/silver'
import 'tinymce/skins/ui/oxide/skin.css'
import 'tinymce/icons/default/icons'
// 编辑器插件plugins
import 'tinymce/plugins/noneditable' // 列表插件
import 'tinymce/plugins/nonbreaking'





//在components引入
  components: {
    Editor
  }

 data() {
    return {
       myValue：''
      init: {
        skin_url: '/tinymce/skins/ui/oxide',
        // skin_url: '/tinymce/skins/ui/oxide-dark',//暗色系
        height: 50,
        width: 500,
        selector: '#textarea',
        plugins: 'noneditable nonbreaking',
        elementpath: false,
        toolbar: false,
        // toolbar: this.toolbar,
        branding: false,
        menubar: false,
        statusbar: false,
        readonly: true,
        //这里是我自己用的样式
        content_css: '/static/mycss.css'
        // // 此处为图片上传处理函数，这个直接用了base64的图片形式上传图片，
        // // 如需ajax上传可参考https://www.tiny.cloud/docs/configure/file-image-upload/#images_upload_handler
        // images_upload_handler: (blobInfo, success, failure) => {
        //   const img = 'data:image/jpeg;base64,' + blobInfo.base64()
        //   success(img)
        // }
      },

  },

 <editor
      v-model="myValue"
      @click="onClick"
      :id="key"
    >
    </editor>

如此就引入成功了！

接下来就可以操作里面元素了，官方提供了几种方法，具体可以取官网看。这里添加一些DOM进去。

   <tiny-mce
              ref="editor"
              v-model:infotags="formData.infotags"
            
              :key="id"
            >
            </tiny-mce>
//引入
import tinyMce from './tinyMce.vue'

  components: {
    tinyMce
  },

  setContent(value, id) {
      let key = id
      tinyMCE.editors[key].setContent(value)
    }

let item = `<span class="tags mceNonEditable" style="background-color: ${value.color}">${value.name}</span>` 
this.$refs.editor.insertContent(item)
//class就是上面引入的class，可以自定义

现在，一个简单的富文本添加节点就完成了