Create a JS-based WYSIWYG Editor integrated into WordPress Website
I run a WordPress-based website that is a UGC (User Generated Content) platform.
I want users to be able to format their blog posts before publishing. WordPress core and TinyMCE are too heavy and too expensive, respectively.
I want to implement the same functionality of TinyMCE 7 (free version) via custom code in my site.
Requirements of the WYSIWYG Editor:
– Support for bold, italics, underline, link insert, link remove, align, highlight, font size, font-family, tables, and more.
– Support to format HTML tags automatically. Auto add/remove tags to make programmatic sense.
– Auto format text pasted from WordPress
– Proper functions so that I can programmatically insert content in the editor.
– Quickbar to show relevant tools easily.
– Basic image manipulation like alignment and size.
– Support to have it as fullscreen with a click of button.
– and anything else that the free version of TinyMCE can implement
– No libraries. Libraries make things heavy, and I would want a lightweight tech stack. You can use jQuery since WordPress already uses it, but any additional library would be a big no-no.
– Functions: Let’s make functions, hardcoding everything can be fast, but not scalable. This project is just beginning, we would need to customize and make changes, so making functions from your side would help us with the same. Make functions that we can directly plug into (like default content when loading the Editor, function to add buttons to toolbar). We are working on a massive project. Currently its our first time with you, so this would be phase 1 of our 3 part plan. Once we are through with it and have good experience with the dev, we will be putting up another order in late May or early June.
– Should have hashtag support, like in Twitter/Insta. If we type a hashtag, it should automatically convert it into a link (I will take care of the backend)
– Autocomplete links: Shouldn’t be difficult, but using regex or whatever you like, when you see a text URL auto, convert it into a hyperlink
– Block tags: Auto block and remove certain tags, like someone is trying to insert scripts, block ’em.
– Preferably Inline editor like Gutenberg. The current setup of everything being at the top is a bit old-fashioned, though completely functional. A block-based system with a modern inline editor would be really great.
– Shortcuts: It should support shortcuts. Obviously, things like bold, italics, and underlining should work (duh, it should be obvious). However, we also use CTRL+S in our current system to save the form via AJAX. The saving functionality is built from our side; you just need functionality to pass such key presses out of the WYSIWYG IFrame.
– Buttons: We have a lot of our functionality running over TinyMCE, this includes our own tools for monetisation, inserting YouTube videos, etc. The code for that already exists from our side. We would just need the WYSIWYG to have the functionality to add custom Buttons from our side (just like TinyMCE). We will handle the rest.
– Height: The editor should automatically adapt to the height of the content. Our average content in 1500 words long, so I cannot have an extremely long editor open by default. It should grow its size as the user types
– One thing that has been an issue with most WYSIWYGs is that, let’s say, you insert an image and a table; between them, there is no gap to add another paragraph, which means you mostly have to edit the Source Code to add another paragraph. Not ideal, it should have an add para button for each “block” to insert para below/after every block
– Noneditable: Like I mentioned, we have some buttons to insert specific content. This content could include shortcodes, embeds, and various things that are plug-and-play; there is no need for the user to edit. So, once added, we want them to be non-editable by the user. They can backspace it to remove it but can’t, as such, change it. So, perhaps a CSS class that makes the div and all its children uneditable.
