1200字范文 > 在 vue 中基于 tinymce 封装的一个富文本编辑器组件

在 vue 中基于 tinymce 封装的一个富文本编辑器组件

时间：2021-05-10 07:58:36

效果图

过程

安装对应的依赖（最好指定版本）

npm install tinymce@5.0.3 -Snpm install @tinymce/tinymce-vue@2.0.0 -S

安装依赖的版本不同，可能会出现奇奇怪怪的问题！！！

在项目的 public 目录下新建【tinymce】文件夹，整体目录结构如下

到tinymce官网去下载汉化包 https://www.tiny.cloud/get-tiny/language-packages/

将解压后的文件夹【langs】拷贝到刚刚新建的【tinymce】文件夹目录下在项目下的【node_modules】目录下找到【tinymce】文件夹下的【skins】文件夹，将其拷贝到刚刚新建的【tinymce】文件夹目录下。在 components 目录下新建 Tinymce 文件夹，并新建如下几个文件。

Tinymce.vue文件中代码如下：

<template><div><Editor id="tinymce" v-model="tinymceHtml" :init="editorInit"></Editor></div></template><script>import Editor from "@tinymce/tinymce-vue";import tinymce from "tinymce/tinymce";import "tinymce/themes/silver/theme";import axios from "axios";// 引入编辑器插件（基本免费插件都在这儿了）import "tinymce/plugins/advlist"; //高级列表import "tinymce/plugins/anchor"; //锚点import "tinymce/plugins/autolink"; //自动链接import "tinymce/plugins/autosave"; //自动存稿import "tinymce/plugins/charmap"; //特殊字符import "tinymce/plugins/code"; //编辑源码import "tinymce/plugins/codesample"; //代码示例import "tinymce/plugins/directionality"; //文字方向import "tinymce/plugins/emoticons"; //表情import "tinymce/plugins/fullscreen"; //全屏import "tinymce/plugins/help"; //帮助import "tinymce/plugins/hr"; //水平分割线import "tinymce/plugins/insertdatetime"; //插入日期时间import "tinymce/plugins/link"; //超链接import "tinymce/plugins/lists"; //列表插件import "tinymce/plugins/media"; //插入编辑媒体import "tinymce/plugins/image"; // 插入图片import "tinymce/plugins/nonbreaking"; //插入不间断空格import "tinymce/plugins/pagebreak"; //插入分页符import "tinymce/plugins/paste"; //粘贴插件import "tinymce/plugins/preview"; //预览import "tinymce/plugins/print"; //打印import "tinymce/plugins/save"; //保存import "tinymce/plugins/searchreplace"; //查找替换import "tinymce/plugins/table"; //表格import "tinymce/plugins/template"; //内容模板import "tinymce/plugins/textcolor"; //文字颜色import "tinymce/plugins/textpattern"; //快速排版import "tinymce/plugins/visualblocks"; //显示元素范围import "tinymce/plugins/visualchars"; //显示不可见字符import "tinymce/plugins/wordcount"; //字数统计// import "tinymce/icons/default/icons";// import "tinymce/plugins/toc"; //目录生成器// import "tinymce/plugins/importcss"; //引入css// import "tinymce/plugins/fullpage"; //文档属性// import "tinymce/plugins/quickbars"; //快速工具栏// import 'tinymce/plugins/spellchecker' //拼写检查，未加入汉化，不建议使用// import "tinymce/plugins/tabfocus"; //切入切出，按tab键切出编辑器，切入页面其他输入框中// import "tinymce/plugins/autoresize"; //编辑器高度自适应,注：plugins里引入此插件时，Init里设置的height将失效import plugins from "./plugins";import toolbar from "./toolbar";import {fontsize_formats, font_formats, line_height } from "./fontstyle";export default {name: "TinymceDemo",components: {Editor },props: {htmlStr: {type: String,default: "",},},data() {return {tinymceHtml: this.htmlStr,editorInit: {language_url: "tinymce/langs/zh_CN.js", //你下载的语言包的路径language: "zh_CN",skin_url: "tinymce/skins/ui/oxide", //主题height: 700,max_height: 700,menubar: false, //隐藏默认菜单栏branding: false, //隐藏右下角商标plugins,toolbar,fontsize_formats,font_formats,toolbar_sticky: true,autosave_ask_before_unload: false,style_formats_merge: true, //设置行高style_formats_autohide: true, //设置行高style_formats: [{title: "Line Height",items: line_height,}],// forced_root_block : 'div', 默认是段落(p)images_upload_handler: (blobInfo, success, failure) => {console.log(blobInfo.blob().size / 1024 / 1024);if (blobInfo.blob().size / 1024 / 1024 > 20) {failure("上传失败，图片大小请控制在 20M 以内");} else {let formData = new FormData();formData.append("file", blobInfo.blob());// 上传图片的接口axios.post("/api/upload/image", formData).then((res) => {success(res.data.url);}).catch(() => {failure("上传出错，服务器开小差了呢");});}},file_picker_callback: (callback, value, meta) => {if (meta.filetype === "media") {// 动态创建上传input，并进行模拟点击上传操作，达到本地上传视频效果。let input = document.createElement("input"); //创建一个隐藏的inputinput.setAttribute("type", "file");input.setAttribute("accept", ".mp4");input.onchange = function () {let file = this.files[0];let formData = new FormData();formData.append("file", file);// 上传视频接口axios.post("/api/upload/video", formData).then((res) => {console.log(res.data.url);callback(res.data.url);}).catch(() => {console.log("上传出错，服务器开小差了呢");});};//触发点击input.click();}},},};},watch: {htmlStr(newValue) {this.tinymceHtml = newValue;},tinymceHtml(newValue) {this.$emit("handleChangeHtml", newValue);},},mounted() {},methods: {},};</script><style scoped>.editor-content {margin-top: 20px;}</style>

fontstyles.js文件中的代码如下：

module.exports = {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;Comic Sans MS=comic sans ms,sans-serif;Courier New=courier new,courier;Georgia=georgia,palatino;Helvetica=helvetica;Impact=impact,chicago;Symbol=symbol;Tahoma=tahoma,arial,helvetica,sans-serif;Terminal=terminal,monaco;Times New Roman=times new roman,times;Verdana=verdana,geneva;Webdings=webdings;Wingdings=wingdings,zapf dingbats;知乎配置=BlinkMacSystemFont, Helvetica Neue, PingFang SC, Microsoft YaHei, Source Han Sans SC, Noto Sans CJK SC, WenQuanYi Micro Hei, sans-serif;小米配置=Helvetica Neue,Helvetica,Arial,Microsoft Yahei,Hiragino Sans GB,Heiti SC,WenQuanYi Micro Hei,sans-serif",line_height: [{title: "1", block: "p", styles: {"line-height": "1.0" } },{title: "1.5", block: "p", styles: {"line-height": "1.5" } },{title: "1.75", block: "p", styles: {"line-height": "1.75" } },{title: "2", block: "p", styles: {"line-height": "2" } },{title: "3", block: "p", styles: {"line-height": "3" } },{title: "4", block: "p", styles: {"line-height": "4" } },{title: "5", block: "p", styles: {"line-height": "5" } },],};

plugins.js文件中的代码如下：

// 你想使用的任何插件都必须导入// 详细插件列表请参阅 /docs/plugins/// 自定义构建请参见 /download/custom-builds/const plugins = ["preview searchreplace autolink directionality visualblocks visualchars fullscreen image link media template code codesample table charmap hr pagebreak nonbreaking anchor insertdatetime advlist lists wordcount textpattern help autosave"] //这里所有的插件需要先引入，否则会报错export default plugins

toolbar.js文件中的代码如下：

// 下面是工具栏的列表// 详细清单见 /docs/advanced/editor-control-identifiers/#toolbarcontrolsconst toolbar = ["code codesample lineheight undo redo restoredraft | cut copy paste pastetext | forecolor backcolor bold italic underline strikethrough link anchor | alignleft aligncenter alignright alignjustify","| outdent indent | styleselect fontselect fontsizeselect | bullist numlist | blockquote subscript superscript removeformat | table image media charmap emoticons hr pagebreak insertdatetime \print preview | fullscreen | bdmap indent2em lineheight formatpainter axupimgs",];export default toolbar;

使用组件

在需要使用的组件中，引入即可

<template><tinymcestyle="height: auto; border-radius: 22px"@handleChangeHtml="handleChangeHtml"></tinymce></template><script>import tinymce from "../components/Tinymce/Tinymce";export default {components: {tinymce },data() {return {};},methods: {handleChangeHtml(val) {console.log(val);},},};</script>