Alternative for CKEditor ?

[pwired]

Hi,

I am getting fed up with the automatic <P> behaviour of CKEditor. Tried everything to replace it with a simple <br> but after trying css tricks and fiddling in Details and Input and hours on stack overflow nothing seems to work. Clients want a simple behaviour with an automatic <br> when hitting the enter key and want font size, color, text align, etc. standard in the Editor. Yes I now you can download those plugins. But does anyone know a simple CKEditor replacement that works in Processwire ?

[pwired]

Or maybe I should move on to the PageTableExtended module

[Zeka]

By default in CKeditor: Enter = p, Ctrl + Enter = br. 

Have you actually tried something like https://ckeditor.com/old/forums/Support/trying-use-br-instead-p ? 

 

[pwired]

Hi Zeka

Yes I have tried config.enterMode = CKEDITOR.ENTER_BR;

and all it's variants that supposed to be working. None do make any difference, the <p> tag keeps on popping up.

[pwired]

Quote

By default in CKeditor: Enter = p, Ctrl + Enter = br. 

Shift + Enter seems to work, but still does not get rid off the leading <p> tag

[pwired]

Ok, some progress here

at least I got something to work when I use CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;

now give it some id and I can handle it with some class and css

echo "<div class='cke-content'>$page->body</div>";

 

[pwired]

About installing CKEditor plugins: just installing is not the end of it ?

You also need to add specific words in the CKEditor Toolbar settings, under the Body Field Input Tab,
otherwise nothing will show up in the CKEditor Toolbar.

These specific words seem to be "mystical" words as they are not to be found when you download a plugin,
neither in the plugin zip file. You have to bounce over the Internet a bit to find these words ?

For anyone who is going to install a CkEditor plugin to save some time finding these words,
here are some words I found so far:

For the font plugin the word are: Font, FontSize
For the justify plugin the words are: JustifyLeft, JustifyCenter, JustifyRight, JustifyBlock,
For the colorbutton plugin the words are: TextColor, BGColor,

After entering these words, the corresponding buttons will show up in the CKEditor Toolbar.

And because a picture says so much more, here is one:

 

 

 

[Jonathan Lahijani]

Hopefully CKEditor 5, which I haven't played with much yet, fixes some of the shortcomings of CKEditor 4.

One thing that bugs me with v4 is that you can't apply multiple CSS classes (using the inline styles dropdown) to an element, which in the world of CSS frameworks that take the utility based approach (UIkit 3 being one that has a lot of utility classes), would be very helpful.

Upvote this:
https://github.com/processwire/processwire-requests/issues/217

[pwired]

I have been browsing through the ckeditor plugin repository and stumbled over this div plugin:
https://ckeditor.com/cke4/addon/div

Seems to have 8419824 downloads. I tried it out but did not see any significant advantage
over using the config CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;

[Jonathan Lahijani]

6 hours ago, pwired said:

I have been browsing through the ckeditor plugin repository and stumbled over this div plugin:
https://ckeditor.com/cke4/addon/div

Seems to have 8419824 downloads. I tried it out but did not see any significant advantage
over using the config CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV;

The way I make divs in CKEditor is to use two custom Hanna Codes, which while very reliable and extremely easy to program, may not be the easiest concept to grasp for non-technical people.

[[div class="myclass1 myclass2"]]

your content here, like paragraphs, headings, lists, etc.

[[end-div]]

The concept is based on a simple WordPress plugin I used a while ago (Div Shortcode).

[pwired]

Quote

The way I make divs in CKEditor is to use two custom Hanna Codes

Is there anything to configure in the Body Field settings to allow Hanna Code in CKEditor ?

[Jonathan Lahijani]

After Hanna Code is installed, you must edit your ckeditor field to have the hannacode textformatter.

[Jonathan Lahijani]

Actually what I think you're asking is for the Hanna Code Dialog module. Check it out.

[pwired]

With CKEDITOR.config.enterMode = CKEDITOR.ENTER_DIV; and div added to be allowed

In CKEditor it becomes simply only:

<div id="" class=""> your text here </div>

Easier than Hanna Code