如何将 htmlarea userElements 迁移到 TYPO3 8.7 中的 CKEditor？

Question

我需要一些指导如何将用户元素从 TYPO3 7.6 中的 htmlarea_rte 迁移到 TYPO3 8.7 中的 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>
      )
    }
  }
}

Answer 1

所以您的问题是关于如何将这些样式（<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/

Answer 2

我创建了一个小的 CKEditor 插件来满足我的需要：

'use strict';

(function () {

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

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

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

})();

插件需要此文件结构才能工作：

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

如何将 htmlarea userElements 迁移到 TYPO3 8.7 中的 CKEditor？

How to migrate htmlarea userElements to CKEditor in TYPO3 8.7?

typo3

rte

ckeditor

typo3-8.7.x