VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂(vue 富文本编辑框)

VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂

推荐整理分享VUE 富文本编辑器 tinymce - - - - 对懒人 非常友好 一看就懂(vue 富文本编辑框)，希望有所帮助，仅作参考，欢迎阅读内容。

文章相关热门搜索词:Vue 富文本编辑器,Vue 富文本编辑器,vue富文本编辑器内容回显,vue富文本编辑器上传图片,vue富文本编辑器上传图片,Vue 富文本编辑器,vue富文本编辑器内容回显,vue富文本编辑器内容回显,内容如对您有帮助，希望把文章链接给更多的朋友！

首先个人觉得 tinymce这个富文本编辑器是最好用 最编辑的 ，对懒人非常友好 的一款编辑器，刚 有哟个项目 ，就遇到了 使用富文本编辑的坑 ，因为赶项目进度自己在网上随便找了一个富文本编器，就是 quill 这个 坑 实在太多了 ，tinymce 在写这篇文章前5分钟 刚刚使用完成，非常丝滑

废话不多说咱们直接开始

确定vue 版本

我们公司使用的就是 vue2 还没有开始使用vue3 具体原因是因为 在tinymce4.0以后不支持vue2.0，所以需要固定版本，或降级版本，否则会报错

vue2 下载命令 两个

npm install tinymce@5.1.0 -Snpm install @tinymce/tinymce-vue@3.0.1 -S

vue 3 下载命令

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

欧克 下一步

安装完成后需要把node_modules下的tinymce下的skins文件夹复制粘贴到public文件夹下备用

下一步 引入中文 包 默认是英文的 极其丑陋 ，不符合我们高大上的代码气质

去官网下载 中文文件包 zh_CN.js

我当时在上面这整合包里找的的这个文件

下一步 把下载的 zh_CN.js 文件放到 public 目录下

欧克 下一步

页面使用

注册 引用

import tinymce from "tinymce";import Editor from "@tinymce/tinymce-vue";import 'tinymce/themes/silver/theme';

再在components 注册

components: { Editor },

在template 使用

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

data 数据

data() { return { value: '', contenyt:{}, init: { language_url: "/zh_CN.js", // 语言包位置，因为放在public下所以可以省略public selector: "#tinymce", //tinymce的id language: "zh_CN", //语言类型 skin_url: "/skins/ui/oxide", height: 500, //编辑器高度 browser_spellcheck: true, // 拼写检查 // elementpath: false, //禁用编辑器底部的状态栏 // statusbar: false, // 隐藏编辑器底部的状态栏 paste_data_images: true, // 允许粘贴图像 // menubar: false, //最顶部文字信息 plugins: "image link code table lists wordcount", branding: false, //是否禁用“Powered by TinyMCE” 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", //工具栏 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;", } };

欧克 下一步

在mounted中调用

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

欧克 现在页面上 就可以显示了， 很显然自带的的功能 根本配不上 我们的页面 ，

这些加入这些，即可满足大部分需求

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";

在data init 中加入

plugins: "image link code table lists wordcount", //就可以增加上面引入的插件，加入下面这一行就可以在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", //工具栏

插件有好多 自行 查看 官方文档即可

https://github.com/tinymce/tinymce-vue https://www.tiny.cloud/docs/integrations/vue/#tinymcevuejsintegrationquickstartguide

import "tinymce/icons/default/icons";import "tinymce/themes/silver";import "tinymce/plugins/media";import "tinymce/plugins/contextmenu";import "tinymce/plugins/colorpicker";import "tinymce/plugins/textcolor";import "tinymce/plugins/preview";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";// 扩展插件import "../assets/tinymce/plugins/lineheight/plugin";import "../assets/tinymce/plugins/bdmap/plugin";

欧克 结束 下面是我的

咬定青山不放松，立根原在破岩中，知磨万击还坚韧，任尔东西南北风。——郑板桥