改造 textarea 大作戰 – 並以 WordPress 評論框為例

Author: Eric  //  Category: Free Teaching

01. 首先請到作者的網站 or 作者置於 Google Code 的地方來下載 WMD: The Wysiwym Markdown Editor

02. 在您網頁的 textarea 加入 WMD Editor 的方式有下面兩種方式。

  a. 於 <head></head> 間加入下面的程式碼, 這樣 WMD Editor 會在您網頁第一個出現的 textarea 自動加上 WMD Editor。 // 最簡單就是在 </head> 正上方添加下面的程式碼。

<script type="text/javascript" src="./wmd-editor/wmd.js"></script>

  b. 於您想出現 WMD Editor 的 textarea 下方添加下面的程式碼。

<script type="text/javascript" src="./wmd-editor/wmd.js"></script>

03. 以下以 WordPress 為例。

// 假設您下載下來的 WMD Editor 解壓縮後放在正在使用的主題下, 且 wmd.js 在 ./wp-content/themes/Your_Theme_Name/wmd-editor/wmd.js。如果不是的話, 請依照您的實際狀況來做修改, 如果還是有問題的話不妨使用絕對位址。

// eg : 使用絕對位址

<script type="text/javascript" src="http://who-know.com/wp-content/themes/My_Theme_Name/wmd-editor/wmd.js"></script>

  a. 打開 ./wp-content/themes/Your_Theme_Name/header.php, 在 <head></head> 間加入下面的程式碼。 // 最簡單就是加在 </head>的上一行。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wmd-editor/wmd.js"></script>

  b. 如果天生跟程式碼沒緣分, 又不排斥安裝一個外掛, 可以到 WMD Editor Wordpress Plugin 來下載外掛, 然後於 WordPress 後台啟用即可。

// WMD Editor Wordpress Plugin 的程式碼超簡單的, 就是替您在 <head></head> 加上一句程式碼, 來 include wmd.js, 說不定您自己都會寫 WMD Editor Wordpress Plugin 這外掛喔^^

  c. 如果上面那兩招無效, 或想有更進階的玩法。打開 ./wp-content/themes/Your_Theme_Name/comments.php, 以 textarea 為關鍵字, 用 Ctrl+F 找到類似下面的程式碼。 // 下面以某兩個 WordPress Theme 為例。

<textarea name="comment" id="comment" cols="100%" rows="10" tabindex="4"></textarea>

<textarea name="comment" id="comment" cols="50" rows="10" tabindex="4"></textarea>

請於 </textarea> 後面加上下面的程式碼, 即完成。

<script type="text/javascript" src="<?php bloginfo('template_url'); ?>/wmd-editor/wmd.js"></script>

// 如果希望有預覽功能, 就在您想出現預覽的地方再加上, 或直接加在上面那段程式碼的後面。

<div class="wmd-preview"></div>

// 千言萬語比不上一張圖?

Tags: , ,

6 Responses to “改造 textarea 大作戰 – 並以 WordPress 評論框為例”

  1. 万戈 Says:

    挺有新意的,很不错

  2. 蛋王 Says:

    傻瓜式教程,我喜欢。
    ps:你头部的最新文章栏里的标题撑破那个框了。

  3. Eric Says:

    感謝告知, 只是不知道您用的是哪款瀏覽器? 我剛才用 IE6 ( Sleipnir, Lunascape, Maxthon, Avant ), IE7, IE8, Firefox, Chrome, Safari 都沒發現問題說。

    // 本人瀏覽習慣很怪, 所以灌了一堆瀏覽器 XD

  4. sinsky Says:

    解密后的代码运行出错了 能不能帮忙看下。。。

  5. Eric Says:

    您寄被加密過的文件給我看看, 我幫你試試看。

  6. Mr-Z Says:

    受教了,下班回家捣鼓下。

Leave a Reply