TinyMCE插件开发之《设置Code标签》


场景

TinyMCE 使用过程中,如果要设置 Code 关键字,需要 点击段落 → 文本 → 代码,使用过程中有些麻烦,希望能写一个插件,直接在工具栏中显示,然后点击一下就能给选中文本设置为代码( Code )标签

实现

tinymce 目录中的 plugins 文件夹中添加一个插件,取名为 gzelcode,并添加 plugin.min.js 文件,代码为

tinymce.PluginManager.add('gzelcode', function (editor, url) {
    var doAction = function () {
        var content = editor.selection.getContent({
            format: 'text'
        });    //获取选中文本
        editor.execCommand('Delete');
        editor.execCommand('mceInsertContent', false, `<code>${content}</code>`);
    }
    // 注册一个工具栏按钮名称
    editor.ui.registry.addButton('gzelcode', {
        text: 'GZ关键字',
        onAction: function () {
            doAction();
        }
    });

    // 注册一个菜单项名称 menu/menubar
    editor.ui.registry.addMenuItem('gzelcode', {
        text: 'GZ关键字',
        onAction: function () {
            doAction();
        }
    });

    return {
        getMetadata: function () {
            return {
                //插件名和链接会显示在“帮助”→“插件”→“已安装的插件”中
                name: "gzelcode",//插件名称
                url: "http://www.yesdotnet.com", //作者网址
            };
        }
    };
});
GarsonZhang www.yesdotnet.com

测试

tinymce 初始化的方法中配置插件 gzelcode

代码省略了其他配置,实际应用中配置要更多一些

tinymce.init({
    plugins: "gzelcode",
    toolbar: "gzelcode"
})
GarsonZhang www.yesdotnet.com

配置后,在工具栏中就能看到名字为 GZ关键字 的插件

在编辑器中输入一行文字

选中 yesdotnet 然后点击 GZ关键字插件

会得到如图所示的结果

HTML源码如下

<p>欢迎使用<code>yesdotnet</code>快速开发框架</p>
GarsonZhang www.yesdotnet.com

样式是在 css文件 中设置的,该插件的工作就是快速把选中的文字用 code标签 包裹起来

 

 

 

 

版权声明:本文为YES开发框架网发布内容,转载请附上原文出处连接
YES开发框架
上一篇:博客文章博文排版指南
下一篇:微信,支付宝 支付对接文档
评论列表

发表评论

评论内容
昵称:
关联文章

TinyMCE开发设置Code标签
TinyMCE富文本编辑器 autoLink 配置,全角支持
页面快排开发
YES-CMS 内容管理系统 TinyMCE编辑演示
TinyMCE
C# MEF开发
代码编辑使用
YES-CMS内容管理系统扩展
页面快排配置支持图片上传
winform组OpenFileDialog控Filter属性设置
EF Code First
Devexpress GridControl明细标签控制,隐藏detail标签
数据库 red-gate SQLToolbelt 下载地址
【C#】C#中使用GDAL3(三):Windows下编译驱动
OneNote安装代码高亮-NoteHightlight(2010-2013-2016)
【gitblit复制URL】 修改URL复制方式Flash被浏览器禁用解决办法
TinyMCE 支持的图标列表
VScode配置Python开发环境
C#代码编码规范手册 软件开发规范 开发指南
TinyMCE自定义字体大小列表

联系我们
联系电话:15090125178(微信同号)
电子邮箱:garson_zhang@163.com
站长微信二维码
微信二维码