效果图
过程
安装对应的依赖 (最好指定版本)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>
项目的 gitee 仓库地址:/junfeng535/tinymce-rich-text