2

I'd like to be able to use things such as the tag for purposes of using font awesome icons, but CKEditor strips tags like this. If I place when in 'source' mode in ckeditor it gets removed as soon as I return to the standard mode. Is there a way to ensure that ckeditor allows these tags?

I saw that someone provided a solution here How to stop CKEditor 3.6.3.7474 from stripping <script> tags however in drupal 8 admin/config/content/ckeditor/edit/advanced does not exist.

I also saw the CKEditorPluginConfigurableInterface here https://api.drupal.org/api/drupal/core%21modules%21ckeditor%21src%21CKEditorPluginConfigurableInterface.php/interface/CKEditorPluginConfigurableInterface/8.2.x But I wasn't sure how to make use of that.

Is there a way to prevent CKEditor from removing content and tags written in 'source'?

3

As long as you are using Full HTML format it should work fine, e.g. this works no problem:

<a href="https://www.drupal.org/"><i class="fa fa-drupal">&zwnj;</i> Drupal.org</a>

This uses the zero-width non-joiner character instead of a non-breaking-space (makes little difference).

Note you won't see the icon in the CKEditor unless you load Font Awesome into the editorSettings contentsCss.

3

I had the same requirement, I followed this tutorial for that, How to Display Icons in Drupal using Icon API.

It needs two modules (1) Fontawesome and its dependencies Library module & Fontawesome Library. (2) Other module you need is Icon API which has sub-module Icon_filter that will convert the icons in the images.

I am afraid that Icon API module will work for D8 or not, but it has D8 version but unstable as you can see on the module page.

I am using this way on D7 site.

Update: Filter setting

enter image description here

  • I already have the Fontawesome library included as part of my theme. is there a way I can just get ckeditor to respect me adding a tag without me having to install more redundant modules? – Matt Aug 23 '16 at 17:01
  • I am not sure How will you display Fontawesome icon without the Font-awesome module. If there is a way that using just Font-awesome library, I am not aware. I think fontawesome module in Drupal has been created for displaying Fontawesome icons Otherwise why module was created. – CodeNext Aug 23 '16 at 17:28
  • I'm already able to display fontawesome icons on any page. Font awesome is already included in my theme.libraries.yml file. The only difference is that inside of ckeditor empty <i> tags are removed. Font awesome isn't really the issue. Even if I don't care about font awesome certain html tags are still removed, which is a behavior I don't want. – Matt Aug 23 '16 at 17:39
  • 1
    Are you using the Full HTML text format? Try to use Full format and add the fontawesome like <i class="fa fa-search">&nbsp;</i>, It will not strip off this. – CodeNext Aug 23 '16 at 17:41
  • 1
    I am not sure why it is stripping off, In my D8 trial site if i add it just gets embedded in <p></p> like <p><i class="fa fa-search">&nbsp;</i></p>, but Ckeditor is not stripping off. Just I am posting image of my Full text filter, may it help. – CodeNext Aug 23 '16 at 17:50
-2

CKeditor has Content Filtering feature,

Configure input data filtering in CKEditor. See this blog post for more information about ACF.

By the way, there are two solutions to prevent CKEditor filter contents, one easy solution is to Disabled "Advanced Filtering Feature" at admin/config/content/ckeditor/edit/Full but I don't recommend it in all cases , better solution is specified your tags at admin/config/content/ckeditor/edit/Fullz > Extra allowed content > Extra allowed content enter you desire tags, as an example I told ckeditor, Hey Boy,Please don't filter scripts in my contents

Exclude script tags from filtering in CKeditor

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.