記事一覧

Web Diary Pro にタグエディタをつける

※初版:2006/4/18
  改定:2006/4/24 「ネタバレ」ボタンの追加方法
  改定:2006/5/16 ネタバレ短文用・長文用の追加方法&サンプル設置
  改定:2006/5/28 説明を変更、挿入タグが全てこのページで見れるようにした

このサイトはWeb Libertyさんの「Web Diary Professional」を使用しています。
普通のブログものと違いテンプレートをHTMLでいじれるため
とても外見のカスタマイズがしやすいのですが、
レンタルブログにあるようなタグエディタが付いておりません。
直タグ打ちも面倒になってきたので、フォーム部分のスキンに
タグエディタを追加することにしました。

参考にしましたスクリプト元のmugiさん、Raelianさん
ありがとうございました。

参考≫
nicky!用 タグ入力支援機能強化版(2005/9/5版)
Mugi's Homepage

■タグ支援入力ボタンの追加法■

1.「skin>admin_form.html」を開く

2.ソース内の最初の部分(<--SKIN_FORM_START-->すぐ下)に
 ↓のスクリプトを全てコピー&ペースト。(著作権は消さないように!)

<script type="text/JavaScript">
/* Script written by Mugi (mugi@wa2.so-net.ne.jp) */
/* 2nd Edition by Raelian(2005/02/10)-(2005/08/15) */
/* http://painter.mypets.ws/~raelian/tag/enclose.html */
/* 3rd Customize by Narusawa(2005/08/16) */
/* http://caelum.skr.jp/ */
var sel_length, end_length=0, start_length=0;
var bl=0;
var el=null;
function get_pos(d){
if( bl != 1 && bl != 2 ) return;
if( d ){ el=d; }else{ return; }
var ret=0;
if( bl==1 ) {
var sel=document.selection.createRange();
if( !sel ) return;
sel_length = sel.text.length;
var r=d.createTextRange();
var all=r.text.length;
r.moveToPoint(sel.offsetLeft,sel.offsetTop);
r.moveEnd("textedit");

end_length=r.text.length;
start_length=all-end_length;
} else if( bl==2 ) {
start_length=d.selectionStart;
end_length=d.value.length - d.selectionEnd;
sel_length=d.selectionEnd-start_length;
}
}

function atach_focus(ln){
if( bl == 1 ){
var e=el.createTextRange();
var tx=el.value.substr(0, ln);
var pl=tx.split(/¥n/);
e.collapse(true);
e.moveStart("character",ln-pl.length+1);
e.text=e.text+"";
e.collapse(false);
e.select();
} else if( bl == 2 ){
el.setSelectionRange(ln, ln);
}
el.focus();
}

function enclose(s, e){
if( !el ){
if( bl != 1 && bl != 2 ){
el=document.getElementById("Message");
}else{
return;
}
}

var flag2=0;

if( bl == 1 ){
var sel=document.selection.createRange().text;
if( sel ){
var len1, len2, lens, dat;
dat=el.createTextRange().text;
len1=dat.length;
lens=sel.length;
if( len1 != lens ){
document.selection.createRange().text=sel;
len2=el.createTextRange().text.length;
}
document.selection.createRange().text=s+sel+e;
if( len1 != len2 && len1 != lens ){
document.selection.createRange().text+="¥n";
}
flag2=1;
}
}
if( bl == 4 || bl == 3 ){
var str=document.getElementById("Message").value;
document.getElementById("Message").value=str+s+e;
} else if( bl && flag2 == 0 ){
var itext=el.value;
var click_s=itext.substr(0, start_length);
var click_m=itext.substr(start_length, sel_length);
var click_e=itext.substr(start_length+sel_length, end_length);
el.value=click_s + s + click_m + e + click_e;
}

atach_focus(s.length+e.length+start_length+sel_length);
}

function convert(s, e){
if( !el ) return;
if( (bl!=1) && (bl!=2) ){
el.focus();
return;
}

if( bl == 1 ){
var flag=0;
var sel=document.selection.createRange().text;
if( sel ){
var len1=el.createTextRange().text.length;
document.selection.createRange().text=sel;
var len2=el.createTextRange().text.length;
if( len1 != len2 ){
flag = 1;
}
var cnv = sel.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
document.selection.createRange().text=cnv;
if( flag ){
document.selection.createRange().text+="¥n";
}
}
}else{
var itext=el.value;
var click_s=itext.substr(0, start_length);
var click_m=itext.substr(start_length, sel_length);
var click_e=itext.substr(start_length+sel_length, end_length);
var cnv = click_m.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;");
el.value=click_s + cnv + click_e;
}
atach_focus(start_length+cnv.length);
}
function fstins(af){
if( !el ) return;
if( (bl!=1) && (bl!=2) ){
el.focus();
return;
}

if( bl == 1 && start_length < 0 ){
var flag=0;
var sel=document.selection.createRange().text;
if( sel ){
var len1=el.createTextRange().text.length;
document.selection.createRange().text=sel;
var len2=el.createTextRange().text.length;
if( len1 != len2 ){
flag = 1;
}
var cnv=sel.replace(/¥n/g, "¥n"+af);
document.selection.createRange().text=cnv;
if( flag ){
document.selection.createRange().text+="¥n";
}
}
}else{
var itext=el.value;
if( start_length ){
if( itext.substr(start_length-1,1) == "¥n" ){
start_length--;
}
}
var click_s=itext.substr(0, start_length);
var click_m=itext.substr(start_length, sel_length);
var click_e=itext.substr(start_length+sel_length, end_length);
var sel = click_m.replace(/¥n/g, "¥n"+af);
if( start_length==0 ){
sel=af + sel;
}
el.value=click_s + sel + click_e;
}
atach_focus(start_length+sel.length);
}

var tmstr=0;
function gettmstr(){
var tmn=new Date();
var tms=tmn.getTime();
if( tmstr == tms ){
tms++;
}
tmstr=tms;
}
function neta_btn(){
gettmstr();
var s1='<input class="nbtn" type="button" name="nothing" value="ネタバレ" onclick="sfield_view('+"'"+tmstr+"'"+');return false;"><div id="'+tmstr+'" class="sfield">';
enclose(s1, "</div>");
}
function neta_link(){
gettmstr();
var s1='<a href="#" onclick="sfield_view('+"'"+tmstr+"'"+');return false;">ネタバレ</a><div id="'+tmstr+'" class="sfield">';
enclose(s1, "</div>");
}
</script>

3.本文用フォームを次のように書き換える。

<dt>本文</dt>
<dd><textarea name="text" cols="70" rows="20">
  ↓
<dt>本文</dt>
<dd><textarea name="text" cols="70" rows="20" id="Message"
onfocus="get_pos(Message);" onmouseup="get_pos(Message);"
onkeyup="get_pos(Message);"
>

4.本文用フォームのすぐ後ろ(</textarea></dd>のあと)に、
  ↓のソースをコピー&ペースト。
  (フォーム前にいれると動作に微妙に支障あり)

<dt>タグ支援</dt>
<dd>
<!-- 太文字・小文字など -->
<input type="button" name="strong" value="strong( b )" onclick="enclose('<strong>', '</strong>');return false;">
<input type="button" name="em" value=" em( i ) " onclick="enclose('<em>', '</em>');return false;">
<input type="button" name="del" value=" del( s ) " onclick="enclose('<del>', '</del>');return false;">
<input type="button" name="u" value=" u " onclick="enclose('<u>', '</u>');return false;">
<input type="button" name="small" value="small" onclick="enclose('<small>', '</small>');return false;">
<!-- 太文字・小文字ここまで -->

<!-- span / size / color ここから -->
<input type="button" name="spanbtn" value="span" onclick="enclose('<span style=&quot;font-size:' + spansize.options[spansize.selectedIndex].value + 'px;color:' + spancol.options[spancol.selectedIndex].value+';&quot;>', '</span>');return false;">
<select id="spansize" name="spansize">
<option value="10">10px</option><option value="11">11px</option>
<option value="12">12px</option><option value="13">13px</option>
<option value="14">14px</option><option value="15">15px</option>
<option value="16">16px</option><option value="17">17px</option>
<option value="18">18px</option>
</select>
<select id="spancol" name="spancol">
<option value="Fuchsia">Fuchsia</option><option value="Purple">Purple</option>
<option value="Red">Red</option><option value="Maroon">Maroon</option>
<option value="White">White</option><option value="Gray">Gray</option>
<option value="Silver">Silver</option><option value="Black">Black</option>
<option value="Aqua">Aqua</option><option value="Teal">Teal</option>
<option value="Blue">Blue</option><option value="Navy">Navy</option>
<option value="Yellow">Yellow</option><option value="Olive">Olive</option>
<option value="Lime">Lime</option><option value="Green">Green</option>
</select>
</dd>
<!-- span / size / color ここまで -->

<!-- ここからhref -->
<dt> </dt>
<dd>
<script type="text/JavaScript">
function add_tag_href(){
var d=document;
var str_title=d.getElementById('h2t').value;
var str=str2="";

if( str_title ){
str=' title="' + str_title + '"';
}
if( d.getElementById('h2g').checked == true ){
str2=' target="_blank"';
}
enclose('<a href="' + d.getElementById('href2').value + '"' + str + str2 + '>', '</a>');
}
</script>
<input type="button" name="hrefbtn" value=" a href "
onclick="add_tag_href();return false;">
<input type="text" name="href2" id="href2" value="http://">
title<input type="text" name="h2te" id="h2t" value="">
target<input type="checkbox" name="h2g" id="h2g" value="h2g" checked>
</dd>
<!-- hrefここまで -->

<!-- ここからimg -->
<dt> </dt>
<dd>
<script type="text/JavaScript">
function add_tag_img(){
var str_width=document.getElementById('imgwidth').value;
var str1="";
if( str_width ){
str1=' width="' + str_width + '"';
}

var str_height=document.getElementById('imgheight').value;
var str2="";
if( str_height ){
str2=' height="' + str_height + '"';
}

var str_alt=document.getElementById('imgalt').value;
var str3="";
if( str_alt ){
str3=' alt="' + str_alt + '"';
}
enclose('<img src="' + document.getElementById('imghref').value + '"' + str1 + str2 + str3 + '>', '');
}
</script>
<input type="button" name="imgbtn" value=" img "
onclick="add_tag_img();return false;">
<input type="text" name="img" id="imghref" value="http://">
width<input type="text" name="imgwidth" id="imgwidth" size="4" value="">
height<input type="text" name="imgheight" id="imgheight" size="4" value="">
alt<input type="text" name="imgalt" id="imgalt" value="">
</dd>
<!-- imgここまで -->

<!-- タグ変換ここまで -->
<dt> </dt>
<dd>
<input type="button" name="cnv" value=" < >を&amp;lt;&amp;gt;に変換 " onclick="convert();return false;">
<input type="button" name="fins" value=" 行頭に # を挿入 " onclick="fstins('# ');return false;">
<input type="button" name="fins" value=" 行頭に&amp;gt;を挿入 " onclick="fstins('&amp;gt;&amp;nbsp;');return false;"></dd>
<!-- タグ変換ここまで -->

<!-- ネタバレボタン用 -->
<dt> </dt>
<dd>
<input type="button" value="ネタバレ(ボタン)" onclick="neta_btn();return false;">
<input type="button" value="ネタバレ(リンク)" onclick="neta_link();return false;">
</dd>
<!-- ネタバレボタン用ここまで -->

<script type="text/JavaScript">
if( String("jadge") ){
bl=3;
} else if( document.getElementById ){
bl=4;
}
if( document.getElementById("Message").setSelectionRange ){
bl=2;
} else if( document.selection.createRange ){
bl=1;
}
</script>

以上でタグ入力支援用のボタンが生成されているはずです。
使い方や不具合については、上記参照ページの説明を参考にしてください。

■ネタバレボタンの作り方■ …タグエディタ実装後に追加可能

ネタバレリンク。説明の折りたたみにも。≫

このようにリンクでも隠すことが出来ます。
「続きを読む」の別バージョンのようにも使えるかも。

こんなやつです。

1.上記の手順でタグ入力支援の実装を済ませる。

2.「skin>header.html」を開き、<head>~</head>内に以下を追加。

<!-- 以下ネタバレ用 -->
<style type="text/css">
.sfield{
display:none;
border:solid 1px #888;
background:#eee;
padding:1em;
margin-top:1em;
}
.nbtn{ background:#eee; border:double 3px #000; }
</style>

<script type="text/JavaScript">
function sfield_view(id){
if( document.getElementById(id).style.display != "block" ){
document.getElementById(id).style.display="block";
}else{
document.getElementById(id).style.display="none";
}
}
</script>
<noscript>
<style type="text/css">
.sfield{ display:block; background:#eee; color:#eee; }
</style>
</noscript>
<!-- ネタバレ用ここまで -->

以上でOKです。
他にも短文用・長文用のネタバレボタンがありますが、
また追加方法が違うので下記で簡単に説明します。

ネタバレ短文用もこのように追加できます。

1.ネタバレボタンの実装を済ませる。

2.「skin>header.html」を開き、こちらの説明の「2」の内容を
  ネタバレ用スクリプトの最後(</script>の直前)に入れる。

3.「skin>admin_form.html」を開き、上記説明の「3」の内容を
  <--SKIN_FORM_START-->すぐ下に入れたスクリプトの最後
  (</script>の直前)に入れる。

4.タグ支援&ネタバレ生成ボタンを置いたところ(本文入力フォーム)の側に
  「3」の2つめのタグをペースト。

ネタバレ長文用のサンプル。このようになります。
「閉じる」ボタンが文章の最後につくので、沢山のネタバレを作っても
ひとつづつが見やすくなります。

ネタバレ長文リンク。アレンジver ≫

ボタンでなくすには少し改造が必要ですが、解説必要でしょうか?
ご要望がありましたら書いてみようと思います。

↑実装の仕方は短文用のものとほとんどかわりません。
こちらの説明を参考に、各スキンにスタイル設定やタグを
入れてください。

以上でOKです。
テンプレートを弄るのでHTMLのタグ弄りに
ある程度慣れていると良いかと。
参照ページの解説ほぼそのままでいけますので、
特に自分で改造を加えたところはありません。

トラックバック

この記事のトラックバックURL
http://brutzero.s22.xrea.com/rb/diary-tb.cgi/32

TRACKBACK

ようやく実装 from 迷える子羊
Right Bowerさんで紹介されていたタグ入力支援ボタン。前々からタグ打ちめんどくせーな…と思いつつ、実装するのも面倒だなーという体たらくでなかなか取り掛かれなかったのですが、よ...
2006/10/19(木)14時54分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/07/31(木)02時07分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2014/11/22(土)18時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/22(木)05時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/22(木)05時40分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/23(金)02時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/24(土)09時24分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/25(日)00時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/25(日)00時56分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/25(日)15時11分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/26(月)20時41分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/29(木)01時46分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)15時15分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)18時15分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)18時15分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)19時51分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)19時51分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)22時44分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/30(金)22時44分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/01/31(土)07時43分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/03(火)01時14分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/03(火)01時41分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/07(土)08時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/07(土)08時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/07(土)08時18分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/07(土)08時19分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/07(土)08時20分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)04時52分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)06時34分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)06時35分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)09時27分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/09(月)09時37分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/10(火)08時15分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/18(水)18時29分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/20(金)23時12分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/23(月)05時10分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/25(水)10時08分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/02/28(土)06時57分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/17(火)01時33分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/17(火)01時36分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/29(日)00時31分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/03/30(月)14時42分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/08(水)19時36分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/15(水)01時37分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/18(土)03時37分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/19(日)17時12分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/04/20(月)20時36分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/05/06(水)19時43分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/06/28(日)04時21分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/09/16(水)07時00分 受信
未承認 from 未承認
管理者に承認されるまで内容は表示されません。
2015/09/21(月)02時36分 受信