Vue使用Tinymce富文本自定义toolbar按钮的实践
目录
- 安装tinymce、tinymce ts、tinymce-vue声明文件
- 封装组件
- 组件使用
- Vue使用Tinymce富文本编辑器自定义toolbar按钮
安装tinymce、tinymce ts、tinymce-vue声明文件
npm install tinymce -Snpm install @types/tinymce -Snpm install @tinymce/tinymce-vue -S
封装组件
.tox-tinymce-aux {z-index: 3000 !important; }
组件使用
Vue使用Tinymce富文本编辑器自定义toolbar按钮
文章图片
这里我增加了收缩的按钮
init: {language: "zh_CN",skin_url: "/tinymce/skins/ui/oxide",height: "100%",fontsize_formats: "8pt 10pt 12pt 14pt 16pt 18pt 24pt 36pt",font_formats:"微软雅黑=Microsoft YaHei; 方正仿宋_GBK=方正仿宋_GBK; 宋体=simsun,serif; 仿宋体=FangSong,serif; 黑体=SimHei; Times New Roman=Times New Roman; ",plugins: {type: [String, Array],default: "code lists image media table wordcount indent2em",toolbar:{type: [String, Array],default:"code | lineheight | undo redo | fontsizeselect | fontselect |formatselect | bold italic forecolor backcolor | alignleft aligncenter alignright alignjustify | myCustomToolbarButton | bullist numlist outdent indent indent2em| lists image media table | removeformat"},branding: false,menubar: false,setup: editor => {let _this = this; editor.ui.registry.addButton("myCustomToolbarButton", {text: "收缩",onAction: function() {_this.show= !_this.show; }}); }},
关键代码
这里使用 箭头函数 => 即可操作vue中属性和事件
setup: editor => {let _this = this; editor.ui.registry.addButton("myCustomToolbarButton", {text: "收缩",onAction: function() {_this.show= !_this.show; }}); }
【Vue使用Tinymce富文本自定义toolbar按钮的实践】到此这篇关于Vue使用Tinymce富文本自定义toolbar按钮的实践的文章就介绍到这了,更多相关Vue Tinymce自定义toolbar 内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!
推荐阅读
- 使用Supervisor守护ASP.NET|使用Supervisor守护ASP.NET Core应用程序进程
- vue全局接入百度地图的实现示例
- C语言常用宏定义(#define)使用方法
- C语言|vscode配置C语言环境
- 头歌Java|十一、方法的使用
- goalng 中结构体方法的区别使用
- Golang中空接口的使用
- Goalng中 空结构体的使用
- Vue.js响应式数据的简单实现方法(一看就会)
- Python|Python IO文件管理的具体使用