0.8、VUE-VUE 富文本插件 tinymce

安装

安装是项目纬度的，安装完之后可以在 node_module 文件夹看到
vue -V 查看 Vue 版本
如果你是2.x的话

npm install tinymce@5.1.0 -S
npm install @tinymce/tinymce-vue@3.0.1 -S

如果是3.x

npm install tinymce -S
npm install @tinymce/tinymce-vue -S

skins 文件

将 node_modules/tinymce下的skins 文件夹copy到public
如果你的项目没有 public 则
node_modules/tinymce下的skins 文件夹copy到 static/tinymce

中文语言包

https://www.tiny.cloud/get-tiny/language-packages/
放到 static/tinymce

生成 单文本文件

俩问题

• ‘tinymce/themes/modern/theme’
  报错换为
  ‘tinymce/themes/silver/theme’

• skin_url: ‘./static/tinymce/skins/lightgray’
  报错换为
  skin_url: ‘./static/tinymce/skins/ui/oxide’

模板

<template>
  <div class="tinymce">
    <editor id="tinymce" v-model="tinymceHtml" :init="init" />
  </div>
</template>

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/silver/theme'
import Editor from '@tinymce/tinymce-vue'
import 'tinymce/plugins/image'
import 'tinymce/plugins/link'
import 'tinymce/plugins/code'
import 'tinymce/plugins/table'
import 'tinymce/plugins/lists'
import 'tinymce/plugins/contextmenu'
import 'tinymce/plugins/wordcount'
import 'tinymce/plugins/colorpicker'
import 'tinymce/plugins/textcolor'
import 'tinymce/plugins/print'
import 'tinymce/plugins/autoresize'
export default {
  name: 'Tinymce',
  components: { Editor },
  props: {
    value: {
      type: String,
      default: ''
    }},
  data() {
    return {
      tinymceHtml: this.value,
      init: {
        language_url: './static/tinymce/zh_CN.js', // 引入语言包路径 重要！！
        language: 'zh_CN',
        skin_url: './static/tinymce/skins/ui/oxide', // 引入皮肤路径 重要！！
        height: 435, // 设置高度 其实可以设置成props传值的，我这边只需要用到一次，所以给了固定高度
        autoresize_bottom_margin: 10,
        autoresize_max_height: 435, // 编辑区域的最大高
        autoresize_min_height: 435, // 编辑区域的最小高度
        //autoresize_on_init: true,
        autoresize_overflow_padding: 10,
        end_container_on_empty_block: true,
        // 插件列表可自定义
        plugins: 'print link lists image code table wordcount',
        // 工具栏列表
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | bullist numlist | alignleft aligncenter alignright alignjustify | outdent indent blockquote | undo redo |  code removeformat print',
        branding: false // 隐藏水印
      }
    }
  },
  watch: {
    value(newValue) {
      this.tinymceHtml = newValue
    },
    myValue(newValue) {
      this.$emit('input', newValue)
    }
  },
  mounted() {
    tinymce.init({})
  }

}
</script>

效果

参考

[1]、https://blog.csdn.net/jwj1111111/article/details/119185929
[2]、https://blog.csdn.net/wei_wenlong/article/details/102973286
[3]、http://tinymce.ax-z.cn/