4つの改行なしのスペースを追加するビジュアルエディタ用のカスタムボタンを作成する方法（プラグインまたは単純なコード）
Wordpressのビジュアルエディタ（TinyMCE）に、クリックしたときに4つのスペースを追加するボタンを追加したいと思います。
HTMLエディタにボタンを追加し、ビジュアルエディタには追加しないプラグインをいくつか見つけました（ これ /など）。
または一般的に、ビジュアルtinyMCEエディタにカスタムボタンを追加するためのプラグインまたはコード化可能な（しかし単純な）代替手段があるかどうかを知るのはいいでしょう。
私はすでに question であなたがそのようなことを成し遂げることができる方法を示したが、私はあなたの要求でそれをここで再び説明することができる。私はWordpress 3.5でこれをテストしました、そしてそれは優雅に働きます。この答えが論文の長さであることを避けるために、私はあなたがそれぞれの機能が何をするのか理解するのを助けるためにすべてのコードの中にコメントを加えました。
まず、あなたのテーマフォルダに、adminという名前のフォルダを追加し、その中に、コードでファイルclass.new_tinymce_btn.phpを作成します。
<?php
//wpex_37798_christine_cooper
//class start
class add_new_tinymce_btn {
public $btn_arr;
public $js_file;
/*
* call the constructor and set class variables
* From the constructor call the functions via wordpress action/filter
*/
function __construct($seperator, $btn_name,$javascrip_location){
$this->btn_arr = array("Seperator"=>$seperator,"Name"=>$btn_name);
$this->js_file = $javascrip_location;
add_action('init', array(&$this,'add_tinymce_button'));
add_filter( 'tiny_mce_version', array(&$this,'refresh_mce_version'));
}
/*
* create the buttons only if the user has editing privs.
* If so we create the button and add it to the tinymce button array
*/
function add_tinymce_button() {
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') )
return;
if ( get_user_option('rich_editing') == 'true') {
//the function that adds the javascript
add_filter('mce_external_plugins', array(&$this,'add_new_tinymce_plugin'));
//adds the button to the tinymce button array
add_filter('mce_buttons', array(&$this,'register_new_button'));
}
}
/*
* add the new button to the tinymce array
*/
function register_new_button($buttons) {
array_Push($buttons, $this->btn_arr["Seperator"],$this->btn_arr["Name"]);
return $buttons;
}
/*
* Call the javascript file that loads the
* instructions for the new button
*/
function add_new_tinymce_plugin($plugin_array) {
$plugin_array[$this->btn_arr['Name']] = $this->js_file;
return $plugin_array;
}
/*
* This function tricks tinymce in thinking
* it needs to refresh the buttons
*/
function refresh_mce_version($ver) {
$ver += 3;
return $ver;
}
}//class end
?>
このコードはビジュアルエディタにカスタムボタンを追加します。
次に、あなたのテーマフォルダにこれらのフォルダadminjs/buttonsを作成し、その中にこのJSファイルspacebutton.jsをコードで作成します。
(function() {
tinymce.create('tinymce.plugins.nextpage', {
init : function(ed, url) {
ed.addButton('nextpage', {
title : 'Space Button',
image : url+'/images/btn_spacebutton.png',
onclick : function() {
var Prompt_text = " ";
var caret = "caret_pos_holder";
var insert = "<p>" + Prompt_text + " </p> <span id="+caret+"></span>";
ed.execCommand('mceInsertContent', false, insert);
ed.selection.select(ed.dom.select('span#caret_pos_holder')[0]); //select the span
ed.dom.remove(ed.dom.select('span#caret_pos_holder')[0]); //remove the span
}
});
},
createControl : function(n, cm) {
return null;
},
});
tinymce.PluginManager.add('nextpage', tinymce.plugins.nextpage);
})();
ボタンの画像を追加する必要があります（/images/btn_spacebutton.png）。上記のコードは、ボタンが押されたときに何が起こるのかを表す、かなり単純なJavaScript関数です。
これをあなたの関数ファイルに追加してこのボタンクラスをロードする必要があります：
//load custom buttons class
require_once (TEMPLATEPATH . '/admin/class.new_tinymce_btn.php');
//create an instance of the class
$t = new add_new_tinymce_btn('|','nextpage',get_bloginfo('template_url').'/adminjs/buttons/spacebutton.js');
それだ。新しいカスタムボタンがビジュアルエディタに表示されます。より多くのカスタムボタンを追加したいときはいつでも、ボタン機能を持つ新しいJSファイルを追加して、上記のようにボタンクラスをロードするだけです。
TL; DR、コードは一番下にあります。
はい、これはあなたのために働くべきですが、それはベータ版です。それは私のために働きます、しかし私は厳密なテストの種類をしませんでした。 1つには、4つの連続した エンティティが出力されないことです。 [space] [space]はぎこちなく表示されますが、少なくともビジュアルモードとテキストモードを切り替える際には、それらをそのままにしておきます。それはビジュアルモードでのみ動作します、私はそれをテキストモードで動作させる方法を理解するのに時間をかけていません。
それは2つのファイルに入っています、あなたが合うように名前を付けます。私は使った 想像力豊かな 名前：4スペース。 :) TinyMCEボタンはエディタの一番右の一番右にあります。それはあなたのブラウザの種類が存在しないイメージのために示すものは何でも示すでしょう。これは4spaces.jsの8行目で簡単に変更できます。
image : url + '/' + 'YOUR_IMAGE_HERE.png'
`YOUR_IMAGE_HERE.png 'を2つのファイルを基準にしたあなたのイメージファイルに変更するか、またはそのような絶対URIを使用してください：
image : '/path/to/image/YOUR_IMAGE_HERE.png'
または
image : 'http://example.com/path/to/image/YOUR_IMAGE_HERE.png'
私はPHP全体にコメントを残したり、既存のコメントを残しています。JavaScriptのコメントはまばらです。 PHPコードの由来となったPHPヘッダーセクション、およびJavaScriptの由来となった種類のが表示されます。
2つの注目すべきクレジット、両方ともPHPヘッダーにリストされています： このWordPress.SE回答 はTinyMCE（またはWordPress、どちらであるかわからない）がスペースを取り除くのを止めるコードを提供しました前回の回答で@Alexeyが提供していましたが、これは重要ではありませんが、JSソリューションを見つけるのに役立ちました。
そのリンク でコードを作成することはできませんでしたが、やがてそれに戻ってきて、それをすべてまとめるナゲットを見つけました（確かに微調整を加えて）。
私はそれについてすべてをまとめると思います。これがコードです：
4spaces.php
<?php
/* Plugin Name: 4Spaces
* Version: 0.1.0
* Author: AK Ted
* Author URI: http://akted.com
* License: GPLv2 or later
*
*
* PHP code adapted & refined from the following two sources:
* WordPress Codex - http://codex.wordpress.org/TinyMCE_Custom_Buttons#Loading_a_TinyMCE__Plugin
*
* WordPress Answers (Stack Exchange) - https://wordpress.stackexchange.com/questions/54398/how-can-i-stop-tinymce-from-converting-my-html-entities-to-characters#answer-54480
*
*
* The JavaScript arose from a lot of trial-and-error, with code [beat into submission...er, I mean] inspired by both of the following sources:
* tinymce wiki - http://www.tinymce.com/wiki.php/Creating_a_plugin
* &
* brett terpstra - http://brettterpstra.com/2010/04/17/adding-a-tinymce-button/
*
*/
new akt_4spaces();
class akt_4spaces {
function __construct() {
add_action('admin_init', array($this, 'init'));
} // function __construct
// callback for init
// sets all the hooks only if user has capability & rich_editing is true
function init() {
// Don't bother doing this stuff if the current user lacks permissions
if ( ! current_user_can('edit_posts') && ! current_user_can('edit_pages') ) {
return;
}
// Add only in Rich Editor mode
if ( get_user_option('rich_editing') == 'true') {
add_filter('mce_buttons', array($this, 'add_button'));
add_filter('mce_external_plugins', array($this, 'add_tinymce_plugin'));
add_filter('tiny_mce_before_init', array($this, 'preserve_entities'));
}
} // function init
// callback for mce_buttons filter
// adds button to TinyMCE
function add_button($buttons) {
array_Push($buttons, 'separator', 'four_spaces');
return $buttons;
} // function add_button
// callback for mce_external_plugins filter
// attaches the JavaScript file to TinyMCE
function add_tinymce_plugin($plugin_array) {
$plugin_array['four_spaces'] = plugins_url('/', __FILE__) . '4spaces.js';
return $plugin_array;
} // function add_tinymce_plugin
// callback for tiny_mce_before_init
// stops TinyMCE (WordPress?) from automatically converting entities
function preserve_entities( $initArray ) {
// The odd entries are the entity *number*, the even entries are the entity *name*. If the entity has no name,
// use the number, prefixed with a hash (for example, the service mark is "8480,#8480").
$initArray['entities'] = '160,nbsp,' . $initArray['entities'];
return $initArray;
} // function preserve_entities
} // class akt_4spaces
4spaces.js
(function() {
tinymce.create('tinymce.plugins.four_spaces', {
init : function(ed, url) {
// Register four_spaces button
ed.addButton('four_spaces', {
title : '4Spaces',
image : url + '/' + 'YOUR_IMAGE_HERE.png',
onclick : function() {
ed.execCommand(
"mceInsertContent",
false,
" "
);
}
});
}
});
// Register plugin
tinymce.PluginManager.add('four_spaces', tinymce.plugins.four_spaces);
})();
編集：私は、/wp-content/plugins/（デフォルトパス）の下のディレクトリにそれらのファイルの両方を入れることを知らない人々のために、言及するのを忘れていました。それは/ wp-content/plugins/4spaces /のようなものか、あるいはあなたがそれを呼ぶことに決めたどんな名前でもそれからAdminでそれをアクティブにするべきです。
P.S - OOPは比較的新しいので、この回答を見ている人からの批判やアドバイスなど、すべての意見を歓迎します。