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

效果图

过程

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

 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 文件中的代码如下：

// 你想使用的任何插件都必须导入
// 详细插件列表请参阅 https://www.tinymce.com/docs/plugins/
// 自定义构建请参见 https://www.tinymce.com/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 文件中的代码如下：

// 下面是工具栏的列表
// 详细清单见 https://www.tinymce.com/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 仓库地址：https://gitee.com/junfeng535/tinymce-rich-text

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

Vue2 封装的 Quill 富文本编辑器组件 Vue-Quill-Editor
1.安装 npm install vue-quill-editor --save 2.使用 import { quillEditor } from 'vue-quill-editor' 3.组件中 & ...
java web编辑器插件_UEditer 是一个富文本编辑器，可以作为插件放到javaweb项目中使用，很好用~ Develop 238万源代码下载- www.pudn.com...
文件名称: UEditer下载收藏√ [ 5 4 3 2 1 ] 开发工具: Java 文件大小: 19833 KB 上传时间: 2015-03-19 下载次数: 0 提供者: 陈琳杰 ...
vue中使用kindeditor编辑器_vue富文本编辑器组件vue-quill-edit使用教程
这篇文章主要为大家详细介绍了vue富文本编辑器组件vue-quill-edit使用教程,具有一定的参考价值,可以用来参考一下. 感兴趣的小伙伴,下面一起跟随512笔记的小编两巴掌来看看吧! 之前使用的 ...
前端学习（2732）：重读vue电商网站42之添加富文本编辑器
vue-quill-editor 官方文档传送门通过 vue-ui 界面,可以安装我们所需要的依赖,或者使用下文 npm 或 yarn安装. NPM Js npm install vue-quill ...
Vue中使用vue-quil-editor富文本编辑器+el-upload实现带图片上传到SpringBoot后台接口
场景系统中经常会用到富文本编辑器,比如新增通知和公告功能,并且需要添加上传图片. vue-quill-editor官网: https://www.npmjs.com/package/vue-quil ...
Vue中使用TinyMce方法
最新项目上需要添加一个富文本编辑器,通过各种推荐与比较选择了TinyMce.我的项目是vue2,通过npm下载了模块后,找到官方文档进行阅读,只有英文文档,所以在阅读的时候有些细节方面就很难理解.下面 ...
ueditor html中使用方法,vue集成百度UEditor富文本编辑器使用教程
在前端开发的项目中,难免会遇到需要在页面上集成一个富文本编辑器.那么,如果你有这个需求,希望可以帮助到你. vue是前端开发者所追捧的框架,简单易上手,但是基于vue的富文本编辑器大多数太过于精简.于 ...
Vue3中使用Tinymce富文本编辑器（版本最新）
使用目录前言一.安装方法一(npm.yarn下载) 二.安装方法二(下载官网压缩包方法)--推荐总结前言最近使用了WangEditor编辑器和Tinymce编辑器,使用方法如下(采用的编辑器 ...
安卓文本编辑器php cpp,用安卓原生控件封装一个简易的富文本编辑器
最近接到项目需求:移动端原生写一个富文本编辑器. ( ⊙ o ⊙ )从没遇到过富文本要用原生写的,然后就查阅各种资料.然后结合自己的思路:其实安卓的富文本编辑器就是一个 "容器 ...
vue问题四：富文本编辑器上传图片
vue使用富文本编辑器上传图片: 我是用的是wangEditor 富文本编辑器 demo:http://www.wangeditor.com/ 1).安装依赖:npm install wangedit ...

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

效果图

过程

使用组件

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

最新文章

热门文章