之前写了一个WordPress首行缩进插件,收到反馈说一般写文章还是习惯使用tab键来增加缩进,所以改版了V1.0.1版本。增加了tab按键的监听,同时对于“text-index”的支持也从单纯的p标签支持增加了div,h1~h6支持,具体实现可以参看iw-2em

下面是插件的核心代码:

/**
 * Created by HW on 2017/2/27.
 */
(function ($) {
    $(document).ready(function () {
        /**
         * 增加text-index
         *
         * @param editor 编辑器
         * @param plus 1:累加、0:切换、-1:累减
         * @author hewei
         */
        function addTextIndent(editor, plus) {
            var node = editor.selection.getNode();
            var nodeName = node.nodeName;
            if (nodeName == 'P' || nodeName == 'DIV' ||
                nodeName == 'H1' || nodeName == 'H2' || 
                nodeName == 'H3' || nodeName == 'H4' || 
                nodeName == 'H5' || nodeName == 'H6'
            ){
                var indent = parseInt(editor.dom.getStyle(node, 'text-indent'));
                // 修正2的倍数
                indent = isNaN(indent) ? 0 : parseInt(indent/2) * 2;
                // 缩进处理
                if (plus == 1){
                    // 累加
                    indent += 2;
                } else if (plus == -1){
                    // 累减
                    indent -= 2;
                } else {
                    indent = indent - 2 < 0 ? 2 : indent - 2;
                }
                // 判断是否已经添加样式
                var style = indent <= 0 ? '' : indent + 'em';
                editor.dom.setStyle(node, 'text-indent', style);
            };
        }

        /**
         * tab处理
         *
         * @param e
         * @param editor 编辑器
         * @author hewei
         */
        function tabHandler(e, editor) {
            if (e.keyCode === 9 && !e.ctrlKey && !e.altKey && !e.metaKey) {
                addTextIndent(editor, e.shiftKey ? -1 : 1);
                // 阻止事件传递
                e.preventDefault();
            }
        }

        // 创建插件
        tinymce.create('tinymce.plugins.iw_2em', {
            init : function(editor, url) {
                // 增加按钮
                editor.addButton('iw_2em', {
                    title: '2em',
                    image: url + '/../images/iw-2em.png',
                    onclick : function() {
                        addTextIndent(editor, 0);
                    }
                });
                // 绑定tab事件
                if (tinymce.Env.gecko) {
                    editor.on('keypress keydown', function (e) {
                        tabHandler(e, editor);
                    });
                } else {
                    editor.on('keydown', function (e) {
                        tabHandler(e, editor);
                    });
                }
            }
        });
        tinymce.PluginManager.add('iw_2em', tinymce.plugins.iw_2em);
    });
})(jQuery);