web関連tips備忘録

| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |

バージョンアップに備えて-カスタムmedia.phpの改変2


ver3.15を使いはじめて間もなくメディアファイルの削除や表示ができないことに不便を感じ、media.phpを多くの箇所をいじり回しカスタマイズしてあったが、どこをどうカスタマイズしたかメモっていなかったため、ver3.15からver3.2→ver3.21へとバージョンアップする際、往生した。

バージョンアップの度に、media.phpをいじくり回すのは大変なので、次のバージョンアップの時はバージョンアップ元のmedia.phpを上書きして使用することにした。

media-tocu2.zip
バージョンアップした
カスタムmedia.phpの改変3を使用するようにして下さい。
既存のmedia.phpに追加した機能
  1. アップロードしたファイルの削除
  2. アップロードしたファイルのサムネイルの作成 元画像がサムネイル画像サイズ(w130×h100)より大きい時だけ作成する(media-tocu)。 media-tocu2で元画像サイズに関係なく作成するように変更。
  3. 作成したサムネイル画像の一覧表示
  4. アップロードしたファイルの名前の変更

ご利用は全て自己責任でお願いします。
NuCleus 2005-07-05(火) 19:52:21 - kei - TrackBacks

プレビュー機能をIE以外のブラウザーにも設定する方法


カスタマイズするファイル

  1. blog/nucleus/libs/PAGEFACTORY.php
    315行目当たりにあるfunction parse_jsbuttonbar($extrabuttons = "")内の
    switch($CONF['DisableJsTools'])の case 0:にある下記のコードをcase 2:にコピーします。

      case "preview":
      this->_jsbutton('preview',"showedit()",_ADD_PREVIEW_TT);
      break;

  2. IE以外ではプレビューしたときのレイアウトが崩れるため、
    blog/nucleus/libs/include/admin-add.template と
    blog/nucleus/libs/include/admin-edit.template
    をカタマイズして、レイアウトを統一します。
    37行目当たりにある<%text(_ADD_PREVIEW)%>関連エリアをコメントアウトして下記のコードを挿入します。
      挿入文:

      <tr>
      <td>
      <%text(_ADD_BODY)%> <%helplink(additem)%>
      </td>
      <td>
      <%jsbuttonbar(media+preview)%>
      <textarea
      <%jsinput(body)%>
      tabindex="20"
      cols="80"
      rows="20"><%contents(body)%></textarea>
      </td>
      </tr>
      コメントアウト文:
      <!--tr id="edit" style="display:none;">
      <td><%text(_ADD_PREVIEW)%></td>
      <td><b><span id="prevtitle"></span></b><br />
      <span id="prevbody"></span><br />
      <span id="prevmore"></span><br />
      </td>
      </tr--><tr>

      ついでに、IEではエディターの横幅が狭すぎて記事の作成や編集がし難いので横幅を拡げます。
      <textarea
      <%jsinput(body)%>
      tabindex="20"
      cols="60"
      rows="20"><%contents(body)%></textarea>
      となっているところが2か処ありますので、cols="60"をcols="80"やcols="100%"に好みに応じて編集します。

NuCleus 2005-07-03(日) 08:25:08 - kei - TrackBacks

アイテムの追加・編集エディタに機能追加したまとめ


a. HTML特殊文字のコンバート機能
b. 書式
1. リスト形式、番号付きリスト形式、見出しリスト形式を追加
2. 段落
3. 見出し
4. 見た目表示
5. 引用
6. 行間
7.ブロックの背景色

c. 文字
1. フォントサイズ
2. フォントカラー
3. 打ち消し線
4. アンダーライン
5. 文字等の背景色

カスタマイズしたファイル
blog/nucleus/libs/PAGEFACTORY.php


303行目、function parse_jsbuttonbar($extrabuttons = "")内の global $CONF;
の下に下記を追記
//2005.6.24 kei append
echo'
<div><span class="help">文の書式</span>
<select id="format" onchange=\'formatThis(this.options[this.selectedIndex].value);\'>
<option value="" selected="selected">clickで選択→</option>
<option value="p">段落</option>
<option value="h1">見出し 1</option>
<option value="h2">見出し 2</option>
<option value="h3">見出し 3</option>
<option value="pre">見た目表示</option>
<option value="blockquote">引用</option>
</select>
文字のサイズ
<input type="text" value="3" name="size" size="2" onchange="fontSizeThis(this.value);">2~8程度
 行間
<input type="text" name="line" size="2" onchange="lineHeightThis(this.value);">
</div>
';
$url = "http://".$_SERVER['HTTP_HOST']."/blog/nucleus/javascript/colorPallet.php";


function parse_jsbuttonbar($extrabuttons = "")内のswitch($CONF['DisableJsTools'])のcase "0"、および case "2": に下記を追記
$this->_jsbutton('entities',"entitiesThis()","特殊文字変換");
$this->_jsbutton('fontcolor',"openpallet('http://toc.tocu.co.jp/blog/nucleus/javascript/colorPallet.php')","文字色");
$this->_jsbutton('negation',"negationThis()","打ち消し文字");
$this->_jsbutton('underline',"underlineThis()","アンダーライン");
$this->_jsbutton('bgcolor',"openpallet('$url?key=bgcolor')","文字等の背景色");
$this->_jsbutton('blockcolor',"openpallet('$url?key=divbgcolor')","ブロックの背景色");

$this->_jsbutton('ullist',"ullistThis()","リスト形式");
$this->_jsbutton('nolist',"nolistThis()","番号付きリスト形式");
$this->_jsbutton('dtlist',"dllistThis()","見出しリスト形式");

blog/nucleus/javascript/edit.js


//2005.6.24 kei append

function openpallet(url){
colorcode = window.open(url,'_blank', 'toolbar=no, location=no, status=no, menubar=no, scrollbar=no, width=194, height=200');
}

function boldThis() { insertAroundCaret('<b>','</b>'); }

function fontcolorThis(code) { insertAroundCaret('<font color='+code+';>','</font>'); }

function bgcolorThis(code) { insertAroundCaret('<span style="background-color:'+code+';>','</span>'); }

function blockcolorThis(code) { insertAroundCaret('<div style="background-color:'+code+';>','</div>'); }

function negationThis() { insertAroundCaret('<s>','</s>'); }

function underlineThis() { insertAroundCaret('<u>','</u>'); }

function ullistThis() { insertAroundCaret('<ul>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n','</ul>\n'); }

function nolistThis() { insertAroundCaret('<ol>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n','</ol>\n'); }

function dllistThis() { insertAroundCaret('<dl>\n <dt> \n</dt>\n <dd> \n</dd>\n <dt> \n</dt>\n <dd> \n</dd>\n','</dl>\n'); }

function fontSizeThis(code) { insertAroundCaret('<font size='+code+'>','</font>\n'); }

function lineHeightThis(code) { insertAroundCaret('<span style=\"line-height:'+code+'px\">','</span>\n'); }

function formatThis(code) { insertAroundCaret('<'+code+'>','</'+code+'>\n'); }
//function This() { insertAroundCaret('<>','</>'); }

//HTML特殊文字変換 &, < , >
function entitiesThis() { entitiesCaret('<', '>'); }

function entitiesCaret (textpre, textpost) {
var textEl = lastSelected;

if (textEl && textEl.createTextRange && lastCaretPos) {
//MS IEの場合
var caretPos = lastCaretPos;
caretPos.text = caretPos.text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
} else if (!document.all && document.getElementById) {
//Firefox等 mozilla系の場合
var txtarea = document.getElementById('input' + nonie_FormType);
text = getCaretText();
newtext = text.replace(/&/g, '&').replace(/</g, '<').replace(/>/g, '>');
mozeEntitesReplace(txtarea, newtext);
} else {
//konquerorの場合の一時しのぎ<( '<' )と<( '>' )を文末に付け足す
document.getElementById('input' + nonie_FormType).value += textpre +' '+ textpost;
}
updAllPreviews();
}

function mozeEntitesReplace(txtarea, newText) {
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd==1 || selEnd==2) selEnd=selLength;
var s1 = (txtarea.value).substring(0,selStart);
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + newText + s3;
}


新たに作成したファイル:
文字コード取り出し用のカラーパレットとアイコン用gifファイル


カラーパレット:blog/nucleus/javascript/colorPallet.php
アイコン用gifファイル:blog/nucleus/images内に下記を作成してアップロードした
button-entities.gif、button-ullist.gif、button-nolist.gif、button-dtlist.gif、
button-fontcolor.gif、button-negation.gif、button-underline.gif、button-bgcolor.gif、
button-bgcolor.gif



NuCleus 2005-06-27(月) 16:54:29 - kei - TrackBacks

エディタに各種リスト形式機能ボタン追加


アイテムの追加・編集エディタに
リスト形式、番号付きリスト形式、見出しリスト形式を追加

  1. blog/nucleus/libs/PAGEFACTORY.phpの315行目当たりにあるfunction parse_jsbuttonbar($extrabuttons = "")内の
    switch($CONF['DisableJsTools'])の case 0:およびcase 2:に下記のコードを挿入します。case 0、case 2内なら場所はどこでも良い
    $this->_jsbutton('ullist',"ullistThis()","リスト形式");
    $this->_jsbutton('nolist',"nolistThis()","番号付きリスト形式");
    $this->_jsbutton('dtlist',"dllistThis()","見出しリスト形式");


  2. blog/nucleus/javascript/edit.jsに下記のコードを挿入します。独立したファンクションとしてなら場所はどこでも良いですが、コアファイルのバージョンアップの際に苦労しないよう最後尾に追加します。
    function ullistThis() { insertAroundCaret('<ul>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n','</ul>\n'); }
    function nolistThis() { insertAroundCaret('<ol>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n<li> \n</li>\n','</ol>\n'); }
    function dllistThis() { insertAroundCaret('<dl>\n <dt> \n</dt>\n <dd> \n</dd>\n <dt> \n</dt>\n <dd> \n</dd>\n','</dl>\n'); }
    </ol>

  3. それぞれのアイコンを作成してblog/nucleus/imagesにアップロードして完了
    button-ullist.gif:リスト形式
    button-nolist.gif:番号付きリスト形式
    button-dtlist.gif:見出しリスト形式


NuCleus 2005-06-27(月) 07:14:08 - kei - TrackBacks

エディタにHTML特殊文字のコンバート機能ボタン追加


アイテムの追加・編集
エディタに機能ボタン追加
を参考にIEに加え、Firefoxでも変換できるようにします。
手順
1. blog/nucleus/libs/PAGEFACTORY.phpの315行目、function parse_jsbuttonbar($extrabuttons = "")内の
case 0:
$this->_jsbutton('bold',"boldThis()",_ADD_BOLD_TT ." (Ctrl + Shift + B)");の上(case 0:内ならどこでも良い)下記のコードを挿入します。

$this->_jsbutton('entities',"entitiesThis()","特殊文字変換");

同じコードを case2: にも追記します。350行目当たり。
case 2:
$this->_jsbutton('bold',"boldThis()",_ADD_BOLD_TT ." (Ctrl + Shift + B)");の上(case 2:内ならどこでも良い)下記のコードを挿入します。

$this->_jsbutton('entities',"entitiesThis()","特殊文字変換");

2. blog/nucleus/javascript/edit.jsの108行目当たり(本当は、どこでも良い)、function boldThis() { insertAroundCaret('',''); }の下に下記のコードを挿入します。

function entitiesThis() { entitiesCaret('&lt;', '&gt;'); }

つづいて、entitiesCaret()ファンクションを259行目当たりにある function insertAroundCaret (textpre, textpost) の下(本当は、どこでも良い)に新設します。

// the selected text to entities

function entitiesCaret (textpre, textpost) {
  var textEl = lastSelected;

if (textEl && textEl.createTextRange && lastCaretPos) {
var caretPos = lastCaretPos;
caretPos.text = caretPos.text.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
} else if (!document.all && document.getElementById) {
var txtarea = document.getElementById('input' + nonie_FormType);
text = getCaretText();
newtext = text.replace(/&/g, '&').replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;');
mozeEntitesReplace(txtarea, newtext);
} else {
//konquerorの場合の一時しのぎ&lt;( '<' )と&lt;( '>' )を文末に付け足す
document.getElementById('input' + nonie_FormType).value += textpre + textpost;
}

updAllPreviews();
}

更に、313行目当たりにあるfunction mozReplace()ファンクションを参考にしてmozeEntitesReplace()ファンクションを新設します。

function mozeEntitesReplace(txtarea, newText) {
var selLength = txtarea.textLength;
var selStart = txtarea.selectionStart;
var selEnd = txtarea.selectionEnd;
if (selEnd==1 || selEnd==2) selEnd=selLength;
var s1 = (txtarea.value).substring(0,selStart);
var s3 = (txtarea.value).substring(selEnd, selLength);
txtarea.value = s1 + newText + s3;
}


3. アイコンbutton-entities.gifを適当に作って blog/nucleus/imagesにアップして完了です。

button-entities.gif:HTML特殊文字のコンバート機能

以上。
コアファイルのカスタマイズは、バージョンアップする際に往生します。なんとか対応を考えねば・・・
NuCleus 2005-06-24(金) 20:14:42 - kei - TrackBacks
| 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 |
LINK