New post – New rich text editor for ProcessWire

[ryan]

This week we take a look at a new rich text editor for ProcessWire, why we chose it, some highlights, screenshots, and why we think you’ll like it—

https://processwire.com/blog/posts/new-rte-for-pw/

[Violet]

Wow! Thank you Ryan! ? I read the post and am already drooling over the upcoming editor and its features. If this seems a bit extreme, I should mention that what prompted me to move to ProcessWire (from Wordpress) was the switch to the Gutenberg editor in Wordpress - it was a definite downgrade upon their previous editor, it simply wouldn't let me type my content in as quickly. After moving to ProcessWire I quickly reaped the rewards of its editor and in addition, all the other advantageous features of ProcessWire. As a blogger who owns multiple sites I am constantly writing articles and therefore the choice of editor is extremely important to me.

I am crying tears of joy over the stickybars feature in the new editor ? No more need for scrolling up just to get to the editor buttons again, yay!! I was also thrilled to see that we'll still be able to get spellcheck and wordcount on the new text editor - essential features. And retaining the ability to edit the text as source code is a must-have for those of us who are including affiliate links or ad code in our articles, thank you for ensuring that continues to be provided. The configurability of everything via toolbars and plugins looks great. I'm excited that we can add an undo button on the toolbar (maybe we could do that on the current editor too but if so I never figured it out ?) Thank you for the thorough explanation and all the screenshots, it's very helpful to see what we will be getting.

I am very excited about the new editor and am looking forward to using it!

[Fuzen]

@Violet your comment is very much appreciated. As is your enthusiasm. I’d never considered the sticky bar advantage but your example makes perfect sense.

[markus_blue_tomato]

Can TinyMCE also extended like CKEditor? I'm using a lot @Robin S 's HannaCodeDialog Module.

 

[pwired]

Thanks for this one ... a lot easier to teach to clients.

[ryan]

@Violet Thanks for the great feedback, I appreciate it!

@markus_blue_tomato Yes, I actually find TinyMCE 6 quite a bit easier to extend than CKEditor 4. For instance, here's how you could add a "hello" button to the toolbar:

InputfieldTinyMCE.onSetup(function(editor) {
  editor.ui.registry.addButton('hello', {
    icon: 'user',
    text: 'Hello',
    onAction: function() { 
      editor.insertContent('Hello World!')
    }
  });
});

Then you would edit your toolbar in the field config and type "hello" to it to any toolbars you wanted. Then every time you click the "hello" button on the toolbar, it would insert the text "Hello World" at the cursor. 

Edited October 22, 2022 by ryan
corrected "setup" to "onSetup"

[Violet]

Wow! It gets even better! ?

6 hours ago, ryan said:

Then you would edit your toolbar in the field config and type "hello" to it to any toolbars you wanted. Then every time you click the "hello" button on the toolbar, it would insert the text "Hello World" at the cursor. 

Thank you Ryan for the detail, including an example of actual code (I would never have figured that out on my own). I will definitely be implementing this so I can add my affiliate disclosures at the click of a button! There will no longer be the need to retype the same sentence of text at the top of my articles, or even to copy and paste it... instead I will be able to add it at the click of a button! That is wonderful.