demoshop

demo, trying to be the best_

超輕量富文本編輯器 CLeditor

  • 2012-01-12 11:30:27
  • 11423
官方網站
http://premiumsoftware.net/cleditor/

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

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


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


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


demo廢言初步的介紹結束後再來就要說明 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
    //==============

demo廢言就在一切接近完工的時候,得到了一個晴天霹靂的消息,網站的多國語言翻譯是委託另外的團隊執行,該團隊因為內部工具的關係只接受 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小鋪

回應討論