tinymce-vue使用教程

转自：tinymce-vue使用教程 - 简书

一、资源下载

npm install tinymce -S  //当前版本^5.1.1
npm install @tinymce/tinymce-vue -S  //当前版本^3.0.1

二、安装语言包

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

language.png

三、初始化

import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import 'tinymce/themes/modern/theme'
//如果报错找不到  import 'tinymce/themes/modern/theme',可以替换成 import 'tinymce/themes/silver/theme'
//不过一般都会报错,说找不到的....

tingmce-vue 是一个组件,需要在components中注册,然后再使用

components: {Editor},

<editor id="tinymce" v-model="value" :init="init"></editor>

这里的 init 是 tinymce 初始化配置项，后面会讲到一些关键的 api，完整 api 可以参考官方文档,
中文文档
编辑器需要一个 skin 才能正常工作，所以要设置一个 skin_url 指向之前复制出来的 skin 文件

//这里是基于vue-cli 3.x配置的,如果不是cli3的情况,'/tinymce'前面要加上'/static',即'/static/tinymce/langs/zh_CN.js'
init: {selector: "#tinymce", //tinymce的idlanguage_url: "/tinymce/langs/zh_CN.js",language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件
}

同时在 mounted 中也需要初始化一次：

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

四、扩展插件

完成了上面的初始化之后，就已经能正常运行编辑器了，但只有一些基本功能
tinymce 通过添加插件 plugins 的方式来添加功能
比如要添加一个上传图片的功能，就需要用到 image 插件，添加超链接需要用到 link 插件

4.1 在import里引入插件

import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
//下面的插件是自带的,不需要引入,引入的时候,浏览器会有个警告,说这个插件是内核自带,请自行删除
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";

4.2 在data的init对象里引入插件

plugins: "image link code table lists wordcount", //引入插件

4.3 添加了插件之后，默认会在工具栏 toolbar 上添加对应的功能按钮，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", //工具栏

五、其他注意

如果出现5-1图的报错

5-1图报错.jpg

这是因为你import里引入的插件和plugins引入的插件没有相互对应上,删除部分插件调整
如果还存在报错,这是因为 init 参数地址错误
这是因为 init 参数地址错误，请核对下 init 参数中的几个路径是否正确,如果参数无误，可以先删除 language_url 和 language 再试

六、tinymce一些功能配置

//PS: 在data的init里配置
browser_spellcheck: true, // 拼写检查
branding: false, // 去水印
elementpath: false, //禁用编辑器底部的状态栏
statusbar: false, // 隐藏编辑器底部的状态栏
paste_data_images: true, // 允许粘贴图像
menubar: false, // 隐藏最上方menu
fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小
font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体file_picker_types: 'image',
images_upload_credentials: true,

七、图片上传

//在data的init里面配置
/** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容
*/
// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数
images_upload_handler: function(blobInfo, success, failure) {let formdata = new FormData();formdata.append("image", blobInfo.blob());//uploadImg是上传图片的请求接口uploadImg(formdata).then(res => {console.log(res);success("https://qnsjk.huabeisky.com/" + res.data);}).catch(res => {failure("error");});
}

八、预览效果

预览效果.png

九、封装

子组件myTinymce

<template><div class='tinymce-container'><editor id="tinymce" v-model="value" :init="init"></editor></div>
</template><script>
import tinymce from "tinymce";
import Editor from "@tinymce/tinymce-vue";
import "tinymce/themes/silver/theme";
import "tinymce/plugins/image";
import "tinymce/plugins/link";
import "tinymce/plugins/code";
import "tinymce/plugins/table";
import "tinymce/plugins/lists";
import "tinymce/plugins/wordcount";
import { uploadImg } from "@/api/common";
//下面的插件是自带的,不需要引入
// import "tinymce/plugins/contextmenu";
// import "tinymce/plugins/colorpicker";
// import "tinymce/plugins/textcolor";
export default {name: "MyTinymce",props: {tinymceHtml: '',tinymceHeight: {type: Number,default: 500}},components: {Editor},data() {return {value: this.tinymceHtml, //父组件通过ref拿到该组件的值init: {selector: "#tinymce",language_url: "/tinymce/langs/zh_CN.js",language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide", //编辑器需要一个skin才能正常工作，所以要设置一个skin_url指向之前复制出来的skin文件height: this.tinymceHeight,plugins: "image link code table lists wordcount", //引入插件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", //工具栏browser_spellcheck: true, // 拼写检查branding: false, // 去水印elementpath: false, //禁用编辑器底部的状态栏statusbar: false, // 隐藏编辑器底部的状态栏paste_data_images: true, // 允许粘贴图像menubar: false, // 隐藏最上方menufile_picker_types: 'image',images_upload_credentials: true,fontsize_formats: "14px 16px 18px 20px 24px 26px 28px 30px 32px 36px", //字体大小font_formats:"微软雅黑=Microsoft YaHei,Helvetica Neue;PingFang SC;sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun;serifsans-serif;Terminal=terminal;monaco;Times New Roman=times new roman;times", //字体/*** 下面方法是为tinymce添加自定义插入图片按钮* 借助iview的Upload组件,将图片先上传到存储云上，再将图片的存储地址放入编辑器内容*/// 图片上传三个参数，图片数据，成功时的回调函数，失败时的回调函数images_upload_handler: function(blobInfo, success, failure) {let formdata = new FormData();formdata.append("image", blobInfo.blob());uploadImg(formdata).then(res => {console.log(res);success("https://qnsjk.huabeisky.com/" + res.data);}).catch(res => {failure("error");});}}};},watch: {tinymceHtml(newV,oldV) {this.value = newV}},computed: {},created() {},mounted() {tinymce.init({});},methods: {}
};
</script>
<style lang="scss" scoped>
</style>

父组件中使用该组件

<template><div class=""><myTinymce ref="myTinymce" :tinymceHtml="content"></myTinymce></div>
</template>
<script>
import myTinymce from "@/components/MyTinymce";
export default {name: "",components: {myTinymce},
}
</script>

作者：天黑不下雨
链接：https://www.jianshu.com/p/44ee417537eb
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

tinymce-vue使用教程相关推荐

tinymce富文本vue使用教程
tinymce富文本vue使用教程一.资源下载二.下载中文语言包三.初始化富文本信息四.扩展插件五.其他注意六.tinymce一些功能配置七.图片上传(个人整理图片上传两种方式) 八.封 ...
Vue.js教程视频
Vue.js教程视频链接 https://www.bilibili.com/video/av32611687/?p=1 https://www.bilibili.com/video/av3261168 ...
最详细的vue-cli工具构建vue项目教程
最详细的vue-cli工具构建VUE项目教程一.安装node环境 1. 进入node 官网下载安装网址 https://nodejs.org/zh-cn/ 2. 默认安装(安装在C盘) 3. 安装 ...
editor修改样式 vue_手摸手Electron + Vue实战教程（三）
系列文章: 手摸手Electron + Vue实战教程(一) 手摸手Electron + Vue实战教程(二) ❝ 上一篇我们已经完成了左侧菜单栏的基本样式功能,这一篇我们就主要来开发右侧的Markd ...
vue基础教程总结篇，用最短的时间入门vue.js（持续更新...）
目前,vue已经成为前端工程师必会的框架之一,这里简单总结一下,可以让您快速的入门vue,师傅带进门,修行靠个人,最主要的还是自己多动手,多实践,本专栏会持续更新. 1.vue安装教程及简介 2.vu ...
Macbook 苹果电脑安装搭建Vue脚手架教程m1芯片Vue脚手架初学
Macbook 苹果电脑安装Vue脚手架教程 1.首先我们进入Node.js的官网,下载安装Node.js 如果你已经安装过可以忽略网址http://nodejs.cn/ 2.直接点击下载,这里我 ...
视频教程-新React+VUE前端教程入门到精通-Vue
新React+VUE前端教程入门到精通 10年以上开发经验,曾经是八维教育实训主任,千峰教育高级HTML5前端讲师,尚品中国创始人.现任程序思维创始人.曾和大厂.国企等大型企业合作开发项目.百余客户, ...
Vue _ 教程版 02 指令
目录目标一.模板语法 1.1.插值表达式 1.2.指令 1-2-1. v-text 指令 1-2-2. v-html 指令二.常用指令 2.1.v-show 指令 2.2.v-if 指令 2.3 ...
Vue.js教程-Vue项目的目录结构和.vue文件的构成
Vue.js教程-Vue项目的目录结构和.vue文件的构成前言 Vue项目的目录结构(Vue-cli3/4版本) .vue文件的构成 Html区域(template) script区域 export ...
win10安装和搭建vue环境（超详细教程）Vue新手教程(1)：
PS:笔者为计科专业研一在读,最近打算学习Vue,踩了许多坑,在此将学习过程分享出来,后续还会持续更新. 一.安装Vue环境首先,在安装Vue环境之前,我们首先需要安装npm这个玩意. 那么npm这 ...