Switch from TinyMCE to CKEditor : custom block element

[ceberlin]

I would like to switch from TinyMCE to CKEditor. But I was stopped because I cannot implement a custom block element, like <div>. I need an extra element to be able to style some boxes within the content, normally for highlighting something, or a note. I ckeditor I was using a div and was able to allow it and even able to add a makeDiv button in the tools menu.

Switching to CKEditor failed. I could not find out how to add a button for a custom tag. Is there a way?

The disadvantage of using a <div> is, that the convenient filtering of divs had to be deactivated. While at it, I was thinking of using some other standard block element, like <section>, instead. (SEO does not matter). And the section got filtered by HTMLpurifier anyway. I found no way in Processwire to train HTMLpurifier to accept <section> as an additional tag.

My workaround could be the use of HannaCode. But that is not as convenient.

[virtualgadjo]

Hi,

just in case, you may be interested in this little thing i wrote after a thread i took part of about the same topic 🙂
https://github.com/virtualgadjo/pw-tinymce-div-plugin

have a nice day

 

[ceberlin]

I got Tiny running with divs. Now I need this for CKE, to be able to convert. I now found a  plugin https://ckeditor.com/cke4/addon/div. Very convenient. With this I could figure out DIV in the meantime. I put this in the site/modules/InputfieldCKEditor/plugins and now there is such an element. I am pretty sure that I can tweak this to work for a <section> instead (as a separate plugin based on the same code).

Now the remaining problem is how I get HTMLpurifier to recognize the html5 tag.

[virtualgadjo]

i still have some websites done when pw used cke and the native pw div plugin works fine
i've also used the cke one but those you download often need some dependencies (panel, dialog, richcombo and so on) to work, the div manager one needs dialog

coming to htmlpurifier and acf, i rarely use them but if yes (could be important for front end editing which i never allow...), you can allow some extra content to tell ACF not to delete some tags you need and not to go crazy 😄 (this is more for cke, with tinymce it's a bit simpler with custom json settings like

{
  "extended_valid_elements": "section[width|height|title|aria-labelledby]"
}

just an example you can go far further 🙂

have a nice day

[ceberlin]

Nevermind. I prepare switching to TinyMCE.

[virtualgadjo]

hi,

to be honest when it comes to CKE i tend to use js extra config, for example, in the site/modules/InputfieldCKEditor folder i put a file called config.js with

CKEDITOR.editorConfig = function( config ) {
    CKEDITOR.config.fontSize_sizes = '8/.5rem;10/0.625rem;11/0.6875rem;12/0.75rem;14/0.875rem;16/1rem;18/1.125rem;20/1.25rem;22/1.375rem;24/1.5;28/1.75rem';
    CKEDITOR.config.extraAllowedContent = 'section[id,class]';
};

that will define a custom font-size combo list and, just tried and check this one, allows me to add sections with an id and or classes even with ACF on (new for me as i didn't use them before but it was fun to try 😄) but htmlpurifier off as i don't know how to play with its config, i never did...
i'(m sure it's quite easy to extend up to whatever else you need to allow