Forum Documentation Showcase Pricing Learn more

Custom rich text editing


#1

I want to build a very simple rich text editor that lets you bold text and maybe italicize. My app is for mobile casual writers. Is there a way to tell a multi-input text field to read certain markers (like * * or [ ] or " " ) as indications to bold the in-between text? I know this works on places like reddit, however I have no clue how to go about setting that up. Ideally, i would be able to tap a button and it would generate the markers in the multi-input field for me so I can just write instead of find them in my keyboard.

thanks


#2

Can you not use the rich text input plug in?


#3

I would prefer not to because the visuals don’t seem very customizable to fit the feel of the app and i literally only need bold and italicize capabilities… is there a way to create a workflow where a button can insert [ b] [ /b] into the input field?


#4

Don’t know to be honest.

You might be able to customise the plugin using themes and or option settings, it is based on the SCEditor, so you might be able to override the defaults.


#5

For info,

I just had a play and it is possible to override the functionality as you can see in the the screengrab, I reduced the toolbar to simply a Bold and italic elements.

To do this I added an HTML element onto the page and put the following javascript into it;

What this basically does is find the element that has the class sceditor-RichTextInput and set its toolbar options.
I managed to work out what the class was by inspecting the source of the page in the dev tools of chrome. :slight_smile:

Based on this, you should be able to fully customize the look and functions of the RichTextPlug to suit your needs.


Rich text with no images enabled - just text
Rich Text Editor - hide toolbar
#6

thanks so much!!! i’m going to look into this. should be perfect :slight_smile:


#8

Hi @DaveA,
it did let me delete some buttons, but couldn’t managed to take the input and put it on a text box or in the database. it’s like the javascript just show it without being able to do something with it…
What could be the solution?
thanks!


#9

You should be able to do a workflow for the input change on the element and the stick it’s contents anywhere, e.g, dB or customstate etc.


#10

ok, hope i got it. Thanks!


#12

Hi Thanks for this. I added the javascript precisely as you described and buttons are reduced. However, this javascript also seems to disable the input itself - I can no longer type in the rich text field. What am I missing (i know zero about javascript and html)


#13

Bookmarked, thanks for sharing! :slight_smile:


#14

I am having the same issue. Did you figure out what the issue is?