富文本编辑器TinyMCE | tinymce在Vue中的使用

一、说明

    tinymce 官方为 vue 项目提供了一个组件 tinymce-vue，但是需要购买 tinymce 的服务。所以只能自己配置

二、使用步骤

    1、下载组件

npm install tinymce -S

    2、提取文件

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

tinymce 默认是英文界面，所以还需要下载一个中文语言包，下图中的zh_CN.js文件：https://www.tiny.cloud/get-tiny/language-packages/

这里为了结构清晰，将文件放在新建目录 Rich_text中

目录结构：

        

    3、在man.js中进行配置

import '@/assets/Rich_text/skins/ui/oxide/skin.min.css'; //富文本样式
import tinymce from 'tinymce/tinymce'; //配置富文本
import 'tinymce/themes/silver/theme.min.js' //引入富文本的主要脚本
import Editor from '@tinymce/tinymce-vue'; //引用富文本组件
import lang from '@/assets/Rich_text/zh_CN.js'; //引用中文语言

tinymce.addI18n('zh_CN', lang); //注册中文语言，这里配置不起作用后面还可以配置
Vue.component('editor', Editor); //注册全局组件

    4、在组件中使用，在这里先讲个简单使用

<template>
  <div>
    <editor v-model='tinymceHtml' :init='init'></editor>
  </div>
</template>
<script>
  export default{
    data(){
      return {
        tinymceHtml: '',//编辑框里面的内容
        init: {//编辑框的配置项
        }
      }
    }
  }
</script>

三、配置代码

    1、结构

 

 

    2、实例

    说明：有些功能是核心功能（下面表格中所属插件为核心的），是初始自带的功能。而所属插件项不是核心的，则需要引入插件

<template>
  <div>
    <editor v-model='tinymceHtml'  :init='init'></editor>
  </div>
</template>

<script>
   /* 引入插件 */
  import 'tinymce/plugins/image'
  import 'tinymce/plugins/table'
  export default{
    data(){
      return {
        tinymceHtml: '',//编辑框里面的内容
        init: {//编辑框的配置项目
          /* 语言配置，将其转化为中文，如果main.js配置不起作用，也可在这里配置 */
          language_url: '/static/tinymce/zh_CN.js',
          language: 'zh_CN',

          /* 引入的插件，与上面相对应 */
          plugins: 'image table',

          /* 菜单栏配置 */
          menubar: 'file edit insert view format table',//菜单栏显示的项目标题
          //menubar: false,//隐藏菜单栏
          menu: {//菜单栏项目点击后下拉的内容，items为下拉内容
            file: {title: 'File', items: 'newdocument'},
            edit: {title: 'Edit', items: 'undo redo | cut copy paste pastetext | selectall'},
            insert: {title: 'Insert', items: 'link media | template hr'},
            view: {title: 'View', items: 'visualaid'},
            format: {title: 'Format', items: 'bold italic underline strikethrough superscript subscript | formats | removeformat'},
            //items里的所有配置项所属为table插件，如果没引入table插件，菜单栏该项目不显示
            table: {title: 'Table', items: 'inserttable tableprops deletetable | cell row column'},
          },

          /* 工具栏配置 */
          toolbar:
            'bold italic underline strikethrough | link unlink image code| fontsizeselect | forecolor backcolor | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | undo redo ',

          /* 其它配置 */
          height: 300,//编辑框高度
          branding: false,//编辑框右下角是否显示 ：”由TINY驱动“
        }
      }
    }
  }
</script>

<style>
</style>

四、配置项

1、菜单栏可选项

配置项	所属插件	描述
newdocument	核心	创建一个新文档
undo	核心	撤回