学习笔记8——在文章编辑器添加自定义标签按钮

最新推荐文章于 2024-01-06 16:58:02 发布
最新推荐文章于 2024-01-06 16:58:02 发布
阅读量263 收藏
点赞数
文章标签： php javascript ViewUI
原文链接：http://www.cnblogs.com/ryanzheng/p/8027512.html
版权

复制以下代码到functions.php文件：

// catmee.com 添加HTML编辑器自定义标签按钮
add_action('admin_print_footer_scripts','eg_quicktags');
function eg_quicktags() {
?>
<script type="text/javascript" charset="utf-8">
QTags.addButton( 'eg_pre', 'pre', '<pre>代码代码代码\n</pre>', '', 'q' );
</script>
<?php
}
// 添加HTML编辑器自定义标签按钮结束

　　QTags.addButton(按钮的ID，要显示的按钮名称，显示在选中内容前，显示在选中内容后，按钮的快捷调用名称)

同时你也能用类似的方法加上其他标签。

例如代码高亮：

QTags.addButton('eg_pre','pre','<pre class="prettyprint linenums">','</pre>','q');

注意：这种方法是在你用的是默认编辑插件情况下才会生效。 

 

接下来是在文章编辑器的可视化界面添加标签按钮：

复制以下代码到functions.php文件：

function add_editor_buttons($buttons) {
$buttons[] = 'fontselect';
$buttons[] = 'fontsizeselect';
$buttons[] = 'cleanup';
$buttons[] = 'styleselect';
$buttons[] = 'hr';
$buttons[] = 'del';
$buttons[] = 'sub';
$buttons[] = 'sup';
$buttons[] = 'copy';
$buttons[] = 'paste';
$buttons[] = 'cut';
$buttons[] = 'undo';
$buttons[] = 'image';
$buttons[] = 'anchor';
$buttons[] = 'backcolor';
$buttons[] = 'wp_page';
$buttons[] = 'charmap';
return $buttons;
}
add_filter("mce_buttons", "add_editor_buttons");

　　效果图：

 

 

 

示例：

//向文章编辑器的Visual区添加自定义按钮，js文件存放在wp-content/themes/Twenty Fifteen/js/文件夹下
add_action('admin_head', 'my_custom_mce_button');
function my_custom_mce_button() {
    if ( !current_user_can( 'edit_posts' ) && !current_user_can( 'edit_pages' ) ) {
        return;
    }
    if ( 'true' == get_user_option( 'rich_editing' ) ) {
        add_filter( 'mce_external_plugins', 'my_custom_tinymce_plugin' );
        add_filter( 'mce_buttons', 'my_register_mce_button' );
    }
}
function my_custom_tinymce_plugin( $plugin_array ) {
    $plugin_array['my_mce_button'] = get_template_directory_uri() . '/js/mce-button.js';    //js文件存放路径
    return $plugin_array;
}
function my_register_mce_button( $buttons ) {
    array_push( $buttons, 'my_mce_button' );
    return $buttons;
}

 

mce-button.js文件内容如下：

(function() {
tinymce.PluginManager.add('my_mce_button', function( editor, url ) {
editor.addButton( 'my_mce_button', {
icon: 'wp_code',
type: 'menubutton',
menu: [
        {
            text: 'H',
            onclick: function() {
                editor.windowManager.open( {
                    title: 'H',
                    minWidth : 700,
                    body: [
                         {
                            type: 'listbox',
                            name: 'titlewrap',
                            label: 'Choose a H type',
                            values: [
                                {text: 'h2', value: 'h2'},
                                {text: 'h3', value: 'h3'},
                                {text: 'h4', value: 'h4'},
                                {text: 'h5', value: 'h5'},
                                {text: 'h6', value: 'h6'}
                            ]
                        },
                        {
                            type: 'textbox',
                            name: 'titlecontent',
                            label: 'Enter the content',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),    //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            type: 'textbox',
                            name: 'title_description',
                            label: 'Enter the description',
                           
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var title_description = e.data.title_description.replace(/\r\n/gmi, '\n');
                        var titlecontent = e.data.titlecontent.replace(/\r\n/gmi, '\n');
                        titlecontent =  tinymce.html.Entities.encodeAllRaw(titlecontent);
                        title_description =  tinymce.html.Entities.encodeAllRaw(title_description);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<' + e.data.titlewrap + ' data-animal-type='+ title_description +' >' + e.data.titlecontent + '</'+e.data.titlewrap+'>' );
                    }
                });
            }
        },
        {
            text: 'Note type',
            onclick: function() {
                editor.windowManager.open( {
                    title: 'Note type',
                    minWidth : 700,
                    body: [
                         {
                            type: 'listbox',
                            name: 'titlewrap',
                            label: 'Choose a type',
                            values: [
                                {text: 'Infomation', value: 'note info'},
                                {text: 'Question', value: 'note question'},
                                {text: 'Notification', value: 'note notification'},
                                {text: 'Warning', value: 'note warning'},
                                {text: 'Error', value: 'note error'},
                                {text: 'Success', value: 'note success'}
                            ]
                        },
                        {
                            type: 'textbox',
                            name: 'titlecontent',
                            label: 'Enter the content',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),    //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var titlecontent = e.data.titlecontent.replace(/\r\n/gmi, '\n'),
                        titlecontent =  tinymce.html.Entities.encodeAllRaw(titlecontent);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<div class="'+ e.data.titlewrap +'"><span>' + e.data.titlecontent + '</span></div>' + sp + '<p></p>' );
                    }
                });
            }
        },

    {
            text: 'Download URL',
                onclick: function() {
                editor.windowManager.open( {
                    title: 'Download URL',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: 'Link address',
                            value: 'https://www.drivereasy.com/DriverEasy_Setup.exe'
                        },
                        {
                            type: 'textbox',
                            name: 'custom_js_code',
                            label: 'Google tracking code',
                            value: '',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: 'Link text',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),   //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.code.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<a href="' + e.data.links  rel="nofollow">' + code + '</a>');
                    }
                });
            }
        },
        {
            text: 'Buy URL',
                onclick: function() {
                editor.windowManager.open( {
                    title: 'Buy URL',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: 'Link address',
                            value: 'https://www.drivereasy.com/buy.php?comeid=kbde'
                        },
                        {
                            type: 'textbox',
                            name: 'custom_js_code',
                            label: 'Google tracking code',
                            value: '',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: 'Link text',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),   //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.code.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<a href="' + e.data.links  rel="nofollow">' + code + '</a>');
                    }
                });
            }
        },
        {
            text: 'External URL',
                onclick: function() {
                editor.windowManager.open( {
                    title: 'External URL',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: 'Link address',
                            value: 'https://'
                        },
                        {
                            type: 'textbox',
                            name: 'custom_js_code',
                            label: 'Google tracking code',
                            value: '',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: 'Link text',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),   //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.code.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<a href="' + e.data.links  rel="nofollow noopener" target="_blank">' + code + '</a>');
                    }
                });
            }
        },
        {
            text: 'Internal URL',
                onclick: function() {
                editor.windowManager.open( {
                    title: 'Internal URL',
                    minWidth : 700,
                    body: [
                         {
                            type: 'textbox',
                            name: 'links',
                            label: 'Link address',
                            value: 'https://www.drivereasy.com/'
                        },
                        {
                            type: 'textbox',
                            name: 'custom_js_code',
                            label: 'Google tracking code',
                            value: '',
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        },
                        {
                            type: 'textbox',
                            name: 'code',
                            label: 'Link text',
                            value: tinyMCE.activeEditor.selection.getContent({format : 'text'}),   //??????
                            multiline: true,
                            minWidth: 300,
                            minHeight: 100
                        }
                    ],
                    onsubmit: function( e ) {
                        var code = e.data.code.replace(/\r\n/gmi, '\n'),
                        code =  tinymce.html.Entities.encodeAllRaw(code);
                        var sp = (e.data.addspaces ? '&nbsp;' : '');
                        editor.insertContent(sp + '<a href="' + e.data.links  rel="noopener" target="_blank">' + code + '</a>');
                    }
                });
            }
        }

    ]
});
});
})();

 

转载于:https://www.cnblogs.com/ryanzheng/p/8027512.html

weixin_33890499
关注
Extjs学习笔记——gridpanel绑定编辑器插件(rowEditing)
qq_40680339的博客
11-29 670
在Extjs学习过程中，遇到很多小问题，最终都在百度和官网文档的帮助下解决，但是有的问题，看api还是没有什么显著作用，更尤其是遇到一些奇怪的需求时... 在这里记录下我学习Extjs时遇到的一个小问题： gridpanel中的编辑插件（Ext.grid.plugin.RowEditing），这个插件有一个默认属性： clickToEdit: 2 但是有时候我们并不需要双击来编辑，那我...
Android从入门到精通——学习笔记：Chapter02-用户界面设计基础
最新发布
qq_52252613的博客
04-25 986
用户界面设计（UI Design）基础
WordPress——在编辑面板中添加自定义标签
Mencre的博客
06-27 1907
在wordpress使用或者主题的开发中，wordpress的默认编辑器中给我们预先设置了一下快捷输入的标签，比如“b”、“i”等，但是我们可能会经常向文章中添加指定的自定义的html标签比如&lt;button class="btn1"&gt;确认&lt;/button&gt;等等，我们就可以自定义快捷输入的标签按钮来大大减少我们的代码输入。WordPress支持自定义添加，只需要在functi...
在WordPress的Html文本编辑器中加入自定义标签按钮
Linux I Tell U
08-11 563
我们需要在Wordpress的Html文本编辑器中加入自定义标签按钮，以便于快捷的编辑写文章。 比如 h1 h2 h3等常用标签 编辑主题的 functions.php 文件 路径为：/home/wp-content/themes/主题文件夹/functions.php，然后将以下代码添加到最后 //文本编辑器添加自定义代码标签 add_action(‘after_wp_tiny_mce’, ‘add_button_mce’); function add_button_mce($mce_settings)
编辑按钮 php,WordPress富文本编辑器添加按钮
weixin_42523543的博客
03-09 185
(function () {tinymce.PluginManager.add('iframe_video_button', function (editor, url) {editor.addButton('iframe_video_button', {text: '添加视频',icon: false,onclick: function () {//editor.insertContent('W...
php语句创建按钮,为WordPress编辑器添加或删除自定义按钮(QTags)
weixin_36058835的博客
04-06 357
WordPress是一款由PHP语言开发的博客系统，因其易用性、易扩展性、 功能强大、美观和对搜索引擎友好等而闻名于世，其市场占有率超过30%。尽管WordPress系统具有以上的优点，但是其编辑器一直以来都饱受诟病。特别是可视化编辑器，其排版不符合中文习惯，使用起来浪费时间。Wordpress 5.0以后使用了区块编辑器，大量博主试用后吐槽新的编辑器还不如经典编辑器好用，纷纷寻找切换回经典编辑器...
php下载按钮代码怎么写,WordPress 自定义下载按钮 纯代码实现
weixin_35990358的博客
03-25 557
FavoriteWordPress 有这种下载插件 但是过多插件会影响网站 自定义下载按钮会显示一长串的 html 代码，看着眼镜不舒服1. 把下面代码复制到 functions.php//添加下载按钮functionappthemes_add_quicktags() {?>QTags.addButton( 'downs', '下载按钮', '本地下载' );添加完这段代码后，在传统编辑器...
jqGrid 学习笔记整理——进阶篇(一 )
11-23
本篇文章将深入探讨 jqGrid 的进阶使用，特别关注如何在浏览导航栏添加自定义按钮。 首先，jqGrid 的基本结构包括一个表格元素（`<table>`）和一个用于分页的容器（`<div>`）。在提供的代码中，我们可以看到这样的...
html anki编辑器,打造你的专属单词本——Anki 初探（无痛入门）
weixin_39966053的博客
06-16 4519
简介若你有接触大量的专业词汇，又苦于没有一个特别称心的单词软件和单词本，这篇教程可以带你打造一把为你量身定制的单词软件。这次主要推荐的软件是一款开源的卡片笔记软件——Anki 除了可以用来背单词外，其实还可以用来被各种内容，因为Anki 支援的媒体文件十分丰富，除了纯文本外，还支持音频、图片和视频等，此外其跨平台的特性适合你在PC端或Web端查找资料、整理并建立笔记本，而移动端则适合你随时随地查看...
ECharts数据可视化学习笔记（温故而知新）
qq_64510496的博客
07-14 215
ECharts是一个使用JavaScript 实现的开源可视化库，兼容性强，底层依赖矢量图形库 ZRender，提供直观，交互丰富，可高度个性化定制的数据可视化图表。
在CKEditor中创建自己的命令按钮
寒冰屋的专栏
08-26 1341
目录 介绍 背景 示例项目 做好准备 添加按钮 添加命令 获取突出显示的文本 替换突出显示的文 查看结果 兴趣点 下载演示 - 8.2 MB 介绍 CKEditor是大多数开发人员非常流行的文本编辑器。它提供了许多方法来配置和自定义，以便为您的应用程序中提供最适合的编辑器。我们经常做的是选择最佳版本的CKEditor，然后通过修改config.js文件或使用Online T...
TinyMCE 富文本编辑器 ━━ 自定义插件之弹窗控件布局
暂时先用这个名字
09-25 3397
一键排版插件已经开发完毕，起初所有的控件全都显示在一列，没有分类，看着实在别扭，功能多了就像iphone一样越来越长~~~~现在总算是结束了，整理总结一下。 弹窗最普通的布局 editor.windowManager.open({ title: "Typeset", body:[{ type: 'checkbox', name: 'clean_a', l...
tinymce-vue的自定义组件，实现多图上传
QAEARQ的博客
02-03 1880
1.首先安装依赖 npm install tinymce-vue npm install tinymce 2.组件中引入tinymce-vue import Editor from 'tinymce-vue' 3.初始化tinymce { selector: '#tinymce', media_live_embeds: false, lang
wordpress给编辑器添加自定义代码按钮
程序员
07-22 1112
可以利用编辑器自定义按钮数据固定格式内容，遗憾的是目前只能在文本模式也就是html模式下数据这些内容，这也极大的方便了文章的编辑和发布，对于那些经常需要插入短代码的，在HTML编辑器的工具栏里加上各种各样的快捷标签也是很有用的。添加以下css到主题下的.css文件下;本站使用的是DUX主题所以css放在main.css文件内，其他模板请放在全局调用的css文件里。很多同学会遇到，自己的按钮想添加一个到你的编辑框中，这样就很方便，于是看到过一篇文章，转载过来，希望对大家有用。，喜欢可以自行添加，方法同上。..
富文本常用语句
weixin_50236973的博客
12-02 727
【代码】富文本常用语句。
Tinymce 编辑器添加自定义图片管理插件
weixin_30533797的博客
09-30 1254
在使用Tinymce的过程中需要用到图片上传功能，而提供的上传插件在上传文件后是给了一个连接地址，就想用户需要什么图片，不能用最直观的方式表现出来么！ 虽然官网上也有一个文件管理的插件moxiemanager，可奈何他是收费的！https://www.tiny.cloud/docs/plugins/moxiemanager/ 然后就打算自己弄一个，其实实现效果起来很简单，就只是做了一个类型相册...
Vue2 实现内容拖拽或添加 HTML 到 Tinymce 富文本编辑器的高级功能详解
少年感
01-06 2797
本文深度解析如何在 Vue2 中集成 Tinymce 6x 版本，实现高级富文本编辑功能。涵盖点击外部按钮插入内容、通过拖动按钮添加内容，以及拖动整块内容入富文本。使用的关键版本有 "@tinymce/tinymce-vue": "^3"、"core-js": "^3.8.3"、"tinymce": "^6.8.2"、"vue": "^2.6.14"。总结中强调 Tinymce 丰富插件和工具，鼓励读者通过深入了解这些功能，提升项目的文本编辑体验。
tinymce编辑器踩坑之旅-----------自定义编辑器的按钮功能
weixin_44191425的博客
11-04 3542
多年开发经验至今发现一个问题，产品所能想到的需求只有开发想不到的，没有产品不敢想的。 之前没怎么使过tinymce这个编辑器，但是由于业务需要不得不用这款编辑器，从一开始看文档到各种实验然后改源码之后，我看见这个编辑器就想吐现在。 言归正传，昨天产品提了一个功能，那便是想要在编辑器上面添加一个下拉框，选择下拉框里的数据之后给文档配置不同的参数。 上个图先 就上想加一个上述的下拉框，里面的数据是接口返回的，然后实现是下面的样子，在对应的地方配置参数后，根据业务需要，不同的人就能看见自己的名字和手机号，当然
开源Markdown编辑器Notable：自定义与多笔记编辑
Notable是一款针对Windows 10系统的开源Markdown编辑器，它集合了多种高效编辑功能，特别适合需要撰写技术文档、笔记、博客文章等用户群体使用。Markdown作为一种轻量级标记语言，能够通过简单的标记语法来格式化...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值