随笔-tinymce学习笔记--自定义插件--基于Vue

本文档介绍了如何在Vue项目中基于tinymce开发自定义插件。首先,由于tinymce已指向static目录,我们无需修改node_modules。接着,详细讲述了插件开发步骤:声明新插件、获取设置参数、实现插件功能(如iframe插件)、设置图标及添加到编辑器。最后,通过在设置中调用插件,即可实现点击打开带iframe的弹窗。
摘要由CSDN通过智能技术生成

1、之前说过在根目录的的index.html中引入了static下的tinymce后,项目中的tinymce就指向了static,所以我们可以不用修改node_module中的代码,直接在static下的tinymce中的plugins中开发新的插件

2、插件开发

首先:

根据中文文档:对你的新插件进行一个声明:

tinymce.PluginManager.add('插件名', function(editor, url) {
    //内部配置
}

 

函数中传进来的editor就是页面上的编辑器,你可以通过调用它的方法动态添加相关的按钮或者插入html

然后:

我在这里开发的的是一个iframe插件,所以需要获取url路径,如果是开发其他的插件可以通过中文文档查看

var baseURL=tinymce.baseURL;

var iframe1 = baseURL+'/plugins/插件文件夹/iframe对应的页面.html';

editor.getParam('函数名', 默认值, '类型') -- 可以拿到你在setting设置中的元素

let test= editor.getParam('testName', {}, 'String');</
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值