HTML,CSS,PHP,ワードプレスカスタマイズ 技術情報資料

ワードプレスの AddQuckTag のように 編集ボタンをつける

ワードプレスの プラグイン AddQuckTag は、めちゃめちゃ便利ですよね?

自分でタグセットを登録できるため、効率よく投稿作業ができます。

ですが、AddQuickTag は、2つほどのボタンを除いて(HTML Entities , Decode HTML)、あくまでも静的なタグの埋め込みです。


投稿作業中、タグを埋め込むのに最も手間がかかるとおもっているのがリストです。

例えば、

・list1
string1
・list2
string1
・list3
string1

これをこんな感じにタグをいれたい。
<ul style="">
<li><b>list1</b>
<div style="margin-left:20px;">string1
</div></li>
<li><b>list2</b>
<div style="margin-left:20px;">string1
</div></li>
<li><b>list3</b>
<div style="margin-left:20px;">string1
</div></li>
</ul>


表示
  • list1
    string1
  • list2
    string1
  • list3
    string1

これをボタン一つでできたら楽ですよね?


list を自動的に成形する

function.php に入れるか、プラグインに加工してしまいます。

list を自動的に成形するプログラム
function add_my_quicktag() {?>
<script type="text/javascript">
//ボタンを追加する シンボル:lib 表示:(li)
QTags.addButton('lib', '(li)', lifunction);
// 追加したボタンのコールバック
function lifunction(f, g, fd){
// 投稿エリア(textarea)のオブジェクトを取り込む
var textarea = document.getElementById("content"); 
// 投稿エリアの値を取り込む
var sentence = textarea.value;
// 範囲選択になっているか
if(textarea.selectionStart!=textarea.selectionEnd){
// 選択開始位置までの文字列
var before= sentence.slice(0, textarea.selectionStart);
// 選択終了位置以降の文字列
var after = sentence.slice(textarea.selectionEnd);
// 選択範囲内の文字列
var text = sentence.slice(textarea.selectionStart, textarea.selectionEnd);
buff = '';
block = '';
lines = text.split(/\n/);
if(lines.length>0){
lines.forEach(function(line){
topchr = line.substring(0,1);
if( topchr=='・' ){
if(block!=''){
buff += '<div style="margin-left:20px;">'+block+'</div></li>'+"\n";
}
buff += '<li><b>'+line.substring(1)+'</b>'+"\n";
block = '';
}else{
if(buff!=''){
block += line+"\n";
}
}
});
if(block!=''){
buff += '<div style="margin-left:20px;">'+block+'</div></li>'+"\n";
block = '';
}
if(buff!=''){
buff = '<ul style="">'+"\n"+buff+'</ul>'+"\n";
}
data = before + buff + after;
textarea.value = data;
}
}
}
</script>
?>
add_action('admin_print_footer_scripts', 'add_my_quicktag');



カーソルの位置の前後を調べてタグならば、対応するタグまで文字列を選択する

なければなくても問題のない処理なんですが、文章が長くなった時、投稿をスクロールさせて対応するブロックまでを探すのは案外ストレスです。

そこで、カーソルの次の文字列がタグなら、それに対応するエンドタグまでの文字列を選択します。
同様に、カーソルの次の文字列がタグでなく、カーソルの前にエンドタグを見つけた場合対応するタグまで選択します。

<ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>|

/ul タグの後ろにカーソルを置いてボタンを押したら ul までの範囲を選択。

<ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
|

また、

|<blockquote><ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
</blockquote>

blockquoteの前にカーソルを置いてボタンを押したら /blockquote までを選択

|<blockquote><ul>
<li>~~~
~~~</li>
<li>~~
~~~
~~~~
</li>
</ul>
</blockquote>

これも案外便利です。インストール方法は前述のとおり、functon.php にいれてもいいし、プラグインにしてもOK.

function add_my_quicktag() {?>
<script type="text/javascript">
//ボタンを追加する シンボル:lib 表示:(li)
QTags.addButton('rng', '>|<', rangefunction);
function rangefunction(f, g, fd){
rangefunction_set();
}
function rangefunction(){
var textarea = document.getElementById("content");
var sentence = textarea.value;
if(textarea.selectionStart==textarea.selectionEnd){
// Advance
if( sentence.substr(textarea.selectionStart,1)=='<' ){
spp = sentence.indexOf( ' ', textarea.selectionStart+1 );
edp = sentence.indexOf( '>', textarea.selectionStart+1 );
if( spp!=-1 && edp!=-1 ){
if(spp>edp){
spp = edp;
}
tagmrk = sentence.substr(textarea.selectionStart+1,spp-1-textarea.selectionStart);
srctag = '</' + tagmrk + '>';
//alert('tag='+tagmrk+' src='+srctag+' spp='+spp);
edp = sentence.indexOf( srctag, spp);
if( edp!=-1 ){
//textarea.selectionEnd = edp+srctag.length;
spp = textarea.selectionStart;
edp = eval(edp)+eval(srctag.length);
textarea.focus();
textarea.selectionEnd = edp;
//textarea.setSelectionRange(spp, edp);
alert('spp='+spp+' edp='+edp+' str='+sentence.slice(spp,edp) );
}
}
//Recession
}else if( sentence.substr(textarea.selectionStart-1,1)=='>' ){
snp = '';
edp = textarea.selectionStart;
for(spp=textarea.selectionStart-1;spp>=0;spp--){
if( sentence.substr( spp, 2 )=='</' ){
tagmrk = sentence.slice( spp+2 , edp-1 );
srctag = '<'+tagmrk;
srclen = srctag.length;
//alert('tagmrk='+tagmrk+' srctag='+srctag+' srclen='+srclen+' spp='+spp);
for(spp--;spp>=0;spp--){
if( sentence.substr( spp, srclen )==srctag ){
textarea.focus();
textarea.selectionStart = spp;
textarea.selectionEnd = edp;
return;
}
}
}
}
}
}
}
</script>
?>
add_action('admin_print_footer_scripts', 'add_my_quicktag');




スポンサーリンク

関連記事

スポンサーリンク

カテゴリー