posts - 13, comments - 7, trackbacks - 0, articles - 0

          在線HTML編輯器htmlarea簡單使用

          Posted on 2007-02-07 13:47 趙永超 閱讀(1341) 評(píng)論(1)  編輯  收藏 所屬分類: Html

          ?

          這幾步是如果使用htmlarea3.0的說明,是在網(wǎng)上看到的. 在/htmlarea/examples/web-menu這個(gè)文件里有更為詳細(xì)的說明.下邊的這個(gè)鏈接的版本是多國語言版本,默認(rèn)的語言為英語.

          ??? 下載HTMLarea3.0 http://www.jhdown.com/soft/8/141/html/2006220010681.html,解壓里面的文件到web站點(diǎn)的/htmlarea目錄下(可以是自己建的目錄,這里建議直接用htmlarea做為目錄);

          二、定義javascript的全局變量及引入js文件:

          ?<script type="text/javascript">
          ?? _editor_url = "${pageContext.request.contextPath}/htmlarea/";
          ?? _editor_lang = "en";
          </script>

          <script type="text/javascript" src="${pageContext.request.contextPath}/htmlarea/htmlarea.js"></script>

          <script type="text/javascript">
          var editor = null;
          function initEditor() {
          ? editor = new HTMLArea("content");
          ? editor.generate();
          }
          </script>

          有句editor = new HTMLArea("content");"content"是表單中textarea屬性的id,如:

          ????? <html:form action="/actionBbsreply.do?method=update" onsubmit="this['content'].value=editor.getHTML();">
          ??????? <textarea cols="110" rows="15" id="content" name="content">
          ????????? <bean:write name="bbsreply" property="content"/>
          ??????? </textarea>
          ??????? <html:submit value=" 提 交 ">
          ??????? </html:submit>
          ????? </html:form>

          三、在body的onload事件中加載initEditor():

          ? 如:<body bgcolor="#ffffff" onload="initEditor()">

          四、注意點(diǎn):

          1、editor = new HTMLArea("content");參數(shù)值是表單中textarea屬性id;

          2、在body的onload事件中加載initEditor();

          3、表單onsubmit事件調(diào)用this['content'].value=editor.getHTML()

          在使用的過程中發(fā)現(xiàn),因?yàn)槟J(rèn)是英文語方,提示信息也是英文的, 這對(duì)于飛慣用中文的朋友來說很是不方便 ,如果要改變語言的話
          ?? _editor_lang = "en";
          把上邊代碼里的._editor_lang="gb"理論上就可以了, 這樣,當(dāng)代碼去運(yùn)行的時(shí)候會(huì)找/lang文件夾下的gb.js文件,但是作者發(fā)布這套源代碼的時(shí)候jb.js里的中文是用iso8859-1編碼的,我用MyEclipse的javascriptEdit查看器(MyEclipse下*.js的默認(rèn))打開的時(shí)候看到的全是亂碼,這就導(dǎo)至了在jsp頁面出現(xiàn)錯(cuò)誤.解決的辦法就是在改變gb.js的文件的屬性, 將編碼格式改為utf-8的格式. 然后再加上en.js下邊的
          ?buttons: {
          ? "ok":?????????? "確定",
          ? "cancel":?????? "取消"
          ?},

          ?msg: {
          ? "Path":???????? "路徑",
          ? "TEXT_MODE":??? "現(xiàn)在模式是文本模式.? 按[<>]鍵切換到可視化編輯模式.",

          ? "IE-sucks-full-screen" :
          ? // translate here
          ? "The full screen mode is known to cause problems with Internet Explorer, " +
          ? "due to browser bugs that we weren't able to workaround.? You might experience garbage " +
          ? "display, lack of editor functions and/or random browser crashes.? If your system is Windows 9x " +
          ? "it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
          ? "You have been warned.? Please press OK if you still want to try the full screen editor."
          ?},

          ?dialogs: {
          ? "Cancel"??????????????????????????????????????????? : "Cancel",
          ? "Insert/Modify Link"??????????????????????????????? : "Insert/Modify Link",
          ? "New window (_blank)"?????????????????????????????? : "New window (_blank)",
          ? "None (use implicit)"?????????????????????????????? : "None (use implicit)",
          ? "OK"??????????????????????????????????????????????? : "OK",
          ? "Other"???????????????????????????????????????????? : "Other",
          ? "Same frame (_self)"??????????????????????????????? : "Same frame (_self)",
          ? "Target:"?????????????????????????????????????????? : "Target:",
          ? "Title (tooltip):"????????????????????????????????? : "Title (tooltip):",
          ? "Top frame (_top)"????????????????????????????????? : "Top frame (_top)",
          ? "URL:"????????????????????????????????????????????? : "URL:",
          ? "You must enter the URL where this link points to"? : "You must enter the URL where this link points to"
          ?}

          這些代碼.如果有需要的話, 可以把右邊屬性的值翻譯成漢語,這里還有一個(gè)要注意的地方就是要對(duì)照格式,我把我改正過的貼到這里, 方便查看

          // I18N constants -- Chinese GB
          // by Dave Lo -- dlo@interactivetools.com
          HTMLArea.I18N = {

          ?// the following should be the filename without .js extension
          ?// it will be used for automatically load plugin language.
          ?lang: "gb",

          ?tooltips: {
          ? bold:?????????? "粗體",
          ? italic:???????? "斜體",
          ? underline:????? "底線",
          ? strikethrough:? "刪除線",
          ? subscript:????? "下標(biāo)",
          ? superscript:??? "上標(biāo)",
          ? justifyleft:??? "位置靠左",
          ? justifycenter:? "位置居中",
          ? justifyright:?? "位置靠右",
          ? justifyfull:??? "位置左右平等",
          ? orderedlist:??? "位置左右平等",
          ? unorderedlist:? "無序清單",
          ? outdent:??????? "減小行前空白",
          ? indent:???????? "加寬行前空白",
          ? forecolor:????? "文字顏色",
          ? backcolor:????? "背景顏色",
          ? horizontalrule: "水平線",
          ? horizontalrule: "水平標(biāo)尺",
          ? createlink:???? "插入連結(jié)",
          ? insertimage:??? "插入圖形",
          ? inserttable:??? "插入表格",
          ? htmlmode:?????? "切換HTML原始碼",
          ? popupeditor:??? "放大",
          ? about:????????? "關(guān)於 HTMLArea",
          ? help:?????????? "說明",
          ? textindicator:? "字體例子"
          ?},


          ?buttons: {
          ? "ok":?????????? "確定",
          ? "cancel":?????? "取消"
          ?},

          ?msg: {
          ? "Path":???????? "路徑",
          ? "TEXT_MODE":??? "現(xiàn)在模式是文本模式.? 按[<>]鍵切換到可視化編輯模式.",

          ? "IE-sucks-full-screen" :
          ? // translate here
          ? "The full screen mode is known to cause problems with Internet Explorer, " +
          ? "due to browser bugs that we weren't able to workaround.? You might experience garbage " +
          ? "display, lack of editor functions and/or random browser crashes.? If your system is Windows 9x " +
          ? "it's very likely that you'll get a 'General Protection Fault' and need to reboot.\n\n" +
          ? "You have been warned.? Please press OK if you still want to try the full screen editor."
          ?},

          ?dialogs: {
          ? "Cancel"??????????????????????????????????????????? : "Cancel",
          ? "Insert/Modify Link"??????????????????????????????? : "Insert/Modify Link",
          ? "New window (_blank)"?????????????????????????????? : "New window (_blank)",
          ? "None (use implicit)"?????????????????????????????? : "None (use implicit)",
          ? "OK"??????????????????????????????????????????????? : "OK",
          ? "Other"???????????????????????????????????????????? : "Other",
          ? "Same frame (_self)"??????????????????????????????? : "Same frame (_self)",
          ? "Target:"?????????????????????????????????????????? : "Target:",
          ? "Title (tooltip):"????????????????????????????????? : "Title (tooltip):",
          ? "Top frame (_top)"????????????????????????????????? : "Top frame (_top)",
          ? "URL:"????????????????????????????????????????????? : "URL:",
          ? "You must enter the URL where this link points to"? : "You must enter the URL where this link points to"
          ?}
          };

          呵呵.文件改好了以后,就把這個(gè)文件復(fù)制到/plugins/下.(在plugins下有5個(gè)子文件夾,每個(gè)又文件夾下有一個(gè)lang文件夾,把gb.js文件放進(jìn)去就OK了.)
          然后啟動(dòng),成功了...^_^


          趙永超原創(chuàng),轉(zhuǎn)載請(qǐng)注明

          ?


          ?

          Feedback

          # re: 在線HTML編輯器htmlarea簡單使用  回復(fù)  更多評(píng)論   

          2009-09-13 22:58 by 附屬物

          夫頂替 壓頂 侉
          主站蜘蛛池模板: 集安市| 琼海市| 大连市| 永春县| 博野县| 泽普县| 曲松县| 乌兰浩特市| 长子县| 长岛县| 凤山县| 泸西县| 五峰| 静海县| 成武县| 长岛县| 武冈市| 光泽县| 时尚| 浪卡子县| 全南县| 阿拉尔市| 绵阳市| 社旗县| 建昌县| 德钦县| 宿州市| 巴塘县| 商河县| 金沙县| 龙游县| 蓝田县| 开鲁县| 宁化县| 丹棱县| 工布江达县| 延庆县| 门源| 乌兰浩特市| 沾化县| 驻马店市|