WordPressでTinyMCEエディタを使用する[ガイド]

彼らはその名前を知らないかもしれませんが、WordPressを使う人は誰でも知っています。 TinyMCEエディタ. それはあなたがあなたのコンテンツを作成または編集するときに使用するエディタです - 太字のテキスト、見出し、テキストの配置などを作成するためのボタンを持つものです。それがこの記事の中で私たちが見ているものです、そして私はあなたに示すつもりです 機能を追加する方法 そして プラグインでどのように使うことができますか.

エディタは、Web上の多数のプロジェクトで使用されているTinyMCEと呼ばれるプラットフォームに依存しないJavascriptシステムに基づいて構築されています。それはあなた自身のボタンを作成してWordPress内の他の場所にそれを追加するためにあなたがWordPressをタップすることを可能にする素晴らしいAPIを持っています.

利用可能なボタンを追加する

WordPressはTinyMCEで利用可能ないくつかのオプションを使用して、上付き文字、下付き文字、水平線など、特定のボタンを無効にしてインターフェイスを整理します。彼らはあまり手間をかけずに元に戻すことができます.

最初のステップはプラグインを作成することです。その方法についてはWordPressコーデックスを見てください。一言で言えば、あなたはwp-content / pluginsフォルダーに 'my-mce-plugin'という名前のフォルダーを作成することによって得ることができます。 PHP拡張子を付けて、同じ名前のファイルを作成します。 my-mce-plugin.php.

そのファイルの中に以下を貼り付けてください：

完了したら、WordPressでこのプラグインを選択してアクティブにすることができるはずです。これからのすべてのコードはこのファイルの中に貼り付けることができます.

だから、に戻る いくつかの組み込みだが隠されたボタンを有効にする. これが、私が述べた3つのボタンを有効にするためのコードです。

 add_filter（ 'mce_buttons_2'、 'my_tinymce_buttons'）;関数my_tinymce_buttons（$ボタン）$ボタン[] = '上付き文字'; $ buttons [] = '添え字'; $ buttons [] = hr; $ボタンを返す。

どのボタンを追加できるのか、そしてそれらが何と呼ばれているのかを知るためには、TinyMCEのドキュメントにあるコントロールのリストを見てください。.

独自のボタンを作成する

独自のボタンを最初から作成するのはどうですか。多くのWebサイトではコードの強調表示にPrismが使用されています。あなたの中にあなたのコードをラップする必要があります そして

 タグ、このようなもの：
 $ variable = 'value'
 これを行うボタンを作成しましょう。!
 これは3段階のプロセスです。ボタンを追加し、JavaScriptファイルをロードして、実際にJavascriptファイルの内容を書き込む必要があります。始めましょう!
 ボタンを追加してJavascriptファイルをロードするのはかなり簡単です。これを実行するために使用したコードは次のとおりです。
  add_filter（ 'mce_buttons'、 'pre_code_add_button'）; function pre_code_add_button（$ buttons）$ buttons [] = 'pre_code_button'; $ボタンを返す。 add_filter（ 'mce_external_plugins'、 'pre_code_add_javascript'）; function pre_code_add_javascript（$ plugin_array）$ plugin_array ['pre_code_button'] = get_template_directory_uri（）。 '/tinymce-plugin.js'; $ plugin_arrayを返します。  
 これについてのチュートリアルを見るとき、私はしばしば2つの問題を見ます.
 彼らはそれを言及するのを怠る。 pre_code_add_button（）関数に追加されたボタン名は、pre_code_add_javascript（）関数の$ plugin_array変数のキーと同じである必要があります。. 私達はまた必要となる Javascriptで同じ文字列を使用する 後で.
 いくつかのチュートリアルも 追加のadmin_headフックを使用してすべてをまとめます。. これは動作しますが、必須ではありません。また、コーデックスでは使用されていないため、おそらく避けるべきです。.
 次のステップは、私たちの機能を実装するためのJavascriptを書くことです。これは私が以前に入手したものです。 
 そして  タグをまとめて出力.
  （function（）tinymce.PluginManager.add（ 'pre_code_button'、function（editor、url）editor.addButton（ 'pre_code_button'、text： 'Prism'、アイコン：false、onclick：function（）var selected = tinyMCE.activeEditor.selection.getContent（）; var content = ''+ selected +'
'; editor.insertContent（content + "\ n"）; ;）; ;））; （）; 
 これの大部分はTinyMCEプラグインがどのようにコーディングされることになっているかによって決定されます、あなたはTinyMCEドキュメンテーションでそれに関するいくらかの情報を見つけることができます。今のところ、あなたが知る必要があるのはそれだけです あなたのボタンの名前 （pre_code_button） 2行目と3行目で使用する必要があります。. アイコンを使用していない場合は、4行目の "text"の値が表示されます（すぐにアイコンを追加する方法を見ていきます）。.
 onclickメソッドは、このボタンがクリックされたときの動作を決定します。選択したテキストを前述のHTML構造内にラップするために使用したい.
 選択したテキストは、を使ってつかむことができます tinyMCE.activeEditor.selection.getContent（）. 次に、強調表示したコンテンツを新しい要素に置き換えて、要素を囲み、挿入します。 code要素の後に簡単に書き込めるように、新しい行も追加しました。.
 あなたがアイコンを使いたいのであれば、WordPressに同梱されているDashiconsセットからアイコンを選択することをお勧めします。開発者向けリファレンスには、アイコンとそのCSS / HTML / Glyphを見つけるための優れたツールがあります。コードシンボルを見つけて、その下のUnicodeに注目します。 f475.
 プラグインにスタイルシートを添付してから、アイコンを表示するための単純なスタイルを追加する必要があります。まず、WordPressにスタイルを追加しましょう。
  add_action（ 'admin_enqueue_scripts'、 'pre_code_styles'）; function pre_code_styles（）wp_enqueue_style（ 'pre_code_button'、plugins_url（ '/style.css'、__FILE__））;  
 Javascriptに戻り、addButton関数のアイコンの横にある、 “偽” ボタンを持ってほしいクラスで - 私は使いました pre_code_button.
 プラグインディレクトリにstyle.cssファイルを作成し、次のCSSを追加します。
  i.mce-i-pre_code_button：font-family：dashicons;の前内容： "\ f475";  
  
 ボタンが mce-i- [あなたのクラスはここ] スタイルをターゲットにして追加するために使用できるクラス。フォントをダッシュで指定し、内容を以前のUnicode値を使用して指定します.
 TinyMCEを他の場所で使用する
 プラグインはしばしば長いテキストを入力するためのテキストエリアを作成します, TinyMCEも使えるとしたら、それは素晴らしいことではないでしょうか。もちろんできますし、とても簡単です。 wp_editor（）関数を使うと、adminのどこにでも出力できます。その外観は次のとおりです。
 wp_editor（$ initial_content、$ element_id、$ settings）;
 最初のパラメータはボックスの初期内容を設定します. これは、たとえばデータベースからオプションをロードするために使用できます。 2番目のパラメータはHTML要素のIDを設定します。 3番目のパラメータは設定の配列です。あなたが使うことができる正確な設定について読むために、wpエディタドキュメントを見てください。.
 最も重要な設定は textarea_name. これによりtextarea要素のname属性が設定され、データを簡単に保存できるようになります。これが私のエディタがオプションページで使われたときの外観です。
 $ settings = array（ 'textarea_name' => 'buyer_bio'）;
 wp_editor（get_option（ 'buyer_bio'）、 'buyer_bio'、$ settings）;
 これは、次のコードを書くのと同じです。これは、単純なテキストエリアになります。
 <?php get_option( 'buyer_bio' ) ?>
 結論
 TinyMCEエディタは、ユーザーがコンテンツを入力する際の柔軟性を高めるためのユーザーフレンドリーな方法です。コンテンツをフォーマットしたくない人は、入力してそれを実行するだけで済みます。また、コンテンツを正しく入力する必要がある分だけ時間を費やす必要がある人もいます。.
 新しいボタンや機能を作成することは、非常にモジュール化された方法で行うことができます、そして我々はただ可能性の表面を引っ掻いただけです。 TinyMCEの優れたプラグインやユースケースを知っていて、あなたに多大な貢献をしてくれたのなら、以下のコメント欄でお知らせください。!