Vue富文本编辑器 tinymce

1. 介绍tinymce

1.1 查看官网https://www.tiny.cloud/

1.2 查看样子

 

2 入门使用

2.1 资源下载

第一步：npm install @tinymce/tinymce-vue -S

第二步：npm install tinymce -S

2.2安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下

2.3 tinymce 默认是英文界面，所以还需要下载一个中文语言包

下载地址：https://www.tiny.cloud/get-tiny/language-packages/

如图所示：

下载后解压提取：zh_CN.js 并拷贝到static/tinymce/目录下面

最后目录结构为

3. 初始化页面

导包

import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'

注意 这里的Editor是tinymce-vue 的一个组件 需要在自己的页面注册后使用

export default {
  name: 'Tinymce',
  components: { Editor },

3.2 添加页面代码

<Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor>

3.3 编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

editorInit: {
  language_url: '/static/tinymce/zh_CN.js',
  language: 'zh_CN',
  skin_url: '/static/tinymce/skins/lightgray',
  height: 300
}

此段代码放在data(){}函数中，直接返回即可

data() {
    return { editorInit: { language_url: '/static/tinymce/zh_CN.js', language: 'zh_CN', skin_url: '/static/tinymce/skins/lightgray', height: 300 }}
  }

3.4 在mounted也要初始化一次

mounted() {
    tinymce.init({})
  },

4. 贴出完整的代码

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

<script>
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'
import Editor from '@tinymce/tinymce-vue'
export default {
  name: 'tinymce',
  data () {
    return {
      tinymceHtml: '请输入内容',
      init: {
        language_url: '/static/tinymce/zh_CN.js',
        language: 'zh_CN',
        skin_url: '/static/tinymce/skins/lightgray',
        height: 300,
        plugins: 'link lists image code table colorpicker textcolor wordcount contextmenu',
        toolbar:
          'bold italic underline strikethrough | fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent blockquote | undo redo | link unlink image code | removeformat',
        branding: false
      }
    }
  },
  mounted () {
    tinymce.init({})
  },
  components: {Editor}
}
</script>