最近遇到了一个项目有个富文本编辑器的操作，内容就是在工具栏中加个自定义的按钮，需求挺简单的但是由于文档很少，也不是很常用费了很多功夫。
大体就是点击插入推荐的商品链接出现右侧的抽屉弹窗，然后点击添加的时候，把图片和ID之类的东西加入到富文本编辑器中去。大体这样的效果，话不多说上代码。
1.如何安装我就不说了自己去npm把
2.
引入这些文件import tinymce from ‘tinymce/tinymce’
import Editor from ‘@tinymce/tinymce-vue’
import ‘tinymce/themes/silver/theme’
import ‘tinymce/plugins/image’
import ‘tinymce/plugins/link’
import ‘tinymce/plugins/media’
import ‘tinymce/plugins/table’
import ‘tinymce/plugins/lists’
import ‘tinymce/plugins/contextmenu’
import ‘tinymce/plugins/wordcount’
import ‘tinymce/plugins/colorpicker’
import ‘tinymce/plugins/textcolor’
import ‘tinymce/plugins/fullscreen’
这个地方要注意路径
3.创建富文本编辑区
<editor
v-model=“myValue”
:init=“init”
:disabled=“disabled”
@onClick=“onClick”>
注意这个工具栏中配置的mybutton
4.初始化
setup: (editor) => {
editor.ui.registry.addButton(‘mybutton’, {
text: ‘插入推荐的商品链接’,
onAction: () => {
this.drawerFlagGoFather()
}
})
}
自定义工具最主要的是这里，开始的时候只是editor.addButton 这时候会报错，我看了好多的帖子都是这样写的，估计就是一个人写的各种转载而已，然后我这地方就是各种报错，后来找到了报错信息和tinymce的api才看到了 editor.ui.registry.addButton这句。然后终于把按钮装了上去，其实代码挺简单的但是如果没仔细看api或者以前没用过的话这个地方真的挺不好找的。
editor.on('focus', () => {
// 先删除插件
editor.editorManager.execCommand('mceRemoveEditor', true, edit..
tinymce
简介
tinymce
是一个很强大的
富文本编辑器
，可
自定义
图标
自定义
工具等等，这篇文章主要讲如何
自定义
图标。刚开始我在中文网站上看到有
自定义
图标的demo但是没有讲如何做的完整步骤，有点不明白，后来发现是自己领悟太低了，接下来我就把我
自定义
图标的完整过程写出来。
tinymce
官网
英文还可以建议看英文官网更全面
中文官网：http://
tinymce
.ax-z.cn/
英文官网：https://www.tiny.cloud/docs/
根据中文官网快速更换默认图标
第一步：去中文
本次
自定义
图标是基于"version": "6.3.1"我们在使用
Tinymce
时，会遇到更换icon图标的需求，或者加入新的图标。本文主要介绍如何更换图标，已经如何新增图标。
在开发当中我们不可避免的会使用到
富文本编辑器
富文本编辑器
插件又是很多
小编经过尝试感觉
Tinymce
还是不错的
在使用中遇到啦关于图片插入的问题 这里就记录一下 希望能帮到有需要的小伙伴
在
Tinymce
的配置项中
插入images_upload_handler 这个配置项是针对用户对图片
自定义
处理的 我们可以自己写一个函数
images_upload_handler: (blobInfo, succFun, failFun) => {
//前台读取文件
什么是
工具栏
如图一个编辑器的工具部分。分为两个部分，上面的文件、编辑...为菜单栏部分。下面的红色框起来的为
工具栏
部分。本文概述
工具栏
的配置。关于菜单栏的配置可以开这篇文章：
TinyMCE
菜单配置详解启用和停用
工具栏
通过init配置项toolbar和toolbar(n)来配置
工具栏
是否启用的项目和显示的顺序。同时，使用|来分割各个项。
tinymce
.init({ selecto...
