Comment faire pour migrer htmlarea userElements à CKEditor dans TYPO3 8.7?

J'ai besoin de quelques pointeurs pour migrer userElements de htmlarea_rte dans TYPO3 7.6 vers CKEditor dans TYPO3 8.7.Comment faire pour migrer htmlarea userElements à CKEditor dans TYPO3 8.7?

Ou pour reformuler ma question: comment puis-je préfixer liens CKEditor avec HTML personnalisé?

Cette façon dont mes userElements ressemblent:

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

Source

2017-10-19 Peter Kraume

J'ai créé un petit plugin CKEditor pour répondre à mes besoins:

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

 
})();

Le plugin a besoin de cette structure de fichier au travail:

icon-envelope plugin.js icons iconenvelope.png

Intégration dans TYPO3 se fait via ce YAML: editor: externalPlugins: icon-envelope: { resource: "EXT:mytheme/Resources/Public/CkEditorPlugins/icon-envelope/plugin.js" }

Le code complet se trouve ici: https://gist.github.com/peterkraume/95106c5b27615e06dcfcb01a62b2a30c

Source

2017-10-27 08:06:11

Votre question est de savoir comment ajouter ces styles (<i class="envelope"></i> etc.) au CKeditor?

Tout d'abord, ajoutez votre fichier de configuration .yaml (voir https://typo3worx.eu/2017/02/configure-ckeditor-in-typo3/)

puis dans la section # Inline styles vous pouvez ajouter quelque chose comme:

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

Voir aussi ici pour référence: https://processwire.com/talk/topic/8342-adding-css-classes-to-ckeditor/

Source

2017-10-19 08:29:30

Avec 'stylesSet', je peux ajouter des classes à des éléments, mais ce n'est pas ce que je veux, je veux les archiver ici. Je veux insérer l'extrait complet, par ex. '' et ne pas envelopper un texte existant. Ou ai-je besoin de créer un plugin personnalisé pour l'archiver? –

Je voudrais essayer de https://ckeditor.com/cke4/addon/glyphicons avant de créer un plugin personnalisé;) dit que je ne l'aime pas beaucoup en utilisant les balises vides pour ajouter des icônes, je préfère utiliser un ': avant 'pseudo-élément –

Comment faire pour migrer htmlarea userElements à CKEditor dans TYPO3 8.7?

Répondre

Questions connexes