超輕量富文本編輯器 CLeditor
- 2012-01-05
- 23162
- 0
這是一套小巧又強大的 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 檔都是寫死在程式內，如果路徑改變就很麻煩，可以試試看把這部份抽成設定檔。
【測試檔下載】這是測試檔您可以下載回去玩玩看，內容包括了
- jquery.cleditor.js（主程式
- jquery.cleditor.i18n.js（語言檔
- Javascripti18nHelper.cs（幫助方法
- JSCleditor.resx（少量翻譯的資源檔
回應討論