How to migrate htmlarea userElements to CKEditor in TYPO3 8.7?

Question

I need some pointers how to migrate userElements from htmlarea_rte in TYPO3 7.6 to CKEditor in TYPO3 8.7.

Or to rephrase my question: how can I prepend links in CKEditor with custom html?

This how my userElements look like:

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've created a small CKEditor plugin to fit my needs:

'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);
				}
			});
		}
	});

})();

The plugin needs this file structure to work:

icon-envelope plugin.js icons iconenvelope.png

Integration in TYPO3 is done via this YAML: editor: externalPlugins: icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }

The complete code can be found here: https://gist.github.com/peterkraume/95106c5b27615e06dcfcb01a62b2a30c