启用/添加自定义键盘快捷键以使用WordPress的HTML编辑器

时间:2012-04-18 作者:its_me

我在帖子中使用了Markdown,我为此使用的插件要求禁用可视化编辑器。

HTML编辑器几乎只是一个文本框。为了便于书写,我想启用一些自定义键盘快捷键,以便在按下组合键(如Ctrl+B)时以降价方式格式化文本。我该怎么做?

基本上,我只想要一些在Wordpress中工作的键盘快捷键。StackExchange。com的帖子编辑器。他们是。。。

Ctrl+B键→ **粗体文本**

按住Ctrl键+I键→ _斜体文本_

按住Ctrl键+按Q键→ > 阻止引用

即使有多行引用文本,上述操作也应有效→

将内联文本换行为`

如果有多行,则每行缩进四个空格

PS: 我不懂JavaScript或PHP,所以请尽量清楚。谢谢

2 个回复
最合适的回答,由SO网友:Stephen Harris 整理而成

Stack Exchange网站(和我的插件)上使用的工具栏/编辑器WP-MarkDown) 是PageDown.

这包含三个JavaScript文件:

处理标记到HTML转换的一个处理清理的一个处理编辑器(工具栏和预览器)的一个是您提到的标记键盘快捷键。

下面的内容还没有经过测试,只是想大致说明一下您需要做什么

步骤1:注册(&M);将JavaScript和样式排队要使其在WordPress编辑器上工作,请首先注册并将上述脚本排队(指向插件中的正确位置)(我不确定在对脚本进行排队之前,如果脚本具有依赖关系,是否需要注册脚本)

因为这只针对我们使用的管理员admin_enqueue_scripts. 您还需要检查

我们在正确的管理页面上发布了帖子类型(如果只对某个帖子类型启用了降价)

    此外,管理员页脚上还连接了一个函数。这将在页脚中打印JavaScript。(您可以将其放入单独的文件中,注册并在此处排队,但需要在加载bog标准WordPress工具栏的脚本后加载)。因此,优先权编号为:100。

    add_action(\'admin_enqueue_scripts\', \'wpse49449_admin_scripts\',10,1);
    function wpse49449_admin_scripts($hook){
        $screen = get_current_screen();
        $post_type = $screen->post_type;
    
            //Enqueue only on page needed and only for the relevant post type
            if ( (\'post-new.php\' == $hook || \'post.php\' == $hook) && $post_type == \'post\' ){
                 $plugin_dir = plugin_dir_url(__FILE__);
                 wp_register_script(\'my_md_convert\', $plugin_dir. \'js/pagedown/Markdown.Converter.js\',array(),\'1.1\' );
                 wp_register_script(\'my_md_sanit\', $plugin_dir.\'js/pagedown/Markdown.Sanitizer.js\',array(),\'1.1\' );
                 wp_register_script(\'my_md_edit\',$plugin_dir. \'js/pagedown/Markdown.Editor.js\',array(\'my_md_convert\',\'my_md_sanit\'),\'1.1\' );
    
                 wp_enqueue_script(\'my_md_edit\');
                 wp_enqueue_script(\'jquery\');
    
                 wp_enqueue_style(\'my_md_style\',$plugin_dir.\'css/demo.css\');
    
                 add_action( \'admin_print_footer_scripts\', \'wpse49449_admin_footers_script\',100 );
        }
    }
    
    步骤2:在适当的情况下禁用TinyMCE编辑器需要禁用TinyMCE。但仅在使用降价编辑器的帖子类型中禁用它。要禁用TinyMCE编辑器,请执行以下操作:

    add_filter( \'user_can_richedit\', \'wpse49449_disable_tinymce_editor\'), 99 );
    function wpse49449_disable_tinymce_editor(){
        //Get post type
        $screen = get_current_screen();
        $post_type = $screen->post_type;
    
        //Disable depending on post type
    
        //Return \'false\' to disable TinyMCE, \'true\' otherwise. 
        return false;
    }
    
    步骤3:将“标准”编辑器工具栏替换为标记工具栏,如上所述wpse49449_admin_footers_script 在页脚中打印一些JavaScript。信息技术

    在文本编辑器后添加“预览”框,#wp-content-editor-container#ed_toolbar 使用降价工具栏HTML转换器初始化标记编辑器函数:

      function wpse49449_admin_footers_script(){
        ?> <script>
    
        jQuery(document).ready(function($) {                
            $(\'#wp-content-editor-container\').after("<div id=\'wmd-previewcontent\' class=\'wmd-panel wmd-preview prettyprint\'></div>");
    
            $(\'#ed_toolbar\').html("<div id=\'wmd-button-barcontent\'></div>");
    
            var converter = new Markdown.getSanitizingConverter();
            var editor = new Markdown.Editor(converter, \'content\');
            editor.run();
        });
        </script>
         <?php
        }
    
    这应该让您开始:)。

    步骤4编辑器。js“变通方法”

    JavaScript文件Markdown.Editor.js 假定文本区域ID为"wmd-input" + postfix 哪里postfix 是否在步骤3的此行中将变量设置为“content”:

    var editor = new Markdown.Editor(converter, \'content\');
    
    问题是textarea的ID是contentwmd-input. 我们不想更改textarea的ID,因此我们可以更改负责告诉MarkDown编辑器工具栏、预览和文本区域的ID的函数(我相信在第249行左右)。我们改变了这一点:

    function PanelCollection(postfix) {
        this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
        this.preview = doc.getElementById("wmd-preview" + postfix);
        this.input = doc.getElementById("wmd-input" + postfix);
    };
    
    对此:

    function PanelCollection(postfix) {
        this.buttonBar = doc.getElementById("wmd-button-bar" + postfix);
        this.preview = doc.getElementById("wmd-preview" + postfix);
        this.input = doc.getElementById(postfix);
    };
    

SO网友:Lee

我不知道如何使用ctrl+b和其他按钮组合,但下面是HTML部分的快捷方式列表:

加粗:Alt+SHIFT+b斜体:Alt+SHIFT+i块引号:Alt+SHIFT+q删除线:Alt+SHIFT+d代码:Alt+SHIFT+c链接:Alt+SHIFT+a无序列表(ul):Alt+SHIFT+u有序列表(ol):Alt+SHIFT+o插入日期/时间:Alt+SHIFT+s g URL:Alt-SHIFT-m换行符:SHIFT+输入列表项(li):Alt+SHIFT+l取消:CTRL+z恢复:CTRL+y阅读更多:Alt+SHIFT+t发布帖子:Alt+SHIFT+p

结束

相关推荐

允许用户编辑Markdown并显示HTML输出时出现问题(WordPress的WMD编辑器插件)

这是答案WMD Editor implementation for Wordpress.When the users writes a post everything is displayed OK:The problem is when the user clicks EDIT:HTML版本就是显示的版本(我认为这是一种正常的行为,因为WMD编辑器将文章的降价版本转换为HTML)。修复此问题的步骤是什么?或者有没有解决这个问题的新版本?(我检查了其他问题,但没有人给出具体的解决方案)。