給ckeditor添加Fontawesome

我在我的網站中使用Fontawesome，並擁有自己的CMS來編輯網站頁面。我想開發的是一個對話框，用戶可以選擇一個fontawesome圖標，但現在可以將它們添加到ckeditor的代碼視圖中。給ckeditor添加Fontawesome

添加到內容中的圖標未顯示在ckeditor設計視圖中。我更改了ckeditor配置文件，以便編輯器接受i標籤（*）。我將fontawesome CSS文件作爲@import規則添加到contents.css中，但仍然沒有在編輯器區域中可見的fontawesome圖標。

（*）config.js

config.allowedContent = true; 
config.ProtectedTags = 'i' ; 
config.protectedSource.push(/<i[\s\S]*?\>/g); //allows beginning <i> tag 
config.protectedSource.push(/<\/i[\s\S]*?\>/g); //allows ending </i> tag

我能做些什麼，使這項工作？

來源

2013-07-11 klaaz

當您向protectedSource設置中添加內容時，您將其從編輯器中隱藏起來，該內容會轉換爲HTML註釋以保護它並避免它可以被用戶修改，但作爲一個註釋顯然隱。

來源

2013-07-11 11:09:32 AlfonsoML

config.protectedSource.push(/<i class[\s\S]*?\>/g); 
config.protectedSource.push(/<\/i>/g);

你有什麼會干擾img標籤。 AND OR，全部配置後：

CKEDITOR.dtd.$removeEmpty['i'] = false;

兩者都工作正常。確保您在更改時已完全清除緩存。

*編輯其中一個工作，同時搞亂別的東西。一個不行的解決方案。

我停止使用這個龐大的編輯器。創建我自己的。但是，要解決此問題，請使用EM或SPAN代替I標籤。

來源

2014-03-06 21:34:58

使用CKEDITOR.dtd。$ removeEmpty ['i'] = false;適用於初始加載，但我發現在源代碼和所見即所得之間進行編輯或切換將刪除標記。受保護的源代碼可以工作，但有限制您無法真正看到圖標。 – Studio4

-1

看看這個：ckeditor fontawesome addon。

基本上，你應該下載zip格式的fontawesome插件，並提取到「ckeditor/plugins /」，名稱爲「fontawesome」。然後，打開「的CKEditor/config.js」和信號新插件的使用：

config.extraPlugins = 'fontawesome'; config.contentsCss = 'path/to/your/font-awesome.css'; config.allowedContent = true;

接下來的事情是編輯HTML的部分：

<script>CKEDITOR.dtd.$removeEmpty['span'] = false;</script>

的最後一步是使用在toolbargroupname：「FontAwesome」你的工具欄：

config.toolbar = [ { name: 'insert', items: [ 'FontAwesome', 'Source' ] } ];

這裏是一個demo。

這也適用於glyphicons，就像使用fontawesome一樣。

Cheers

來源

2016-05-31 09:29:38 icemanblas

+0

現在有多個fontawesome插件。這一個，當檢查源鏈接時，會導致非常難看的垃圾郵件。我正在接受另一個。 – commonpike

給ckeditor添加Fontawesome

回答

相關問題