vue 2.0使用tinymce-vue富文本

前端学习使者
9,529 阅读2分钟

npm下载，如果是vue3.0版本执行以下代码

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

在tinymce4.0以后不支持vue2.0，所以需要固定版本，或降级版本，否则会报错

TypeError: Object(...) is not a function 
at Module../node_modules/_@tinymce_tinymce-vue@4.0.0@@tinymce/tinymce-vue/lib/es2015/main/ts
/components/Editor.js (Editor.js:37)

vue2.0使用以下npm安装

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

安装完成后需要把node_modules下的tinymce下的skins文件夹复制粘贴到public文件夹下备用。

因为富文本默认是英文的，所以需要去官网下载对应语言包,里面包含了大部分国家的语言，下载完成后是一个js文件，中文包名是zh_CN.js

官网下载 https://www.tiny.cloud/get-tiny/language-packages/

下载完成后将js放在public文件夹下备用，目录结构如下。

在页面中使用富文本分为四步。

① 在页面中引入下面四行代码，并在components中注册Editor

import tinymce from "tinymce";import Editor from "@tinymce/tinymce-vue";import 'tinymce/themes/silver/theme';
// 这里引入报错可以替换成 import 'tinymce/themes/modern/theme'import "tinymce/icons/default";  //显示富文本图标，如果不加富文本图标显示会变成 !not found

  components: {    myEditor:Editor  },

②  在template 里面加上如下代码

      <myEditor id="tinymce" v-model="value" :init="init" > </myEditor>      <div v-html="value"></div>

③ 在data里面加如下代码

  data() {    return {      value:'',      init:{        language_url: "/zh_CN.js",   // 语言包位置，因为放在public下所以可以省略public        selector: "#tinymce", //tinymce的id        language: "zh_CN", //语言类型        skin_url: "/skins/ui/oxide", 
        height: 500, //编辑器高度        branding: false,//是否禁用“Powered by TinyMCE”        },    };  },

④ 在mounted中调用tinymce.init({})。

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

页面上就可以显示一个富文本编辑器了，但是功能很少可能不满足需求。

import "tinymce/plugins/image";  引入图片插件import "tinymce/plugins/link";   引入超链接插件import "tinymce/plugins/code";   引入代码插件import "tinymce/plugins/table";  引入表格插件import "tinymce/plugins/lists";  import "tinymce/plugins/wordcount";

在data的init:{}里面加入  plugins: 'link image lists table wordcount code',就可以增加上面引入的插件，加入下面这一行就可以在toolbar栏显示相应插件。
toolbar: "fontselect fontsizeselect link lineheight forecolor backcolor bold italic underline strikethrough | alignleft aligncenter alignright alignjustify | image quicklink h2 h3 blockquote table numlist bullist preview fullscreen",

页面展示如下：

加入下面三行代码可以使用拖拽图片进富文本

import "tinymce/plugins/paste";
paste_data_images: true, //开启图片拖拽上传
plugins: 'paste',

更多详情配置见官方文档

https://github.com/tinymce/tinymce-vue
https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide
http://tinymce.ax-z.cn/  中文文档
avatar
文章
阅读
粉丝