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

emoji效果演示

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

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

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

plugins文件夹

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

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

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

参考文章:

<<本地搭建wordpress开发环境~调试插件必备>>

emoji

index.php主文件

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

emoji

1.写入插件描述信息

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

<?php
/**
 * 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,点击启用

emoji

3.实例化tinymce插件

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

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

<?php
/**
 * 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文件放入文件夹,名称随意,待会会用到

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"
        });
    });
})(jQuery);

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

emoji

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

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

  1. 其className为mce-ico

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

emoji

7.设置ifarme

见代码child.html

emoji

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

参考文章:
<<使用http-server开启本地静态资源服务>>
<<iframe交互 使用postnessage实现跨域通信>>

<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>emoji</title>
        <style>
            body {
                margin: 0;
            }
        </style>
        <script>
            // 定义iframe向父网页发送消息
            function sendEmoji() {
                // 获取emoji的dom
                let emoji = document.getElementById(`emoji`);
                //给父页面发送消息,data为对象
                parent.postMessage({ msg: emoji.innerHTML }, "*");
            }
        </script>
    </head>
    <body>
        <div style="width: 200px; height: 200px">
            <div onclick="sendEmoji()" id="emoji" style="cursor: pointer">
                😂
            </div>
        </div>
    </body>
</html>

8.设置iframe的css

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

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

该css动态作用于emoji插件

emoji

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

emoji


/* 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(`
            <iframe 
                src='http://192.168.125.117:8080/child.html' 
                class='iframeEmoji' 
                scrolling='no'>
            </iframe>`)

            // 引入css样式,插入head
            $("head").append(`
            <link 
                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的内容手动复制难度加大,爬虫爬取的部分内容如果没有对应的插件渲染,也会丢失部分样式)

emoji

END.