tinymce 自定义表情

雨点打透心脏的1/2处 2022-06-01 09:26 130阅读 0赞

tinymce 自带的表情还是比较少的,所以使用的时候需要考虑扩展,这个其实也简单,我主要参考了下面的资料:

1) emotions 插件是一个常用的 TinyMCE 插件。我们的目的是  
1.将表情图案的 URL 设置成 [http://localhost/emotionimg/smiley-cool.gif][http_localhost_emotionimg_smiley-cool.gif] 格式  
2.可以添加其他表情图案到此插件中

首先实现第一个要求：

1.将插件下的表情图案复制至网站根目录下的 emotionimg 目录中  
2.编辑 `tinymce/jscripts/tiny_mce/plugins/emotions/js/emotions.js`  
将其中的

`src : tinyMCEPopup.getWindowArg('plugin_url') + '/img/' + file,`

修改为：

`src : '/emotionimg/' + file,`

实现第二个要求：

1.将表情图案(如 vampire.gif)上传至网站根目录下的 emotionimg 目录中  
2.修改 `tinymce/jscripts/tiny_mce/plugins/emotions/emotions.htm`，将此图案写入页面中。如

`<a href="javascript:EmotionsDialog.insert('vampire.gif','emotions_dlg.vampire');"><img src="/emotionimg/vampire.gif" width="18" height="18" border="0" alt="{#emotions_dlg.vampire}" title="{#emotions_dlg.vampire}" /></a>`

3.为新添加的表情图案补充语言翻译，在 `tinymce/jscripts/tiny_mce/plugins/emotions/langs/en_dlg.js` 中添加

`vampire:"Vampire"`

在 `tinymce/jscripts/tiny_mce/plugins/emotions/langs/zh_dlg.js` 中添加

`vampire:"\u5438\u8840\u9b3c"`

提示：由于 TinyMCE 的语言包必须采用 ISO-639-1 格式，在中文语言包中的信息不可直接填写中文。请使用如下脚本转换一下：

`<script style="text/javascript"> function ascii(str){ return str.replace(/[^\u0000-\u00FF]/g,function($0){return escape($0).replace(/(%u)(\w{4})/gi,"\\u$2")}); } function unascii(str){ return unescape(str.replace(/\\u/g,"%u")); } var a=ascii("吸血鬼"); document.write(a.toLowerCase()); document.write(unascii(a)); //document.write("\u4E2D\u6587"); < /script>`

[TinyMCE][] 表情圖示功能，其目錄位置是 tinymce/jscripts/tiny\_mce/plugins/emotions，並且在 emotions 目錄下還有 img、js、langs 三個子目錄，以及一些 \*.js 和 \*.htm 的檔案，其中︰

*  img 目錄  
    這是放置表情圖示檔案的地方，如果有做圖示分類的話，建議依分類再進行子目錄的建立及存放。
 *  js 目錄  
    在 [TinyMCE][] 3.3.5.1 版本中，目前只有 emotions.js 單一檔案，基本上是不用去變動到它的，不過如果有修改過 img  目錄的名稱的話，比如修改成 imgs，那就需要修改檔案中的內容，將  
    src :  tinyMCEPopup.getWindowArg('plugin\_url') + '/img/' + file 修改成  
    src :  tinyMCEPopup.getWindowArg('plugin\_url') + '/imgs/' + file 即可。
 *  langs 目錄  
    這是放置表情圖示的說明檔所在，預設是僅有 en\_dlg.js 檔案，如果有安裝 [TinyMCE][] 其他語系界面的話，則會多出如 tw\_dlg.js 等檔案。  
    如果檔案開頭不是像 tinyMCE.addI18n('en.emotions\_dlg',\{ 這樣的格式時，記得要修正喲。
 *  \*.js  
    在 [TinyMCE][] 3.3.5.1 版本中，合計有 editor\_plugin.js 和 editor\_plugin\_src.js 兩個 javascript  類型的檔案，這是兩個內容一樣的檔案。  
    editor\_plugin.js  是經過壓縮過的，去除掉沒必要的空白和斷行，這是給瀏灠器看的，不是人看的。  
    editor\_plugin\_src.js  則相反，並未去除掉空白及斷行，且包含了著作權聲明及程式註解，所以這是給人看的  
    所以要了解程式內容要看 editor\_plugin\_src.js  檔案，而要做內容修正的話，則需要修改 editor\_plugin.js 檔案，幸好這檔案內容不多，且可能需要修改的地方只有兩處︰width 及  height  
    這是決定所開啟的表情圖示挑選窗的寬度及高度，因為開啟的挑選窗並沒有捲軸可用，所以需要依據圖示的多寡來決定寬與高。
 *  \*.htm  
    表情圖示挑選窗的內容就是由此檔案格示來決定的，基本上是僅有 emotions.htm 這個檔案，如果希望做到圖示分類的話，可以自行撰寫其他的 filename.htm 檔案，然後彼此呼叫即可。

[http_localhost_emotionimg_smiley-cool.gif]: http://localhost/emotionimg/smiley-cool.gif
[TinyMCE]: http://tinymce.moxiecode.com/