webfashionist/richtext

WYSIWYG editor developed as jQuery plugin

Hi! I'm Bob 👋

💻 I'm a freelance web developer who loves to create individual and custom projects built from scratch. Which is why I developed my own CMS using my own open-source WYSIWYG editor named RichText.

🧑‍🤝‍🧑 Managing a neurodivergent Discord community is part of my free-time where I'm not only developing the custom bots, but also managing the team, community and events.

---

• Freelance Web Developer
• Employed Website Manager
• Discord Bot Developer
• Bachelor of Science (Hons.) in Webdesign & Development
• (Volunteer) Community Manager (on Discord)
• Discord Moderator Programs Alumni (former Certified Moderator)

---

Website - LinkedIn

---

richtext's Issues

pass the data

where can i pass my data.

Font selector

Is it possible to implement an additional button, to change the font name?

Image position is not placed correct and upload

I tried in your demo, while insert image i position between the text. I write demo paragraph and image insert not place at cursor position, it goes to top left or right, so not useful. and how can we set float image position to wrap content.

how can we actual upload image ?

Position is very important factor.

Adding responsive iframes makes iframe show out of editor

When you try to add responsive iframe it makes it absolute positioner which it not okay, because it positions the iframe outside of the editor and it's buggy. Why not just make it 100% width and height to be in vw value, so that the proportion si maintained? I'm using paragraphs, which I don't know if is a clue, but I noticed when the editor is using divs it adds another div with relative style attribute.

Change the height of the editorframe

I cannot change the height fo the editing frame. It persists the same. The 400 stays 400.

Issue with Hyper link when multiple editors are used

Hi
If we are using hyperlink on multiple editor. It is not working as expected.

If we select a part of text in the first editor and choose hyperlink and click ok. The link is added to the start of the editor instead of making the selected text hyperlink.

Thanks,
Naresh

Default Font Familly

I want to implement that when i copy content from other website its by default font-family will be
Anaheim

Clicking on richText is not working from scripts

I'm trying to focus on richtext editor area using jquery.click and jquery.docus functions using all selectors, possibly related to richtext. But nothing works. I added window.bind('click' ... function to catch all e events when something is clicked, I was trying to click on my div tag, which have to be focused, cursor appeared, and all works fine. But when I use jquery.click function, bubbled events are same, but no cursor appeared. How can I focus on richText using jquery?

Formatter not working properly when using ctrl + a

When I try to remove a formatting style from the whole text in RichText - it does not remove all of it, or at some parts - not removing anything at all. I noticed it, because the text I'm formatting has black color added to it, but the formatter tool doesn't remove it.
When selecting the whole text with the mouse is working btw, just when using ctrl + a shortkey.

Un-set textarea.richtext()

I don't seam to be able to find a way to do the exact opposite of what .richText() does.
Revert the enriched textarea to it's old boring simple html text area.

Question for richtext set preview only ?

Can richtext be set only preview ?

Does not have Local Image upload support

Please Add local image upload support :)

Selection isn't being saved properly on focus loss.

I've created a custom form to upload local files, and every time a user tries to use it, the link to the uploaded file gets put at the very beginning of an article user is currently writing. The actual cursor position at the moment when editor loses focus doesn't matter at all. It gets overriden with {start: 0, end: 0} by saveSelection() in case of a simple caret. But, if I actually select some text, it's position is saved just fine, and the link is placed right where it has to be.

Issue when using title option

I am using the text editor for an article creation functionality. There are multiple languages, so there must be an instance of the text editor for each one. I initially thought that the multiple editors on a single page were the cause, but I tried with only a single editor and the problem persists. It is the following:
When I use the title option more than 2 or 3 times the content editor element disappears. The toolbars and content remain, but this element <div class="richText-editor" id="richText-xjr0bk" contenteditable="true">{content here}</div> disappears from the page. Also I noted that in the demo page when I use the heading option it changes the current content, but when I use it on my site it duplicates the content. I attached a screenshot of the issue.

This is the code I use to initialize the richtext editors. And my textearea element doesn't have additional events attached that might mess with the plugin.
`$('.richtext').each(function () {
var id = $(this).attr('id');

            $(this).richText({
                // uploads
                imageUpload: false,
                fileUpload: false,
                // link
                urls: true,
                //media
                videoEmbed: false,
                // translations
                // dev settings
                useSingleQuotes: false,
                id: "richtext-" + id,
                useParagraph: false
            });
        });`

Adding languages versions

Hi, I am using your amazing plugin, but I have a little problem - every time I update the core files my translations (the project is for non-English speakers) for the plugin are gone, which is a bummer, because I have to translate it again, then minify it and upload it to my project.
It would be nice if you can add an array option (or maybe getting langs from stand-alone file) for specific language. This would be great, because it would allow us to use your plugin for multilingual websites.

Do you have a "Font-size"?

Hi, i don't see in RichText "Font-size".
Do you have this in somewhere in the code?

bold, Italic and Under line not working

For multiple rich text the bold, Italic and Under line not working

A few suggestions for better user-experience

Those are not bugs but suggestions! :)

When using RichText with large amount of text in it becomes kinda difficult to navigate through the editor, for lets say - format every heading differently or apply new style to several paragraphs across the whole text.
Is there a way to make user-experience better? Maybe like auto-expanding function so you don't get a scrollbar and maybe the toolbar to become sticky when you have scrolled down (and it's not in the viewport). I noticed with other plugins similar types of behaviour and it makes formatting much easier. The sticky toolbar will be perfect for mobile formatting too!

On select multiple rows on change font, my color and formatting dissapear

When I enter some text in multiple rows and select two or more lines and hit font size, those rows are converted to single one with default color and no fomratting options.

Code view replacing manually input <div> and <p> tags or vice versa if useParagraph is true

I'm running the plugin with jQuery 3.4.1. The issue is that <p> is being replaced with <div> when being manually input in code view (or <div> being replaced with <p> when useParagraph is true). The issue is there regardless of browser vendor and version. I understand there is a default tag used in the default view, but why is manually input HTML being replaced as well. Can this be corrected?

Format remover not working properly?

I'm not sure if it is a bug or not, but when the unformatter tool is always erasing the whole text in the area. Is this made on purpose and if not - is there any chance of implementing the unformatter to work only on selected text?

Problem when having multiple instances of richtext editors in one page.

Hello.

I am currently using your richtext editor and tried to put more than one <textarea> in my HTML with a class to instantiate the plugin.

This happens:
https://imgur.com/a/fMf6j

With that, when I enter html edit mode, every other instances in the page are being changed into html edit mode.

Any clue how to fix it? Or is it a bug?

Thanks!

is there a feature to disable?, so that users cannot do text editing

Describe the problem you'd like to see solved or additional feature for RichText

Is there an existing part of RichText this feature is related to or is it something new?

Why would other RichText users care about this?

On a scale of 1 (sometime in the future) to 10 (absolutely right now), how soon would you recommend this feature to be done?

Feature request checklist

• This is a single feature (i.e. not a re-write of all of RichText)
• The title starts with "Feature request: " and is followed by a clear feature name (e.g.: Feature request: moar cowbell)
• I have searched for existing issues and to the best of my knowledge this is not a duplicate

Editor is not working properly while attaching editor to a textarea returned from ajax

Editor is not working properly while attaching editor to a textarea from the data returned by ajax.
First time ajax request it is working from 2nd time on wards it is not working, is there a way we can clear something like cache etc.

I am seeing the following error in the console

jquery.richtext.js:626 Uncaught TypeError: Failed to execute 'selectNodeContents' on 'Range': parameter 1 is not of type 'Node'.
    at saveSelection (jquery.richtext.js:626)
    at doSave (jquery.richtext.js:720)
    at HTMLDivElement.<anonymous> (jquery.richtext.js:341)
    at HTMLDocument.dispatch (jquery-1.12.4.min.js:3)
    at HTMLDocument.r.handle (jquery-1.12.4.min.js:3)

Thanks
Kartheek

maxlength

Hi

First off, great script, many thanks for a great job!

I've encountered an issue when trying to limit input length to textarea.
Trying to check maxlength=INT with $('textarea[maxlength]').keyup(function(){ it does not work with richtext as it seems div with "richText-editor" class takes over. Could we see an update where the "richText-editor" div inherit the set values such as maxlength from a textarea (if my assessment is correct regarding the problem) ?

Cheers !!

Using RichText as a TinyMCE replacement in WordPress

I'm not sure if this is an issue that can be fixed easily, but I'm looking for a replacement for TinyMCE in my WordPress widget (TinyMCE is causing too many issues that I've given up trying to fix), and so far RichText has proven an editor I really like. However, I've noticed that when I create my text, each paragraph is written into a new <div> as opposed to a <p>, which I know TinyMCE defaults to. But once a paragraph has been hardcoded in (or inserted in via default text), each subsequent paragraph seems to follow suit; it's just when the field is empty that it reverts back to not using paragraph tags. Is there a way to do that in the editor from the first paragraph, so that they are all using <p>s instead of <div>s?

text editor format appending double quotes conflict with json structure

I am loving this Wysiwigg the down of it is that for some reason it's not escaping double quotes correctly and conflicting on the json structure causing it to duplicate the line previously saved.

If you look at my example the text duplicated, if I go on code view and replace double quotes for single quotes it fixes all and saves again without duplicating the content.

https://www.dropbox.com/s/qgsxjg8pf0999q0/Screenshot%202017-07-28%2010.27.17.png?dl=0

https://www.dropbox.com/s/vm0nc6ft66tw217/Screenshot%202017-07-28%2010.27.04.png?dl=0

THE JSON:

{"above_price":"48Hrs</font></b> delivery service with SMS or email notification! because your order is cartPriceTotal**\">**You got UK free track <b><font color=\"#000000\">48Hrs</font></b> delivery service with SMS or email notification! because your order is cartPriceTotal"}

useParagraph: true not working in FF

I set the configuration of my editor to useParagraph: true, but in Firefox 60.0.2 it is still using <div> instead of <p>

Textarea change event?

How can I detect a change in the content of textarea? May be text input or html generated by the editor.

Firefox line breaks

Firefox (v.58.0.2) has been tested and I noticed issues with the line breaks being by default <br> tags, even though that according to their Developer Guide it is a non-standard feature:

Addtionally, Firefox suupports non-standard argument, br, for defaultParagraphSeparator since Firefox 55.

And <div> tags are the standard way to go, described as well in their guide:

Fortunately, in modern browsers things are somewhat more consistent. As of Firefox 60, Firefox will be updated to wrap the separate lines in <div> elements, matching the behavior of Chrome, modern Opera, Edge, and Safari.

For this editor, the browser default is always used. However, if you choose to use <p> tags instead, you might want to set the useParagraph option, which results in document.execCommand("DefaultParagraphSeparator", false, 'p'); being executed. Here as well, Firefox doesn't change the behaviour and adds the "non-standard" <br> tags instead.

Please use Chrome instead if you encounter any issues with it. Known issues with Firefox are, that images (and other elements) might not be placed at the right caret position.

I'd be very thankful for any help on this!

Edit: I just realized, that only with version 60, the standard method using <div>s will be implemented in Firefox. Is there any way to create a workaround until then?

Problem when click undo button while having multiple instances of richtext

Reproducing the issue:

1. Setup two instance of rich text box on same page
   $('.content1').richText();
   $('.content2').richText();

2. Change some text in .content1 text box, and then undo those changes

3. All the text inside .content1 has been copied into .content2
   (i also tried by using ids but no luck)

Load new content not working

Hey Webfashionist, first of all many thanks for this wonderful plugin.

I'm trying to reuse the plugin on a single page but this doesn't seem to work. The user can click on a list of item and each time (s)he does this I would like to load new content (with jQuery) in the textarea. It seems that once the richText() method has been called this is not possible anymore. I've tried to unRichText(), set the new content of the textarea and richText() again, but this doesn't work. Any suggestions on how I could achieve this?

Thanks a lot and regards,

Domien

Remove default span classes

i want to know how i can remove the by default span coming when i am coping the text from other website and add my default font family to the text

Getting error when attaching image

I'm getting an error when attaching error(Cannot read property 'editorID' of undefined). I checked the demo and it also has this issue

How do I bind the data and read it for input and output?

Hi there,

Any idea how we can bind and output the data? I have been trying for few weeks, but can't seems to be able to do it.
Thanks if anyone knows the answer.

the demo doesn't load the css files (404)

https://htmlpreview.github.io
404 site.css
404 richtext.min.css

Any chance to change <p> to <br> ?

Any chance to change <p> to <br> ?I tried to manage the code but no luck

Selection is not active after switching to code.

Is it possible to keep the selected part, in the editor, highlighted when changing to code-mode? This makes editing in codebase faster.

On adding a new URL,the url is displayed inside the url dropdown instead of the content editable area

copy and paste directly causes mess

When a user just copy some text from a webpage and then paste it directly to the richtext it messes up my site after the user saves it. Any tricks, ideas, or fixes please?

Same text is coming for while having multiple instances

I have two more than one content boxs on the same page, if i type anything in first content box same text is copied to remaining content boxs, even i am using ids for each box but no luck.

Can you plse advise.

toggleCode is not defined when calling function from another script?

I might be going about this entirely the wrong way and I'm not sure if this is an actual issue with RichText itself, but if I try and call toggleCode() I get "Uncaught ReferenceError: toggleCode is not defined".

Basically I was trying to toggle "code mode" from another script on the same page by calling this function. For now I have made it work in a hacky kind of way by effectively copying the contents of the original toggleCode() function and creating my own function which I can then call.

Is there an easier and more elegant way to toggle code mode from another script?

Attribute required not working

I've used a textarea to initialize RichText plugin using reachText(). Textarea had the attribute required but when i submit the form it doesn't check it.

Default settings

All text is defaulting with a right alignment. I can't see any way of being able to set left as a default?

Editor, under water, old style green please #33FF33

Hi Bob, could you change the colours of the 'toggleCode' to color #33FF33 and the bgcolor to #282828. Why? old style. The white letters on a dark background isn't pleasing. So my wish....Go for green.

replace <b> and <i> tags by <strong> and <em>

Hi, Is it possible to replace the <b>, <i> and <u> tags for <strong>, <em> or even <span class="underlined">? How? Thank you

Adding html tags if editor is empty

When you submit a form with empty editor it adds <div><br></div> to the POST, which is a bummer, since you can't check very efficiently if it's really empty.

Fontawesome Pro

Hello! Can you add support for the Fontawesome Pro icon pack?
Thanks for the great plugin!

Remove toolbar margin and padding

Make sure to remove margin and padding from .richText-toolbar > ul. Result in Bootstrap 4.3.1 is like this:

empty RichText editor leaves a <br>

when i delete all text from the editor, a <br> will be left, which will be the value on saving the form. the <br> should be removed.