tinymce php拓展,wordpress博客扩展tinymce富文本编辑器emoji插件

emoji效果演示

本文的核心是: tinymce富文本编辑器添加自定义按钮插入自定义内容,如emoji😂

使用iframe的好处是,不占据插件体积,可按模块加载网页,可线上动态更新(无需更新插件),可以使用vue等框架(不必写php和jquery代码)等

实现一键添加各种html效果,如各种其他编辑器,如新邦编辑器等微信特定效果,让图文视觉更丰富,操作更简单快速

plugins文件夹

在wordpress的plugins文件夹下新建用于编写插件的文件夹

D:\xampp\htdocs\wp\wp-content\plugins

本文是在本地搭建wordPress调试插件,使用的为xampp环境

参考文章:

index.php主文件

在插件的文件夹下,新建index.php文件,主要插件配置主文件

1.写入插件描述信息

以下内容为插件的描述信息,注释内容不可少,可修改

/**

* Plugin Name: demo

* Plugin URI: https://dsx2016.com

* Version: 1.0

* Author: 大师兄

* Author URI: https://www.dsx2016.com

* Description: emoji plugin

* License: GPL2

*/

?>

2.启用插件

此时在wordpress插件目录可以看到新建的插件~demo,点击启用

3.实例化tinymce插件

index.php内容更新为以下内容,详见注释

统一时间同级目录新建一个js文件:tinymce-custom-link-class.js,因为插件有用到

/**

* Plugin Name: demo

* Plugin URI: https://dsx2016.com

* Version: 1.0

* Author: 大师兄

* Author URI: https://www.dsx2016.com

* Description: emoji plugin

* License: GPL2

*/

​

// 构建类

class TinyMCE_Custom_Link_Class {

​

// 初始化时实例化编辑器

function __construct() {

// 如果在管理控制台

if ( is_admin() ) {

// 初始化插件

add_action( "init", array( $this, "setup_tinymce_plugin" ) );

}

}

​

// 添加按钮

function add_tinymce_toolbar_button( $buttons ) {

array_push( $buttons, "|", "custom_link_class" );

return $buttons;

}

​

// 导入编辑按钮的插件内容

function add_tinymce_plugin( $plugin_array ) {

$plugin_array["custom_link_class"] = plugin_dir_url( __FILE__ ) . "tinymce-custom-link-class.js";

return $plugin_array;

}

// 实例化方法

function setup_tinymce_plugin() {

// 如果不是编辑页面则return

if ( ! current_user_can( "edit_posts" ) && ! current_user_can( "edit_pages" ) ) {

return;

}

// 如果不是富文本编辑状态则return

if ( get_user_option( "rich_editing" ) !== "true" ) {

return;

}

// 注册富文本编辑器内容

add_filter( "mce_external_plugins", array( &$this, "add_tinymce_plugin" ) );

// 把注册的内容以按钮形式添加到编辑栏

add_filter( "mce_buttons", array( &$this, "add_tinymce_toolbar_button" ) );

}

}

​

// 实例化一个插件

$tinymce_custom_link_class = new TinyMCE_Custom_Link_Class;

​

​

?>

4.插件引用的js文件

tinymce-custom-link-class.js

此时仍然看不到插件效果,需要继续扩展内容

注意括号中的$,是jquery变量,js文件中可直接使用jquery

(function ($) {

​

})(jQuery);

5.创建按钮

先弄个icon文件放入文件夹,名称随意,待会会用到

写入编辑器插件实例化方法和添加按钮方法

(function ($) {

// 调用插件方法

tinymce.PluginManager.add("custom_link_class", function (editor, url) {

// 添加按钮

editor.addButton("custom_link_class", {

title: "emoji",

cmd: "custom_link_class",

image: url + "/emoji.png",

tooltip: "emoji"

});

});

})(jQuery);

此时查看编辑器区域,多了一个图标,就是刚刚添加的图像

6.根据图标名称定为按钮区域

打开chrome开发者工具,如图找到新加的编辑器图标DOM

其className为mce-ico

其backgroundImage的url地址含有emoji.png字符串(也就是图标的文件名)

7.设置ifarme

见代码child.html

此处需要开启本地http服务,方便加载网页

emoji

body {

margin: 0;

}

// 定义iframe向父网页发送消息

function sendEmoji() {

// 获取emoji的dom

let emoji = document.getElementById(`emoji`);

//给父页面发送消息，data为对象

parent.postMessage({ msg: emoji.innerHTML }, "*");

}

😂

​

8.设置iframe的css

预期是把图标浮窗放在按钮右上角

所以需要指定大小,边框,圆角,以按钮为相对定位

该css动态作用于emoji插件

同样放在插件目录,和iframe的html文件没关系,从父级窗口覆盖样式

​

/* emoji浮窗样式 */

.iframeEmoji{

width: 200px;

height: 200px;

box-sizing: border-box;

position: absolute;

top: -194px;

right: -212px;

z-index: 99999 !important;

padding:5px;

border-radius: 10px;

background-color: #fff;

}

/* 降低编辑器层级,避免挡住emoji浮窗 */

.wp-editor-expand #wp-content-editor-tools{

z-index:0;

}

9.插件引入iframe,写入emoji

引入iframe,动态加载css,收到子元素消息后,写入emoji到编辑器

详见注释

(function ($) {

// 调用插件方法

tinymce.PluginManager.add("custom_link_class", function (editor, url) {

// 添加按钮

editor.addButton("custom_link_class", {

title: "emoji",

cmd: "custom_link_class",

image: url + "/emoji.png",

tooltip: "emoji"

});

​

​

// 监听点击按钮事件

editor.addCommand("custom_link_class", function () {

​

// 定一个变量存emoji按钮dom

let emojiBtnDom = null

// 遍历类目

$(".mce-ico").each(function () {

// 匹配对应图标的dom,存下来

if ($(this).css("background-image").includes((`emoji.png`))) {

emojiBtnDom = $(this)

}

})

​

// 插入iframe

emojiBtnDom.append(`

src='http://192.168.125.117:8080/child.html'

class='iframeEmoji'

scrolling='no'>

`)

​

// 引入css样式,插入head

$("head").append(`

type='text/css'

rel='stylesheet'

href='${url}/emoji.css'

/>`)

​

//回调函数(wordpress接受通信)

function receiveMessageFromIframePage(event) {

// 把收到的消息(emoji)写入到编辑器

editor.execCommand("mceReplaceContent", false, `${event.data.msg}`);

}

​

//监听iframe子窗口message事件

window.addEventListener("message", receiveMessageFromIframePage, false);

​

});

​

​

​

​

});

})(jQuery);

Tips

类型

简码适用于动态js特效的交互组件(复杂型)

编辑器适用于静态的html+css内容(简单型)

由于从别的地方无法复制或者复制后放入编辑器会丢失样式

所以需要tinymce插件在可视化编辑区一键插入html

可以使用插件的形式完全打造一个wordpress编辑器(可视化模块)

好处

丰富图文视觉效果

自定义模板和动效

建议博客护城河(带有html的内容手动复制难度加大,爬虫爬取的部分内容如果没有对应的插件渲染,也会丢失部分样式)

END.