0

I need to create a very basic online WYSIWYG editor that supports only a few formatting options (e.g., bold, italic, font color). I've tried using a div with contenteditable enabled.

One issue I've encountered is that users can paste text with more formatting options than I want my editor to support (e.g. lists, font size, etc.). Is there a reliable cross-browser approach to ensure that pasted text is converted to plain text stripped of formatting (or better yet, only allows the formatting options that the editor wants to support)?

Here is an example:

http://jsfiddle.net/Bgr7h/

Lorenz Forvang
  • 265
  • 2
  • 12
  • If you don't need rich text, you can simply just make all labels, headings, etc into textfields. ContentEditable/designMode is handled by the browser, I don't think there's a way to change the behavior of this. – Dave Chen Mar 03 '14 at 20:39
  • @DaveChen I would like to display a few rich text properties in the input field: bold, italic, font size, font-family, and font color. But I'd rather only allow plain text to be pasted into the input field. I've edited my question to clarify this point. – Lorenz Forvang Mar 03 '14 at 21:09
  • Use a text editor. Else create it. – M B Parvez Mar 03 '14 at 21:45
  • @WebDevRon I've looked into a some WYSIWYG editors (TinyMCE, ckeditor, Aloha Editor) and they're really overkill for what I need, both in terms of features and file size. That's why I'm considering creating one. And that's why I came here for some help getting started. – Lorenz Forvang Mar 03 '14 at 22:52
  • 1
    The way other WYSIWYG-editors using `contenteditable` implement this is by filtering everything unwanted out of the created DOM … and since you want to implement this yourself, that’s your way to go :-) – CBroe Mar 03 '14 at 23:55
  • 1
    @LorenzForvang: The reason why other editors are so big is that you cannot write a good editor without so much code. Contenteditable is a piece of... you know what and good editor needs to override nearly all its native behaviours. BTW. did you see that you can [build a CKEditor package](http://ckeditor.com/builder) with only those features which you need? – Reinmar Mar 04 '14 at 19:48
  • Reinmar, yes, it has started dawning on me what an undertaking this is. Your [post here](http://stackoverflow.com/questions/16074358/content-editable-text-editors/16085789#16085789) was very helpful. It's a shame that this feature is so hamstrung by poor/inconsistent browser implementations. CKEditor is even more impressive when you had to overcome. – Lorenz Forvang Mar 04 '14 at 21:35
  • Possible duplicate of [Restrict paste in editableContent (HTML / JS)](https://stackoverflow.com/questions/53186433/restrict-paste-in-editablecontent-html-js) – mfluehr Feb 13 '19 at 21:14

1 Answers1

1
var input = document.getElementById("input").innerHtml;

$( ".input" ).keyup(function() {
    if(input.indexOf("<li>")) {
        input.split("<li>").join(" ");
    }
});

this does not work but it a suggestion, you can do something along the lines of that

kevincrab
  • 74
  • 1
  • 7
  • This is essentially what I have now. My problem is that the contentEditable element allows users to paste text with formatting options that I don't want to support. See, for example: http://jsfiddle.net/Bgr7h/ – Lorenz Forvang Mar 03 '14 at 23:49