Simple Text Editor That Will Automatically Style Certain Phrases
New here? Learn about Bountify and follow @bountify to get notified of new bounties! x

The title says the bulk of what I'm after. I am interested in, more or less, a text box (preferably with simple WYSIWYG functionalities) that when typed into will format any specified phrases a certain way. For example, if I type "Friends was only an okay show", a style would automatically be applied to it, let's say that the font size would become uppercase and bold. Once I have the text, I'd want to be able to copy all of it, styling and all, into a similar processor (namely MailChimp's campaign editor).

The only other criteria I have is that I should be able to add/update queries and their styles. I'd love to have some sort of GUI for this as well so that I could select text and apply a style with a button, but this ultimately isn't required; would be willing to tip, though, if possible.

I am okay with this being delivered as a JSFiddle or with a similar site; so long as I can see it in action and set my queries + styles in a hopefully not so complicated way.

Please let me know if I need to add any more info for context or anything. Thanks.

Something along the lines of this? https://summernote.org/ (Click "Code View" on the upper right to get the markup)
BrianSantoso 2 months ago
BrianSantoso, yeah! A lot like that. kostasx implemented it real well below :)
lovemealatte 2 months ago
awarded to kostasx

Crowdsource coding tasks.

2 Solutions

Winning solution

Here's my take: https://codepen.io/kostasx/pen/vYBLaXW?editors=0010

Preconfigured patterns (along with custom CSS styling) are located in the config variable at the top of the code.

Using the Quill.JS library for the WYSIWYG editor.

Usage/Demo: Video

Hi kostasx, this is AWESOME. Thank you for going above and beyond with the video and everything. Would you be into making an addition or two for a tip(s)? I'd be very interested in adding some kind saving and grammar-checking functionality; though I'm not sure how tough it'd be to implement either
lovemealatte 2 months ago
Thank you. Yes, I am interested in additional coding. Let me know about the tasks. You can PM me also.
kostasx 2 months ago
Great. I will gather my thoughts some more and PM you. Thanks.
lovemealatte 2 months ago

Here is my version,

  • I used CKEditor as WYSIWYG editor.
  • You can add phrases and styles to array on javascript window.
  • You must blur or click convert button to complete markup conversion after typing on editor.

https://jsfiddle.net/ocanal/swr514vf/3/

Hi, thanks for this, it wasn't quite what I was after but I appreciate it
lovemealatte 2 months ago
View Timeline