demoshop

官方網站

http://premiumsoftware.net/cleditor/

這是一套小巧又強大的 HTML 編輯器預設的情況之下只有超小的 8.8k ，如果你不需要用到 CKeditor、TinyMCE這類超多功能的 HTML 編輯器只是要簡單的應用那這套 CLeditor 絕對是你的不二選擇！

demo其實已經很多的案子中都已經有使用過 CLeditor ，那為什麼現在才來介紹？喔那是因為這種基於 jQuery 的套件使用起來都不會有什麼太大的問題，所以當初就懶得寫，但是最近因為案子的需求，所以對它修改了一些功能（其實是限制）既然有下過功夫，那就來分享一下，順便再次推廣這優秀的編輯器。

---

這套編輯器之所以可以那麼小，是因為預設只有很基本的功能【線上 demo】

---

基本功能不夠用的話官網也是有提供XHTML、BBcode、Table、進階Table、Icon 的套件可供選用，當然套件是可以堆疊的，可以自行選用需要的套件來增加編輯器的功能。如果嫌功能不夠也可以自行修改整個原始檔都有放上GitHub 。

---

初步的介紹結束後再來就要說明 demo 這是因為專案需要調整的部份。

 

第一個功能就是因為網站本身是多國語言，因此編輯器也是需要多國語言的，雖然 CLeditor 官網上沒看到，但是你到 GitHub 上可以看到已經有好心人實作了 I18N，把它下載下來就可以用了，不過語言檔是需要自行翻譯的。

---

有使用過HTML編輯器的應該都會有經驗，使用者如果是從 Word 複製貼上的文字就會摻雜了相當噁心的 HTML 一些較大型的編輯器會有自行過濾的功能，但是 CLeditor 並沒有自動過濾的功能，只有貼上純文字的圖示可以用【】但是使用者不會去按，所以 demo 只好下大絕直接拒絕所有的貼上功能，並且也關掉滑鼠右鍵。

// Enable the toolbar buttons as the user types or clicks
        //TODO 防止貼上
        $doc.click(hidePopups)
      .bind("keyup mouseup", function (e) {
          if (e.keyCode == 17) { ctrlDown = false; }
          refreshButtons(editor);
      }).bind("keydown", function (e) {
          if (e.keyCode == 17) { ctrlDown = true; }
          if (ctrlDown && (e.keyCode == 86 || e.keyCode == 67)) { return false; }
      }).bind("contextmenu", function (e) { e.preventDefault() });

這裡有用到一個 ctrlDown 變數，請記得放到全域去

    var ctrlDown;
    //==============
    // jQuery Plugin
    //==============

---

就在一切接近完工的時候，得到了一個晴天霹靂的消息，網站的多國語言翻譯是委託另外的團隊執行，該團隊因為內部工具的關係只接受 resource 的檔案，像這種編輯器的多國語言是一堆的 js 檔，並不被接受，因此就需要自己動手將 resource 檔 Parse 成 js 檔，於是就有了下面的一個小幫助方法出現。

using System;
using System.Collections.Generic;
using System.IO;
using System.Linq;
using System.Text;
using System.Threading;
using System.Web;
using System.Web.UI;
using System.Web.UI.HtmlControls;
using System.Xml.Linq;

namespace Helper
{
    /// <summary>
    /// 寫很死的 javascript i18n 幫助方法
    /// </summary>
    public class Javascripti18nHelper
    {
        /// <summary>
        /// 用來存放目前的文化特性
        /// </summary>
        private string _currentCulture;

        public Javascripti18nHelper()
        {
            //在建構子中取得目前使用者的文化特性名稱
            _currentCulture = "." + Thread.CurrentThread.CurrentCulture.Name;
        }

        /// <summary>
        /// CLeditor 多國語言專用<para>會連帶載入 cleditor.js</para>
        /// </summary>
        public void Cleditor()
        {

            string path = HttpContext.Current.Server.MapPath(
                string.Concat("~/App_LocalResources/JSCleditor", _currentCulture, ".resx"));

            if (_currentCulture == ".en-US")
            {
                //因為預設語言就是洋文，所以如果文化特性為洋文那就不要用預設檔
                path = path.Replace(_currentCulture, "");
            }
            //拆解 Resource 檔
            var dictionary = GetElements(path);

            //以下就是組合成 CLeditor 需要用的格式
            StringBuilder sb = new StringBuilder();
            sb.Append("CLEDITOR_I18N = {");
            foreach (var item in dictionary)
            {
                sb.AppendFormat("\"{0}\":\"{1}\",", item.Key, item.Value);
            }
            sb.Append("\"none\":\"none\"}");

            //產生相關的 JS
            GenericJSi18n(sb.ToString(), "~/Scripts/jquery.cleditor.js");
        }

        /// <summary>
        /// Generics the Javascript i18n.
        /// </summary>
        /// <param name="page">The page.</param>
        /// <param name="innerHtml">The inner HTML.</param>
        /// <param name="dependenceURL">The dependence URL.</param>
        private static void GenericJSi18n(string innerHtml, string dependenceURL)
        {
            var page = (HttpContext.Current.CurrentHandler as Page);
            HtmlGenericControl js = new HtmlGenericControl("script");
            js.Attributes.Add("type", "text/javascript");
            js.InnerHtml = innerHtml;
            page.Header.Controls.Add(js);

            HtmlGenericControl jsd = new HtmlGenericControl("script");
            jsd.Attributes.Add("type", "text/javascript");
            jsd.Attributes.Add("src", page.ResolveUrl(dependenceURL));
            page.Header.Controls.Add(jsd);
        }

        private static Dictionary<string, string> GetElements(string path)
        {
            var xml = CheckConfigFile(path);
            var XMLSource = XElement.Parse(xml).Elements();
            return XMLSource.Where(d => d.Name == "data")
            .ToDictionary(d => d.Attribute("name").Value, d => d.Value.Trim());
        }

        private static string CheckConfigFile(string path)
        {
            FileInfo myInfo = new FileInfo(path);
            if (!myInfo.Exists)
                throw new Exception("Resource no find! " + path);
            StreamReader sr = new StreamReader(myInfo.OpenText().BaseStream, Encoding.UTF8);
            return sr.ReadToEnd();
        }
    }
}

上述這段程式只是堪用，有一些議題你可以自己動手試試看，如果只是複製貼上那就不好玩了是吧。

• 這隻程式會因為每個需要多國語言的 javascript 而需要做不同的處理，不過共同點就是拆解 Resource 的部份，所以如果做成簡單工廠或許是個不錯的選擇。
• 再判斷文化設性時找不到的檔案會丟出錯誤，其實應該是找不到就用預設語言來顯示，這部份您也可以想一下怎麼修改。
• Resource檔和主要的 JS 檔都是寫死在程式內，如果路徑改變就很麻煩，可以試試看把這部份抽成設定檔。

 

【測試檔下載】這是測試檔您可以下載回去玩玩看，內容包括了

1. jquery.cleditor.js（主程式
2. jquery.cleditor.i18n.js（語言檔
3. Javascripti18nHelper.cs（幫助方法
4. JSCleditor.resx（少量翻譯的資源檔

【Userscript】跳過 Xuite 網路硬碟按廣告才能下載的限制 | demo小鋪