如何在TYPO3 8.7中將htmlarea userElements遷移到CKEditor？

我需要一些指針如何將TYPO3 7.6中的htmlarea_rte中的userElements遷移到TYPO3 8.7中的CKEditor。如何在TYPO3 8.7中將htmlarea userElements遷移到CKEditor？

或者更改我的問題：如何在CKEditor中自定義html預先鏈接？

這是我userElements什麼樣子：

RTE.default { 
    contentCSS = EXT:mytheme/Resources/Public/Css/Rte.css 

    proc.allowTagsOutside := addToList(i,em) 
    proc.entryHTMLparser_db.tags.i > 
    proc.entryHTMLparser_db.tags.em > 

    showButtons := addToList(user) 

    proc.allowedClasses := addToList(envelope, phone, fax) 
    classesCharacter = envelope, phone, fax 

    userElements { 
    10 = Icons 
    10 { 
     1 = E-Mail 
     1.content (
<i class="envelope"></i> 
    ) 

     2 = Telefon 
     2.content (
<i class="phone"></i> 
    ) 

     3 = Fax 
     3.content (
<i class="fax"></i> 
    ) 
    } 
    } 
}

來源

2017-10-19 Peter Kraume

我創建了一個小型CKEditor插件以適合我的需求：

'use strict'; 
 

 
(function() { 
 

 
\t CKEDITOR.dtd.$removeEmpty.em = 0; 
 
\t CKEDITOR.dtd.$removeEmpty.i = 0; 
 

 
\t CKEDITOR.plugins.add('icon-envelope', { 
 
\t \t icons: 'iconenvelope', 
 
\t \t init: function (editor) { 
 
\t \t \t editor.ui.addButton('IconEnvelope', { 
 
\t \t \t \t label: 'Icon E-Mail', 
 
\t \t \t \t toolbar: 'insert', 
 
\t \t \t \t command: 'insertIconEnvelope' 
 
\t \t \t }); 
 

 
\t \t \t editor.addCommand('insertIconEnvelope', { 
 
\t \t \t \t exec: function (editor) { 
 
\t \t \t \t \t var icon = editor.document.createElement('i'); 
 
\t \t \t \t \t icon.setAttribute('class', 'fa fa-envelope'); 
 
\t \t \t \t \t editor.insertElement(icon); 
 
\t \t \t \t } 
 
\t \t \t }); 
 
\t \t } 
 
\t }); 
 

 
})();

插件需要這個文件結構的工作：

icon-envelope plugin.js icons iconenvelope.png

整合TYPO3通過這個YAML做： editor: externalPlugins: icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }

完整的代碼可以在這裏找到： https://gist.github.com/peterkraume/95106c5b27615e06dcfcb01a62b2a30c

來源

2017-10-27 08:06:11

所以你的問題是關於如何將這些樣式（<i class="envelope"></i>等）添加到CKEDITOR？

首先，添加你.yaml配置文件（見https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/）

然後在# Inline styles部分，你可以添加類似：參考這裏也

 - { name: 'Envelope', element: 'i', attributes: { 'class': 'envelope' } }

參見：https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/

來源

2017-10-19 08:29:30

有了'stylesSet'，我可以將元素添加到元素中，但這並不是我想在此處存檔。我想插入完整的摘錄，例如'並不包裹任何現有的文字。還是我需要創建一個自定義插件來歸檔？ –

在創建自定義插件之前，我會嘗試使用https://ckeditor.com/cke4/addon/glyphicons;）說我不喜歡使用空標籤添加圖標，我更喜歡使用'：before '僞元素 –

如何在TYPO3 8.7中將htmlarea userElements遷移到CKEditor？

回答

相關問題