tinymce富文本编辑器（vue）

TinyMCE中文文档地址：TinyMCE中文文档中文手册

1、安装
vue-cli版本：3.x+
安装tinymce
npm install tinymce -S
安装tinymce-vue
npm install @tinymce/tinymce-vue -S
这两个组件安装完之后，在public目录下新建文件夹static/tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的static/tinymce文件夹内，如下图所示

vue-cli版本：2.x
安装tinymce
npm install tinymce@5.0.3 -S
安装tinymce-vue
npm install @tinymce/tinymce-vue@2.0.0 -S


安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 static 目录下
注意： 如果是使用 vue-cli 3.x 构建的 typescript 项目，就放到 public 目录下，文中所有 static 目录相关都这样处理
tinymce 默认是英文界面，所以还需要下载一个中文语言包
然后将这个语言包放到 static 目录下，为了结构清晰，我包了一层 tinymce 目录

这个是vue-cli2项目的放法

这个是vue-cli3项目的放法

2、配置中文语言
到官网下载中文语言包?zh_CN.js

在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示

vue-cli2.x 同理

3.组件

<template> <!-- 富文本 --> <div> <editor v-model="content" :init="init" :disabled="disabled"></editor> </div> </template> <script> import tinymce from "tinymce/tinymce"; import Editor from "@tinymce/tinymce-vue"; import "tinymce/icons/default/icons"; import "tinymce/themes/silver"; import "tinymce/plugins/image"; import "tinymce/plugins/media"; 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/preview"; import "tinymce/plugins/code"; import "tinymce/plugins/link"; import "tinymce/plugins/advlist"; import "tinymce/plugins/codesample"; import "tinymce/plugins/hr"; import "tinymce/plugins/fullscreen"; import "tinymce/plugins/textpattern"; import "tinymce/plugins/searchreplace"; import "tinymce/plugins/autolink"; import "tinymce/plugins/directionality"; import "tinymce/plugins/visualblocks"; import "tinymce/plugins/visualchars"; import "tinymce/plugins/template"; import "tinymce/plugins/charmap"; import "tinymce/plugins/nonbreaking"; import "tinymce/plugins/insertdatetime"; import "tinymce/plugins/imagetools"; import "tinymce/plugins/autosave"; import "tinymce/plugins/autoresize"; export default { components: { Editor }, props: { value: { type: String, default: "" }, disabled: { type: Boolean, default: false }, plugins: { type: [String, Array], default: "preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr nonbreaking insertdatetime advlist lists wordcount imagetools textpattern autosave autoresize" }, toolbar: { type: [String, Array], default: "code undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link codesample | alignleft aligncenter alignright alignjustify outdent indent formatpainter | \ styleselect formatselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | \ table image media charmap hr pagebreak insertdatetime | fullscreen preview" } }, data() { return { //初始化配置 init: { //menubar: true, // 菜单栏显隐 language_url: "/static/tinymce/langs/zh_CN.js", //language_url: '../../static/tinymce/langs/zh_CN.js', // vue-cli2.x language: "zh_CN", skin_url: "/static/tinymce/skins/ui/oxide", //skin_url: '../../static/tinymce/skins/ui/oxide', // vue-cli2.x //content_css: '../../static/tinymce/skins/content/default/content.css',// vue-cli2.x height: 770, min_height: 770, max_height: 770, toolbar_mode: "wrap", plugins: this.plugins, toolbar: this.toolbar, content_style: "p {margin: 5px 0;}", fontsize_formats: "12px 14px 16px 18px 24px 36px 48px 56px 72px", font_formats: "微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;", branding: false, // 图片上传 images_upload_handler: (blobInfo, success, failure) => { // const img = 'data:image/jpeg;base64,' + blobInfo.base64() // success(img) const formData = new FormData() formData.append('file', blobInfo.blob()) reserveTableFoodDescribe(formData).then(res => { if (res.code === '10000') { const file = res.data success(file.url) return } failure('上传失败') }).catch(() => { failure('上传出错') }) } }, content: this.value }; }, mounted() { tinymce.init({}); }, methods: { }, watch: { value(newValue) { this.content = newValue; }, content(newValue) { this.$emit("input", newValue); } } }; </script> <style scoped lang="scss"> </style>

4.组件使用

import Editor from "@/components/imcoder-tinymce";
components: { Editor },
?<editor v-model="yourContent"></editor>