web-dev-qa-db-ja.com

WordPressのHTMLエディタで使用するためのカスタムキーボードショットカットの有効化/追加

私は自分の投稿でMarkdownを使用しています。そのために使用しているプラ​​グインはビジュアルエディタを無効にする必要があります。

HTMLエディタは単なるテキストボックスです。書きやすくするために、キーの組み合わせが押されたときにマークダウンでテキストをフォーマットできるようにするカスタムキーボードショートカットを有効にします（以下のように）。 Ctrl + B）どうやってこれをするの？

基本的には、Wordpress.StackExchange.comの投稿エディタで機能するキーボードショートカットがいくつか欲しいだけです。そして彼らは...

  • Ctrl + B →**太字**

  • Ctrl + I →_イタリック体のテキスト_

  • Ctrl + Q →ブロック見積もり

    • 引用されたテキストが複数行ある場合でも上記は動作するはずです。

  • Ctrl + K →

    • インラインテキストを `で囲む

    • 複数の行がある場合は、各行を4つのスペースでインデントします。

PS： JavaScriptやPHPがわからないので、できるだけ明確にしてください。ありがとう。

customizationhtml-editormarkdown
4
its_me

Stack Exchange Webサイト（および私のプラグイン WP-MarkDown ）で使用されるツールバー/エディターは PageDown です。

これには3つのJavaScriptファイルが付属しています。

  • MarkDownからHTMLへの変換を処理するもの
  • 消毒を処理するもの
  • エディターを処理するもの（ツールバーとプレビューア）

後者には、あなたが言及したMarkDownキーボードショートカットが含まれています。

以下はテストされていませんが、あなたがする必要があることの概要を示すことを目的としています。

ステップ1：JavaScriptとスタイルの登録とエンキュー

これをWordPressエディターで動作させるには、まず上記のスクリプトを登録してキューに入れます（プラグインの正しい場所をポイントします）。 （スクリプトをエンキューする前に依存関係があるときにスクリプトを登録する必要があるかどうかわかりません）

これは管理者専用であるため、admin_enqueue_scriptsを使用します。あなたもチェックしたいでしょう

  • 正しい管理ページにいます
  • 投稿タイプ（MarkDownが特定の投稿タイプに対してのみ有効になっている場合）

また、関数が管理フッターにフックされます。これにより、JavaScriptがフッターに出力されます。 （別のファイルに入れて登録し、ここでキューに入れることができますが、沼地標準のスクリプトの後にafterロードする必要があります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を無効にする必要があります。ただし、MarkDownエディターを使用している投稿タイプに対してのみ無効にしてください。 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：「標準」エディターツールバーをMarkDownツールバーに置き換えます

上記のように、関数wpse49449_admin_footers_scriptはフッターにJavaScriptを出力します。それ

  • テキストエディタの後に「プレビュー」ボックスを追加します。#wp-content-editor-container
  • デフォルトのツールバー#ed_toolbarをMarkDownツールバーに置き換えます。
  • markDown-> HTMLコンバーターを初期化します
  • markDownエディターを初期化します

関数：

  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 Editor.jsの「回避策」

JavaScriptファイルMarkdown.Editor.jsは、テキスト領域IDが"wmd-input" + postfixであると想定しています。ここで、postfixは、ステップ3のこの行で 'content'として設定された変数です。

var editor = new Markdown.Editor(converter, 'content');

問題は、textareaのIDがwmd-inputではなくcontentであることです。 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);
};
6
Stephen Harris