WordPress 首行缩进插件V1.0.1版本更新
之前写了一个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);