LifeType 中文開發論壇

您好，我最近在研究tinymce，然後我發現了http://ajer001.blog.twntwn.info/post/1/533，這篇中，是由Mark(一位幫了我非常多的前輩)，所寫的編輯器，用來取代pLog 原本使用的 WYSIWYG 編輯器，這個是用於"版主發言時"，而http://reic.twbbs.org/post/1/161，這篇，也是tiny mce編輯器，不一樣的是這邊是用於"迴響者"，所以都需要的人可以參考一下，但是我有個問題就是關於用於迴響的那個tinymce，是沒辦法直接貼圖，我之前問了，有前輩回答我要看tinymce的核心，所以我比對了Markwu的tinymce發現在設定的js中，valid_elements是允許使用的語法，所以我打算把img[class|src|border=0|alt|title|hspace|vspace|width|height|align]，加入迴響的那個設定，確發現他本來就有了，這樣我就不知道該怎麼辦了，請問一下有會的人可以教我嗎?謝謝!

---

我的主機基本資料如下
Operating system:FERORA CORES
Apache version:2.4.0
PHP version:5
MySQL version:4.0.22-standard

Hi

那個tinymce不是mark寫的啦，是mrak預定用來取代原本的htmlarea。

您不能把圖貼再迴響
是因為後台預設並沒有允許<img>的語法使用

請到「後台」-->「全域設定」的
html_allowed_tags_in_comments
在發表迴響評論時可以使用的HTML語法標籤。
加上你想要允許的語法，例如<img>
就可以順利貼圖了

您好，在http://forum.lifetype.org.tw/index.php?topic=1441.0，這篇lss 總版主回說因為我打開了tinymce所以不能直接貼，所也在全域那邊設過了但是還是不能!但是TinyMCE 的線上說明我看不懂，請問一下有人懂嗎?謝謝!

你先把你加入 postandcomments.template 的 tinymce 相關 javascript 模貼出來，我們再幫你看看要如何處理吧！例如，我們不知道你是用 simple theme 還是 advanced theme ？那要怎麼告訴你。那句話的意思是要請人開課嗎？如果是，你可以參考一下阿駕板主的「修改 TinyMCE 編輯器的按鈕 (http://ajer001.blog.twntwn.info/post/1/535)」這篇文章，和我的「 pLog-TinyMCE-1.0.2-full Part III  (http://blog.nlhs.tyc.edu.tw/post/2/23)」這篇文章。

加油吧！

你的 html_allowed_tags_in_comments 這邊是怎麼設定的呢？可以貼出你的設定嗎？

Mark

這是我的html_allowed_tags_in_comments ，<a><em><br><br/><strong><u><strike><blockquote><img>，兒下面是我的postandcomments
{include file="$blogtemplate/header.template"}
{assign var="postDate" value=$post->getDateObject()}
{assign var="postOwner" value=$post->getUserInfo()}
{include file="$blogtemplate/panel.template"}
      {assign var=nextpost value=$post->getNextArticle()}
      {assign var=prevpost value=$post->getPrevArticle()}
         <div id="Article_body">
            <p align="center">
            {if $prevpost == true}
                <a href="{$url->postPermalink($prevpost)}" title="{$locale->tr("previous_post")}: {$prevpost->getTopic()}">&laquo; {$locale->tr("previous_post")}</a> |
            {/if}
            {if $nextpost == true}
                <a href="{$url->postPermalink($nextpost)}" title="{$locale->tr("next_post")}: {$nextpost->getTopic()}">{$locale->tr("next_post")}&raquo;</a>
            {/if}
            </p>
{include file="$blogtemplate/post.template"}

{if $blogsettings->getValue("comments_enabled") && $post->getCommentsEnabled()==1}
           <div id="commons"><a name="Add_commons"></a>{$locale->tr("add_comment")}</div>
{include file="$blogtemplate/commentform.template"}
{/if}

{* show comments *}
{foreach name=comment from=$comments item=comment}
            <div id="common_head"><img src="{$url->getTemplateFile("images/comment_icon1.gif")}" alt="commons icon" /><a name="{$comment->getId()}"></a>
               [{$smarty.foreach.comment.total-$smarty.foreach.comment.iteration+1}]
               {$comment->getTopic()} [<a href="{$url->postPermalink($post)}#NewComment"> {$locale->tr("reply")} </a>]</div>
            <div id="common_main">{$comment->getText()}</div>
            <div id="common_footer">
               {$locale->tr("posted_by")}
               {if $comment->getUserUrl() != ""}
                  <a href="{$comment->getUserUrl()}"}>{$comment->getUsername()}</a>
               {else}
                  {$comment->getUsername()}
               {/if}
               |{assign var=commentDate value=$comment->getDateObject()}
               {$locale->formatDate($commentDate, "%d/%m/%Y, %H:%M")}
            </div>
{/foreach}
         </div>
{include file="$blogtemplate/footer.template"}

我看了那兩篇文章，發現寫的很詳細，很謝謝，但是那好像都是在改"版主"的tintmce，但是我現在想改的是"迴響者"的tinymce，因為我發現不能直接貼圖真的是很不方便，更別說是其他多媒體檔案了，我想照http://ajer001.blog.twntwn.info/post/1/535的方法修改但是兩者的檔案都不一樣，所以我沒辦法自行嘗試，另外我不知道怎麼分辨simple theme和advanced theme，可以請你告訴我嗎?謝謝!

有很多東西沒有足夠的中文文件時，讀英文文件是必需的，尤其文件還說的很清楚。
 :-(  :-|  :'(

你應該要給我們的樣版檔，是寫回響的 commentform.template ，你當初就是把 tinymce 的相關 javascript 程式寫在這裡，應該不會不知道吧！
把紅色的部份加上去，就可以在你的 tinymce 工具列後面加上一個插入圖檔的按鈕。試試吧！

Hi lss:

uranusforever 的問題是『無法貼圖』還是『無法出現貼圖的按鈕』，這兩個好像是不一樣的啊。 :-P

所以是我誤會他的意思了嗎？ :-$

Mark

他的意思應該是「在 tinymce 的回響編輯器裡面無法用 <img src="..."> 貼圖(參考這裡 (http://forum.lifetype.org.tw/index.php?topic=1441.msg8467#msg8467))！所以我這樣 (http://forum.lifetype.org.tw/index.php?topic=1441.msg8487#msg8487)告訴他，讓他看文件加上插入圖片的按鈕。

兩位，抱歉可能是我說的不夠清楚，其實兩種方法都可以，但是我都試不成功，下面是我的commentform，

            <div id="common_form">
               <form id="NewComment" action="{$url->getBaseUrl()}/index.php" method="post">
                  <span class="text_form">{$locale->tr("comment_username")}:</span><input name="userName" type="text" size="35"/><br />
                  <span class="text_form">{$locale->tr("comment_topic")}:</span><input name="commentTopic" type="text" size="35" /><br />
                  <span class="text_form">{$locale->tr("comment_url")}:</span><input name="userUrl" type="text" size="35" /><br />
                  <span class="text_form">{$locale->tr("comment_email")}:</span><input name="userEmail" type="text" size="35" /><br />
                  {$locale->tr("add_comment")}<br />

<script language="javascript" type="text/javascript" src="{$url->getBaseUrl()}/js/tiny_mce/tiny_mce.js"></script>
{literal}
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
language : "zh_tw",
theme_advanced_buttons1_add : "image"
});
</script>
{/literal}

                  <textarea rows="10" cols="45" name="commentText"></textarea><br />
{if $smileys->isEnabled()}
<script type="text/javascript" src="{$url->getBaseUrl()}/plugins/smileys/js/smileys/smileys.js"></script>
<br/><label for="simleysBar"></label>{$smileys->generateSmileysBar()}
{/if}


{if $authimage->isEnabled()}
<div><label for="authImage">請輸入確認碼</label><input type="text" name="authImage" id="authImage" value="" />&nbsp;{$authimage->show()}</div>
{/if}

                  <input style="font-weight: bold;" type="submit" name="post" value="&nbsp;{$locale->tr("comment_send")}&nbsp;" />
                  &nbsp;&nbsp;<input style="font-weight: bold;" type="reset"><br /><br />
                  <input type="hidden" name="op" value="AddComment"/>
                  <input type="hidden" name="articleId" value="{$post->getId()}"/>
                  <input type="hidden" name="blogId" value="{$blog->getId()}"/>
                  <input type="hidden" name="parentId" value="{$parentId}"/>
            



   </form>
            </div>

我已經改過了，但是我還是不能成功，如果可以的話請告訴我兩種的解決方法，因為我想多學一點，謝謝!

Hi uranusforever：

這樣太亂了，重來！你按我下面步驟確定問題：

1. 把你的網誌換一個新模版。這時迴嚮應該沒有任何的編輯器，是純文字的編輯方式。
2. 到迴響中貼上  <img src="http://forum.lifetype.org.tw/Themes/lifetype/images/chinese-traditional-utf8/news.jpg" /> 看看圖有沒有出來。如果沒有，就是 html_allowed_tags_in_comments  沒有設對。把他改對，再來第三步。
3. 再加上 tinymce，看看再把 <img src="http://forum.lifetype.org.tw/Themes/lifetype/images/chinese-traditional-utf8/news.jpg" /> 貼一次看看圖能不能再出來。如果之前可以，但是現在不行，就是 tinymce 中把img 給檔掉了。

請一步一步確認問題。

不是一發生問題就 post，你沒釐清問題，我們怎麼幫你釐清。 :-(

全部重來，讓我知道你是哪一步失敗了。

BTW，把上面的方式學起來，這是找問題的方法，這樣才有辦法知道問題錯在哪！

Mark

是的，謝謝Mark，我換了一個模版...結果圖出來了......那請問我該怎麼做ㄋ?

你覺得應該怎麼作？我上面的步驟是『說假』的嗎？ :-(

你做到哪一個步驟呢？第三個步驟都試過了嗎？

Mark

根據我的判斷應該是tinymce的問題，但是請問有辦法在迴響的上方加一個"插入圖片"的鈕嗎?沒有的話至少可以自己打語法，謝謝!

Mark的意思是要你一個步驟一個步驟的重新試驗。
你換完模版之後，有繼續按照步驟修改嗎？
有繼續修改Mark提到的第三步驟嗎？

抱歉剛看太快，沒看到"再加上 tinymce"，只看到"看看再把 <img src="http://forum.lifetype.org.tw/Themes/lifetype/images/chinese-traditional-utf8/news.jpg" /> 貼一次看看圖能不能再出來"，我馬上試!

很抱歉之前沒看清楚，連續看太多字看到眼睛有點花，我已經確定是tinymce了，因為之前可以貼圖，但是裝了tinymce之前貼圖不能看見只能直接點貼圖的連結，所以就是 tinymce 中把img 給檔掉了。請問這樣我講的夠清楚了嗎?謝謝!

好，你的意思是在他的編輯畫面貼上 <img src="http://forum.lifetype.org.tw/Themes/lifetype/images/chinese-traditional-utf8/news.jpg" />，結果只看到連結可以點，是嗎？

這並非是 TinyMCE 的問題：

1. 你必須切換倒原始檔畫面，才能貼上 <img src="http://forum.lifetype.org.tw/Themes/lifetype/images/chinese-traditional-utf8/news.jpg" /> 這一段文字。
*** 為什麼：因為 TinyMCE  是 WYSIWYG 的 editor ，所以你直接貼上當然不成功。
2. 或是透過 Insert Image 的 button 來貼。

這樣就回到 lss 要你加那一行程式，來為 tinyMCE 加上 Insert Image Button 。

所以你瞭解了 lss 要你加的原因了嘛！

Mark

您好，其實我懂，但是針對您的1，我想請問一下有辦法直接切回嗎?或說有按鈕直接切回嗎?不然豈不是都要版主把WYSIWYG 關了迴響者才能用?2.但是我加了之後卻沒有按鈕出來阿!加了還需要做什麼嗎?還有請保重身體早點睡，謝謝!

我想先弄清楚你在迴響的地方加上的tinymce編輯器
是採用reic的版本 (http://reic.twbbs.org/post/1/161)還是lss與阿駕說的版本？
這兩個是不一樣的
如果你採用了reic的版本，那你再怎麼改按鈕還是不會出來
又，你如果要能貼程式語法
為何要將迴響的編輯器換成所見即所得？

1.要切回，加一個 code 按鈕，可以產生一個原始碼視窗來編輯。不過使用tinymce 的目的就是不要寫 html ，不是嗎？
2.要清除瀏覽器的cache，或關掉瀏覽器重開。

對lss:
1，但是我加入了那行一樣沒有多按紐，我加的目的是為了方便，但是我沒想到他沒有insert image的按鈕，只有我覺得很不方便嗎?所以我現在可以在tinymce的地方加入一個"顯示原始檔"的按鈕，或是一個"插入圖片"的按紐嗎?或是如bibicall說的我用的是reic的版本所以根本改不出來?麻煩大家了?謝謝!

2.我都清空甚至連server端都reboot了，但是還是沒有!

對bibicall:

是我說的不夠清楚嗎?我用的是reic的版本，因為lss與阿駕說的版本不是用在寫迴響 ! 使用tinymce 的目的是為了方便，但是我沒想到他沒有insert image的按鈕!
所以現在正在尋找解決之道!

以下是我的commentform

<div id="CommentForm">
 
   <form id="NewComment" action="{$url->getBaseUrl()}/index.php" method="post">
   <fieldset>
    <legend>{$locale->tr("add_comment")}</legend>
      <div><label for="commentTopic">{$locale->pr("comment_topic")}</label><input type="text" name="commentTopic" id="commentTopic" value="" /></div>
      <div><label for="commentText">{$locale->pr("comment_text")}</label><script language="javascript" type="text/javascript" src="{$url->getBaseUrl()}/js/tiny_mce/tiny_mce.js"></script>
{literal}
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas",
language : "zh_tw",
theme_advanced_buttons1_add : "image"

});
</script>
{/literal}
<textarea rows="10" cols="30" name="commentText" id="commentText"></textarea></div>
      <div><label for="userName">{$locale->pr("comment_username")}</label><input type="text" name="userName" id="userName" value="" /></div>
      <div><label for="userEmail">Email</label><input type="text" name="userEmail" id="userEmail" value="" /></div>
      <div><label for="userUrl">Web</label><input type="text" name="userUrl" id="userUrl" value="" /></div>
      <div id="Submit"><input id="Add" type="submit" value="{$locale->pr("comment_send")}" name="Add" />
      <input type="hidden" name="op" value="AddComment" />
      <input type="hidden" name="articleId" value="{$post->getId()}" />
      <input type="hidden" name="blogId" value="{$blog->getId()}" />
      <input type="hidden" name="parentId" value="{$parentId}" /></div>
   </fieldset>
     </form>
     
</div>

那就奇怪了？為什麼我做得出來？你可以來我的 blog 看看。
我也是照 reic 的說明 + 官方文件小修一下而已。

那個插入圖片的按鈕是留給你看的，來晚了我會移除掉。我個人覺得回響而已，不用太多功能。

我個人想法跟lss一樣，迴響還是簡單一點好

你改成tinymce為了方便，又覺得新增圖片的按鈕不方便
想要直接輸入語法
但是你為了加語法，又要新增html與所見即所得的互換鈕
不也一樣不方便？

既然你要讓語法可以直接使用，實在應該放棄所見即所得編輯器
要不然你還是得按鈕轉換來轉換去的
就如你所說的，反而就不方便了

以上純粹為個人想法

補充一點：你提到reic為迴響加上tinymce編輯器沒有插入圖片的icon
在reic的該篇文章中，迴響提到他覺得迴響的編輯區單純點好
且在他的說明中，並沒有允許<img>的使用，所以他拿掉了插入圖片的功能
你必須自行加回去，可以的話研究一下官方文件，或許會找到解決方法

uranusforever:

我現在唯一猜的到的可能性，你是用由 reic 的 blog 下載的版本，而這個版本有被 reic 開過刀了，動了減肥手術。
我用的是官方網站下載，沒動過刀的全功能版。

這大概是唯一的差異了。

寫了一篇文章，是今天測試替回響加上 TinyMCE 功能 (http://blog.nlhs.tyc.edu.tw/post/2/63)的作法與心得。有需要的人請參考。若有謬誤，請不吝賜教 :-)

對不起lss,翻了這麼舊的post上來,不過我真的無法完成,發表文章的tinymce已完成,迴響的卻用不了.

以下是我的commentform.template, 麻煩lss大兄指點一二.thx!

麻煩你.

hi sunkit:

很抱歉，我的 blog 文章裡面的 javascript 碼有錯，可能是 複製/貼上 時不慎加上去的，請依照上面，把 xsrc=... 的 x 去掉。

lss

THX LSS大兄,去掉x就可以了,

不過有另一個問題出現,頭三個icon不見了,出了x圖示,應該是粗,斜,底線三個,

發新文章那邊是正常可見的.

再thx

hi sunkit:

請確認一下你使用的 TinyMCE 版本是那一版？你的 tiny_mce-commentform.js 裡面設定的語系是那一個？是否與我發文時使用同一個版本？新的 TinyMCE 已經有中文語系了，包括那三個 icon 也使用跟英文語系不同的圖。

建議你先試試設成英文語系，看看是否有問題？

lss

LSS大兄,問題解決了,thx!

資料如下:
LT : 1.0.3 (由1.0.2 UPGRADE)
Tinymce : 2.0.1 final (在更新 TinyMCE 編輯器版本至 2.0.1 final  (http://blog.nlhs.tyc.edu.tw/post/2/76)這篇下載)
Tinymce 迴響 是參照這篇  替回響加上 TiyMCE 的功能(增修 1 版)  (http://blog.nlhs.tyc.edu.tw/post/2/63)

語系的問題,是這句嘛?
改成就可以用了.

再thx!
 

hi sunkit:

恭喜你成功了 :-)

lss

我最近才發現，TinyMCE會自動把src改成xsrc耶  :-|
之前有人回報，我以為跟lss老師一樣是不小心弄上去的。
剛剛寫文章的時候才發現應該是TinyMCE的關係吧?!

最近很少貼程式碼，所以沒去管。事實上，之人有人問自訂 tinymce 界面時，已經發現了。

可是沒用到，所以暫時沒去管  :-P

有人要試試更新 tinymce 看看會不會修復嗎？

lss

剛剛研究了好久，實在不知道怎麼怎麼改成給LT用的hack
lss老師可以提點一下嗎?

阿駕：

我真的不知道你是要問什麼？你不是會了 (http://ajer001.blog.twntwn.info/post/1/533)嗎？

你能再詳述一下你的問題嗎？

lss

我嘗試著要更新到2.5.x版，
不過insert resource的部份一直有問題。
點下去就會發生錯誤了，其他倒是很順利。
目前是直接拿TinyMCE-plog-* 的兩個檔案來直接用，其他都是新版本的檔案。

對了，請問resource的語法部份，是寫在哪邊呢？是如何讓他可以在TinyMCE中被使用呢？

參考一下 giayiu 的這一篇 (http://forum.lifetype.org.tw/index.php?topic=1929.0)試試看。

還有，我當初是把 insert resource plugin 放在 plugin 的最後一個才能正常工作。

tiny_mce-plog.js 裡面：

這個 plugin 是 mark 寫的。

lss

之前也有發現這問題，剛剛我試過的結果（ http://plog.hlps.tcc.edu.tw/plog/5  ）
<tinymce 2.0.1>
在IE下發表，沒這問題
在firefox 1.5.0.1發表
src → xsrc
href → xhref

不用試了！ TinyMCE 2.0.5.1 改了 plugin 的寫法。

我已經在 1.1 trunk 中修正了！不過有興趣的人可以把他 backport 回 1.0 。

Mark

嗚，難怪一直出問題。
那就是說要用的話要去1.1trunk中拿出來用摟？
還是還列在to do list而已？

今天的 plog-svn 看到的，mark 已經把新的 tinymce 加入 trunck 了，應該 check out 來用就行了吧。

等我趕完教材再試試看。

急用的人千萬別等我。 :-P

lss