TYPO3 8.7のhtmlarea userElementsをCKEditorに移行するには？

Question

TYPO3 7.6のhtmlarea_rteからTYPO3 8.7のCKEditorにuserElementsを移行する方法について、いくつかのポインタが必要です。

私の質問に言い換えると、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> 
    ) 
    } 
    } 
} 

Answer 1

私のニーズに合わせて小さな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

Answer 2

だからあなたの質問はCKEditorバージョンにそれらのスタイル（<i class="envelope"></i>など）を追加する方法についてですか？

まず第一に、あなたの.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/