WP投稿 HTMLタグ外す PLUGIN はないか？AddQuickTagをカスタマイズしてみた。
スペシャル便利な ワードプレスプラグイン Add Quick Tag。
マジ便利だよね？
ところでゆずまるはワードプレスのタイニィなんとかとかかんとかのワードプレスのエディタを使わない。
なぜなら、空白行とか自由にできないからだ。
やつらのエゴで勝手に空白行を捨てたり br タグを殺したりするからだ。
まして、動的表示もできなくなるしね。
HTMLやCSSを理解せずにページを「それなりに」作るときにはいいんだろうが、
余計なことされるので使っていないのだ。
で、ほとんどの必要な機能は AddQuickTag にぶちこんで使っている。
あ、さて、ところがここにきて「不便じゃない?」って思ったことがある。
というのは、HTMLタグで囲んだ時、「あ、やっぱ黄色のアンダーラインがいいな」とか思って直す場合。
いちいち前後のHTMLタグを手動で消してそれから付け直すよね？
これ、面倒。
ボタン一つで消したい。
ゆずまるのCGIのAddQuickTagもどきでは搭載してある機能なんだけどね。
で、この機能を追加してみた。
場所は、大きく言って３か所。
着目点は、「HTML Entitles」。
この HTML Entitles をAddQuickTagで追加してやると(AddQuickTagの設定の下の方に pre と一緒に出ている)
AddQuickTagのボタンの並びに「HTML Entitles」と「Decode HTML」ってのが表示されるようになる。
これは、HTMLをHTMLの表示タグに置き換えるのと表示タグをHTMLに置き換えるって機能を持っている。
ここに、HTMLタグをとっぱらうってコマンドをいれたらできると思ったわけだ。
構造的には、htmlentitles がチェックされていたら最初の２つのモジュールが追加される仕組みになっていたので、ソース検索で「HTML Entitles」を検索して、add-quicktags.dev.js と add-quicktags.js を修正した。
なので add-quicktags.dev.js のその部分に cut html ってオリジナルモジュールを追加。
add-quicktags.dev.js は、コマンドをそのまま治せるのでよいけど add-quicktags.js は目がちかちかする(笑）
ちなみに html タグをJavaScriptで外すのは、(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,”) でよい。
ところがだ、この２つのソース修正だけだと ボタンが表示されないのだ。
探した結果 languages にいくつか文字列定義があって、それを処理してボタンを表示させている”らしい”。
HTML Decode の後ろに ,HTML Cut っていれてみた。
おお！出た？！
で、見事HTMLタグを取り外すボタンを追加できました。めでたしめでたしｗｗｗ
/**
* AddQuicktag Script to add buttons to html-editor
*
* @package AddQuicktag Plugin
* @author Frank Bueltge <frank@bueltge.de>
* @version 12/19/2014
* @since 2.0.0
*/
jQuery(document).ready(function ($) {
if ( typeof addquicktag_tags == ‘undefined’ )
return;
if (typeof addquicktag_post_type == ‘undefined’)
return;
if (typeof addquicktag_pt_for_js == ‘undefined’)
return;
var tags = addquicktag_tags[‘buttons’];
if (typeof tags == ‘undefined’)
return;
function html_entity_decode( str ) {
/*Firefox (and IE if the string contains no elements surrounded by angle brackets )*/
try{
var ta=document.createElement("textarea");
ta.innerHTML=str;
return ta.value;
}catch(e){};
/*Internet Explorer*/
try{
var d=document.createElement("div");
d.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
if(typeof d.innerText!="undefined")return d.innerText;/*Sadly this strips tags as well*/
}catch(e){}
}
// window for input; currently not in use; maybe later
function qt_callback_input_window(e, c, ed) {
var prmt = prompt(‘Enter Tag Name’);
if (prmt === null)
return;
this.tagStart = ‘[tag]’ + prmt + ‘[/tag]’;
QTags.TagButton.prototype.callback.call(this, e, c, ed);
}
function get_selected_text(canvas) { // "canvas" is what they call the textarea of the editor
canvas.focus();
if (document.selection) { // IE
return document.selection.createRange().text;
} else { // standards
return canvas.value.substring(canvas.selectionStart, canvas.selectionEnd);
}
}
// check post type
if ( $.inArray( "addquicktag_post_type", addquicktag_pt_for_js ) ) {
for ( var i = 0; i < tags.length; i++ ) {
// check for active on this post type
if ( 1 === parseInt(tags[i][addquicktag_post_type] ) ) {
if (typeof tags[i].title == ‘undefined’) tags[i].title = ‘ ‘;
if (typeof tags[i].end == ‘undefined’) tags[i].end = ”;
if (typeof tags[i].access == ‘undefined’) tags[i].access = ”;
/**
* @param id string required Button HTML ID
* @param display string required Button’s value="…"
* @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
* @param arg2 string optional Ending tag like "</span>"
* @param access_key string optional Access key for the button.
* @param title string optional Button’s title="…"
* @param priority int optional Number representing the desired position of the button in the toolbar. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc.
* @param instance string optional Limit the button to a specific instance of Quicktags, add to all instances if not present.
*/
QTags.addButton(
html_entity_decode( tags[i].text ).replace( /"|\\/gi, "" ).toLowerCase(),
tags[i].text,
tags[i].start,
tags[i].end,
tags[i].access,
tags[i].title.replace( /"|\\/gi, "" )
);
/**
* @TODO New idea for multiple edit windows
// for edit window
QTags.addButton(
tags[i].text.toLowerCase(),
tags[i].text,
qt_callback_input_window,
tags[i].end,
tags[i].access,
tags[i].title
);
*/
}
}
} // end check post type
// Check the Code buttons, if inside the json
var code_buttons = addquicktag_tags[‘code_buttons’];
// Fallback, if WP core don’t set the var
if ( typeof typenow == ‘undefined’ )
typenow = ”;
// IF no code buttons was active
if ( typeof code_buttons == ‘undefined’ )
return;
// Fallback for no htmlentities settings
if ( typeof code_buttons.htmlentities == ‘undefined’ )
code_buttons.htmlentities = 0;
// Fallback for no pre settings
if ( typeof code_buttons.pre == ‘undefined’ )
code_buttons.pre = 0;
// if the htmlentities settings is active for each post type (var typenow from WP core)
if ( code_buttons.htmlentities[typenow] === 1 ) {
/**
* ideas for code buttons and optional window with input possibility
*
* @see @see http://bililite.com/blog/2012/08/20/custom-buttons-in-the-wordpress-html-editor/
*/
QTags.addButton(‘toHTML’, ‘HTML Entities’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/&/g, ‘&’).replace(/</g, ‘<’).replace(/>/g, ‘>’)
);
}, ‘Encode HTML Entities’);
QTags.addButton(‘fromHTML’, ‘Decode HTML’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/&/g, ‘&’).replace(/</g, ‘<‘).replace(/>/g, ‘>’)
);
}, ‘Decode HTML Entities’);
//—-yuzumaru—-
QTags.addButton(‘cutHTML’, ‘HTML cut’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/<("[^"]*"|'[^’]*’|[^’">])*>/g,”)
);
}, ‘Cut HTML Entities’);
//—-/yuzumaru—-
}
// if the pre settings is active for each post type (var typenow from WP core)
if ( code_buttons.pre[typenow] === 1 ) {
var code_languages = [‘html’, ‘javascript’, ‘css’, ‘bash’, ‘php’, ‘vb’];
// Insert before the code button
edButtons[109] = {
html: function (id_prefix) {
return ‘<select id="’ + id_prefix + ‘code_language" class="language-select">’ +
‘<option>blank</option>’ + // include a blank option
‘<option>’ + code_languages.join(‘</option><option>’) + ‘</option>’ +
‘</select>’;
}
};
$(‘body’).on(‘change’, ‘select.language-select’, function () {
var lang = $(this).val();
// 110 is the code qt-tag from core, wp-includes/js/quicktags.js
edButtons[110].tagStart = lang ? ‘<code class="language-‘ + lang + ‘">’ : ‘<code>’;
});
// Add pre button for preformatted text
QTags.addButton(‘qt_pre’, ‘pre’, ‘<pre>’, ‘</pre>’, ”, ‘Preformatted text’, ‘108’);
}
});
?>
/**
* AddQuicktag Script to add buttons to html-editor
*
* @package AddQuicktag Plugin
* @author Frank Bueltge <frank@bueltge.de>
* @version 12/19/2014
* @since 2.0.0
*/
jQuery(document).ready(function(e){function t(e){try{var t=document.createElement("textarea");return t.innerHTML=e,t.value}catch(n){}try{var a=document.createElement("div");if(a.innerHTML=e.replace(/</g,"<").replace(/>/g,">"),"undefined"!=typeof a.innerText)return a.innerText}catch(n){}}function n(e){return e.focus(),document.selection?document.selection.createRange().text:e.value.substring(e.selectionStart,e.selectionEnd)}if("undefined"!=typeof addquicktag_tags&&"undefined"!=typeof addquicktag_post_type&&"undefined"!=typeof addquicktag_pt_for_js){var a=addquicktag_tags.buttons;if("undefined"!=typeof a){if(e.inArray("addquicktag_post_type",addquicktag_pt_for_js))for(var o=0;o<a.length;o++)1===parseInt(a[o][addquicktag_post_type])&&("undefined"==typeof a[o].title&&(a[o].title=" "),"undefined"==typeof a[o].end&&(a[o].end=""),"undefined"==typeof a[o].access&&(a[o].access=""),QTags.addButton(t(a[o].text).replace(/"|\\/gi,"").toLowerCase(),a[o].text,a[o].start,a[o].end,a[o].access,a[o].title.replace(/"|\\/gi,"")));var i=addquicktag_tags.code_buttons;if("undefined"==typeof typenow&&(typenow=""),"undefined"!=typeof i&&("undefined"==typeof i.htmlentities&&(i.htmlentities=0),"undefined"==typeof i.pre&&(i.pre=0),1===i.htmlentities[typenow]&&
(
QTags.addButton("toHTML","HTML Entities",function(e,t){QTags.insertContent(n(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"))},"Encode HTML Entities"),
QTags.addButton("fromHTML","Decode HTML",function(e,t){QTags.insertContent(n(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"))},"Decode HTML Entities"),
QTags.addButton("cutHTML","HTML Cut",function(e,t){QTags.insertContent(n(t).replace(/<("[^"]*"|'[^’]*’|[^’">])*>/g,”))},"Cut HTML Entities")
),1===i.pre[typenow])){var d=["html","javascript","css","bash","php","vb"];edButtons[109]={html:function(e){return'<select id="’+e+’code_language" class="language-select"><option>blank</option><option>’+d.join("</option><option>")+"</option></select>"}},e("body").on("change","select.language-select",function(){var t=e(this).val();edButtons[110].tagStart=t?'<code class="language-‘+t+’">’:"<code>"}),QTags.addButton("qt_pre","pre","<pre>","</pre>","","Preformatted text","108")}}}});
?>
msgid “htmlentities: HTML Entities, HTML Decode”
msgstr “htmlentities: HTML Entities, HTML Decode”
こういうところを
msgid “htmlentities: HTML Entities, HTML Decode, HTML Cut”
msgstr “htmlentities: HTML Entities, HTML Decode, HTML Cut”
のように修正した。
マジ便利だよね？
ところでゆずまるはワードプレスのタイニィなんとかとかかんとかのワードプレスのエディタを使わない。
なぜなら、空白行とか自由にできないからだ。
やつらのエゴで勝手に空白行を捨てたり br タグを殺したりするからだ。
まして、動的表示もできなくなるしね。
HTMLやCSSを理解せずにページを「それなりに」作るときにはいいんだろうが、
余計なことされるので使っていないのだ。
で、ほとんどの必要な機能は AddQuickTag にぶちこんで使っている。
あ、さて、ところがここにきて「不便じゃない?」って思ったことがある。
というのは、HTMLタグで囲んだ時、「あ、やっぱ黄色のアンダーラインがいいな」とか思って直す場合。
いちいち前後のHTMLタグを手動で消してそれから付け直すよね？
これ、面倒。
ボタン一つで消したい。
ゆずまるのCGIのAddQuickTagもどきでは搭載してある機能なんだけどね。
で、この機能を追加してみた。
場所は、大きく言って３か所。
着目点は、「HTML Entitles」。
この HTML Entitles をAddQuickTagで追加してやると(AddQuickTagの設定の下の方に pre と一緒に出ている)
AddQuickTagのボタンの並びに「HTML Entitles」と「Decode HTML」ってのが表示されるようになる。
これは、HTMLをHTMLの表示タグに置き換えるのと表示タグをHTMLに置き換えるって機能を持っている。
ここに、HTMLタグをとっぱらうってコマンドをいれたらできると思ったわけだ。
構造的には、htmlentitles がチェックされていたら最初の２つのモジュールが追加される仕組みになっていたので、ソース検索で「HTML Entitles」を検索して、add-quicktags.dev.js と add-quicktags.js を修正した。
なので add-quicktags.dev.js のその部分に cut html ってオリジナルモジュールを追加。
add-quicktags.dev.js は、コマンドをそのまま治せるのでよいけど add-quicktags.js は目がちかちかする(笑）
ちなみに html タグをJavaScriptで外すのは、(str).replace(/<("[^"]*"|'[^']*'|[^'">])*>/g,”) でよい。
ところがだ、この２つのソース修正だけだと ボタンが表示されないのだ。
探した結果 languages にいくつか文字列定義があって、それを処理してボタンを表示させている”らしい”。
HTML Decode の後ろに ,HTML Cut っていれてみた。
おお！出た？！
で、見事HTMLタグを取り外すボタンを追加できました。めでたしめでたしｗｗｗ
add-quicktags.dev.js
/**
* AddQuicktag Script to add buttons to html-editor
*
* @package AddQuicktag Plugin
* @author Frank Bueltge <frank@bueltge.de>
* @version 12/19/2014
* @since 2.0.0
*/
jQuery(document).ready(function ($) {
if ( typeof addquicktag_tags == ‘undefined’ )
return;
if (typeof addquicktag_post_type == ‘undefined’)
return;
if (typeof addquicktag_pt_for_js == ‘undefined’)
return;
var tags = addquicktag_tags[‘buttons’];
if (typeof tags == ‘undefined’)
return;
function html_entity_decode( str ) {
/*Firefox (and IE if the string contains no elements surrounded by angle brackets )*/
try{
var ta=document.createElement("textarea");
ta.innerHTML=str;
return ta.value;
}catch(e){};
/*Internet Explorer*/
try{
var d=document.createElement("div");
d.innerHTML=str.replace(/</g,"<").replace(/>/g,">");
if(typeof d.innerText!="undefined")return d.innerText;/*Sadly this strips tags as well*/
}catch(e){}
}
// window for input; currently not in use; maybe later
function qt_callback_input_window(e, c, ed) {
var prmt = prompt(‘Enter Tag Name’);
if (prmt === null)
return;
this.tagStart = ‘[tag]’ + prmt + ‘[/tag]’;
QTags.TagButton.prototype.callback.call(this, e, c, ed);
}
function get_selected_text(canvas) { // "canvas" is what they call the textarea of the editor
canvas.focus();
if (document.selection) { // IE
return document.selection.createRange().text;
} else { // standards
return canvas.value.substring(canvas.selectionStart, canvas.selectionEnd);
}
}
// check post type
if ( $.inArray( "addquicktag_post_type", addquicktag_pt_for_js ) ) {
for ( var i = 0; i < tags.length; i++ ) {
// check for active on this post type
if ( 1 === parseInt(tags[i][addquicktag_post_type] ) ) {
if (typeof tags[i].title == ‘undefined’) tags[i].title = ‘ ‘;
if (typeof tags[i].end == ‘undefined’) tags[i].end = ”;
if (typeof tags[i].access == ‘undefined’) tags[i].access = ”;
/**
* @param id string required Button HTML ID
* @param display string required Button’s value="…"
* @param arg1 string || function required Either a starting tag to be inserted like "<span>" or a callback that is executed when the button is clicked.
* @param arg2 string optional Ending tag like "</span>"
* @param access_key string optional Access key for the button.
* @param title string optional Button’s title="…"
* @param priority int optional Number representing the desired position of the button in the toolbar. 1 – 9 = first, 11 – 19 = second, 21 – 29 = third, etc.
* @param instance string optional Limit the button to a specific instance of Quicktags, add to all instances if not present.
*/
QTags.addButton(
html_entity_decode( tags[i].text ).replace( /"|\\/gi, "" ).toLowerCase(),
tags[i].text,
tags[i].start,
tags[i].end,
tags[i].access,
tags[i].title.replace( /"|\\/gi, "" )
);
/**
* @TODO New idea for multiple edit windows
// for edit window
QTags.addButton(
tags[i].text.toLowerCase(),
tags[i].text,
qt_callback_input_window,
tags[i].end,
tags[i].access,
tags[i].title
);
*/
}
}
} // end check post type
// Check the Code buttons, if inside the json
var code_buttons = addquicktag_tags[‘code_buttons’];
// Fallback, if WP core don’t set the var
if ( typeof typenow == ‘undefined’ )
typenow = ”;
// IF no code buttons was active
if ( typeof code_buttons == ‘undefined’ )
return;
// Fallback for no htmlentities settings
if ( typeof code_buttons.htmlentities == ‘undefined’ )
code_buttons.htmlentities = 0;
// Fallback for no pre settings
if ( typeof code_buttons.pre == ‘undefined’ )
code_buttons.pre = 0;
// if the htmlentities settings is active for each post type (var typenow from WP core)
if ( code_buttons.htmlentities[typenow] === 1 ) {
/**
* ideas for code buttons and optional window with input possibility
*
* @see @see http://bililite.com/blog/2012/08/20/custom-buttons-in-the-wordpress-html-editor/
*/
QTags.addButton(‘toHTML’, ‘HTML Entities’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/&/g, ‘&’).replace(/</g, ‘<’).replace(/>/g, ‘>’)
);
}, ‘Encode HTML Entities’);
QTags.addButton(‘fromHTML’, ‘Decode HTML’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/&/g, ‘&’).replace(/</g, ‘<‘).replace(/>/g, ‘>’)
);
}, ‘Decode HTML Entities’);
//—-yuzumaru—-
QTags.addButton(‘cutHTML’, ‘HTML cut’, function (el, canvas) {
QTags.insertContent(
get_selected_text(canvas).replace(/<("[^"]*"|'[^’]*’|[^’">])*>/g,”)
);
}, ‘Cut HTML Entities’);
//—-/yuzumaru—-
}
// if the pre settings is active for each post type (var typenow from WP core)
if ( code_buttons.pre[typenow] === 1 ) {
var code_languages = [‘html’, ‘javascript’, ‘css’, ‘bash’, ‘php’, ‘vb’];
// Insert before the code button
edButtons[109] = {
html: function (id_prefix) {
return ‘<select id="’ + id_prefix + ‘code_language" class="language-select">’ +
‘<option>blank</option>’ + // include a blank option
‘<option>’ + code_languages.join(‘</option><option>’) + ‘</option>’ +
‘</select>’;
}
};
$(‘body’).on(‘change’, ‘select.language-select’, function () {
var lang = $(this).val();
// 110 is the code qt-tag from core, wp-includes/js/quicktags.js
edButtons[110].tagStart = lang ? ‘<code class="language-‘ + lang + ‘">’ : ‘<code>’;
});
// Add pre button for preformatted text
QTags.addButton(‘qt_pre’, ‘pre’, ‘<pre>’, ‘</pre>’, ”, ‘Preformatted text’, ‘108’);
}
});
?>
add-quicktags.js
/**
* AddQuicktag Script to add buttons to html-editor
*
* @package AddQuicktag Plugin
* @author Frank Bueltge <frank@bueltge.de>
* @version 12/19/2014
* @since 2.0.0
*/
jQuery(document).ready(function(e){function t(e){try{var t=document.createElement("textarea");return t.innerHTML=e,t.value}catch(n){}try{var a=document.createElement("div");if(a.innerHTML=e.replace(/</g,"<").replace(/>/g,">"),"undefined"!=typeof a.innerText)return a.innerText}catch(n){}}function n(e){return e.focus(),document.selection?document.selection.createRange().text:e.value.substring(e.selectionStart,e.selectionEnd)}if("undefined"!=typeof addquicktag_tags&&"undefined"!=typeof addquicktag_post_type&&"undefined"!=typeof addquicktag_pt_for_js){var a=addquicktag_tags.buttons;if("undefined"!=typeof a){if(e.inArray("addquicktag_post_type",addquicktag_pt_for_js))for(var o=0;o<a.length;o++)1===parseInt(a[o][addquicktag_post_type])&&("undefined"==typeof a[o].title&&(a[o].title=" "),"undefined"==typeof a[o].end&&(a[o].end=""),"undefined"==typeof a[o].access&&(a[o].access=""),QTags.addButton(t(a[o].text).replace(/"|\\/gi,"").toLowerCase(),a[o].text,a[o].start,a[o].end,a[o].access,a[o].title.replace(/"|\\/gi,"")));var i=addquicktag_tags.code_buttons;if("undefined"==typeof typenow&&(typenow=""),"undefined"!=typeof i&&("undefined"==typeof i.htmlentities&&(i.htmlentities=0),"undefined"==typeof i.pre&&(i.pre=0),1===i.htmlentities[typenow]&&
(
QTags.addButton("toHTML","HTML Entities",function(e,t){QTags.insertContent(n(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"))},"Encode HTML Entities"),
QTags.addButton("fromHTML","Decode HTML",function(e,t){QTags.insertContent(n(t).replace(/&/g,"&").replace(/</g,"<").replace(/>/g,">"))},"Decode HTML Entities"),
QTags.addButton("cutHTML","HTML Cut",function(e,t){QTags.insertContent(n(t).replace(/<("[^"]*"|'[^’]*’|[^’">])*>/g,”))},"Cut HTML Entities")
),1===i.pre[typenow])){var d=["html","javascript","css","bash","php","vb"];edButtons[109]={html:function(e){return'<select id="’+e+’code_language" class="language-select"><option>blank</option><option>’+d.join("</option><option>")+"</option></select>"}},e("body").on("change","select.language-select",function(){var t=e(this).val();edButtons[110].tagStart=t?'<code class="language-‘+t+’">’:"<code>"}),QTags.addButton("qt_pre","pre","<pre>","</pre>","","Preformatted text","108")}}}});
?>
languages
addquicktag-zh_CN.po などを Grepなどをつかって HTML Entitles で ソース検索し、msgid “htmlentities: HTML Entities, HTML Decode”
msgstr “htmlentities: HTML Entities, HTML Decode”
こういうところを
msgid “htmlentities: HTML Entities, HTML Decode, HTML Cut”
msgstr “htmlentities: HTML Entities, HTML Decode, HTML Cut”
のように修正した。
スポンサーリンク