tiff / wysihtml5

Open source rich text editor based on HTML5 and the progressive-enhancement approach. Uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.

This project isn’t maintained anymore

Please check out this fork.

wysihtml5 0.3.0

wysihtml5 is an open source rich text editor based on HTML5 technology and the progressive-enhancement approach.
It uses a sophisticated security concept and aims to generate fully valid HTML5 markup by preventing unmaintainable tag soups and inline styles.
The code is completely library agnostic: No jQuery, Prototype or similar is required.

This project was initiated and is supported by the XING AG. Thanks!

Features

• Auto linking of urls as-you-type
• Generates valid and semantic HTML5 markup (no <font>)
• Uses class-names instead of inline styles
• Unifies line-break handling across browsers (hitting enter will create <br> instead of <p> or <div>)
• Auto-parses content inserted via copy & paste (from Word, Powerpoint, PDF, other web pages, …)
• Converts invalid or unknown html tags into valid/similar tags
• Source code view for users with HTML skills
• Uses sandboxed iframes in order to prevent identity theft through XSS
• Editor inherits styles and attributes (placeholder, autofocus, …) from original textarea (you only have to style one element)
• Speech-input for Chrome

Browser Support

The rich text editing interface is supported in IE8+, FF 3.5+, Safari 4+, Safari on iOS 5+, Opera 11+ and Chrome.
Graceful Degradation: Users with other browsers will see the textarea and are still able to write plain HTML by themselves.

Demos

• Simple Editor with italic and bold buttons
• Editor with advanced functionality

Companies using wysihtml5

• Basecamp – Leading web-based project management and collaboration tool
• XING – Business Social Network with more than 12 million members
• Qype – Largest user-generated local review site in Europe
• and many more …

Wiki

Check our Wiki Pages including a simple Getting Started Tutorial.

Research

Before starting wysihtml5 we spent a lot of time investigating the different browsers and their behaviors.

Check this repository:
https://github.com/tiff/wysihtml5-tests

A compatibility table for rich text query commands can be found here:
http://tifftiff.de/contenteditable/compliance_test.html

A pure native rich text editor with HTML validator and live source preview is here:
http://tifftiff.de/contenteditable/editor.html

Contributors

• @tiff
• @ingochao
• @uwe

wysihtml5's Issues

Passing html element object instead of ID

Not every one of my textareas should have an ID. It's better to pass in the html element directly rather than ask wysihtml5 to get it.

Paragraphs instead of line breaks

It would be awesome if shift+enter would do a line break (
) and normal enter creates a new paragraph. at this point whitespaces are just done using line breaks

Event for change

Is it possible to hook onto event that is fired when anything changes?

Current 'change' is fired after wysiwyg losing focus and that makes it impossible to build for example mentions upon it (like @ on FB or on GitHub).

insertImage does not update current selected image in editor

Following the steps below:

1. Insert an image
2. Select image (for replacing)
3. Insert another image

I expect: another image in editor
But I got: no image in editor

Reading the source code I came to insertImage.js, line 39 that makes the code return, after finding out that an image is selected in editor. So the another image does not get inserted in editor.

It's really a bug or it's the expected behavior?

Thanks for the awesome work.

wysihtml5 focus/click iphone

Hi Christopher,

First thanks for this rich text editor which is very good !

Secondly, i'm trying to make the focus work on an iphone ... seems too hard for me :/

To simulate the click event (safari ios don't work with focus(), it seems that we have to simulate a click event to make the iphone keyboard appear), I've tried this :

• "document.getElementsByClassName("wysihtml5-sandbox")[0].contentWindow.document.body.click();"
• This jquery trick : $(".wysihtml5-editor").show().focus().click().hide();

But nothing is working ...

Maybe you have a solution for that ?

Thanks in advance,

François.

Any examples for using Save feature?

Why is a request to 'about:blank' triggered when the editor is initialized?

• I'm working on a Backbone app that allows you to edit different records.
• When you click on a new record, the form view for that record is rendered, containing 5 wysihtml5 textareas.
• At the same time 5 requests to about:blank are triggered that don't return anything.
• This causes the browser loading bar to flicker briefly, which I find annoying.
• I encountered this in on the following browsers on Max OS 10.7.3
  • Chrome 19.0.1084.9 dev
  • Chrome 17
  • Firefox 11
  • Safari 5.1.3

What's that request for? Is there a way to suppress it?

Applying certain styles to lists causes the object resizer to appear in IE9

We have a style like this used by our editor. (Our selector is actually more generic, but the problem occurs when it's applied to UL and OLs)

body > ul {
  max-width: 508px;
  overflow: hidden;
}

After much debugging I've discovered that it's causing the object resizer to appear even though we have allowObjectResizing: false in our config.

Screenshot: http://cl.ly/0U2p3v0p1q2X0m112h3u

If I change the style to something like color: red the resizer goes away so it may only be related to layout-type styles.

Alt+i on windows activates italic mode instead of extended characters.

I think this is the same meta key problem we saw with undo...any/all keys that use this pattern will have this problem.

Uncaught Error: NOT_SUPPORTED_ERR: DOM Exception 9

I'm receiving this error when I attempt to call: wysihtml5.selection.insertHTML("

foobar

");
I'm not even sure if this is how you would call this method, although it appeared to be working when I called the insertImage version.

If I find time I'll look into this later and see if I can help you solve it. But it's Friday and I'm going home. ha ha.

line 2345 RC1 0.3

// Test for existence of createContextualFragment and delegate to it if it exists
if (api.util.isHostMethod(range, "createContextualFragment")) {
rangeProto.createContextualFragment = function(fragmentStr) {
return this.nativeRange.createContextualFragment(fragmentStr);
};
}

"alt-z" should not be undo with Windows+Polish keyboard

If you have Windows set to use the "Polish (programmer)" keyboard layout, you expect "alt+z" to insert "ż" (z with a dot over it). But wysihtml5 always maps alt+z to "undo", regardless of the default behavior.

This is happening in undo_manager.js in the "keydown" event handler, here: https://github.com/xing/wysihtml5/blob/master/src/undo_manager.js#L42-58

I'm not confident enough about the side-effects to say what the correct fix here is; maybe avoid mapping meta+z to "undo" when the platform is Windows?

classes become inline styles in chrome

in chrome, when you
add a css class to the whole text, delete all of it and start writing again
write a few lines, add a class to them, make a list of the
and probably other scenarios
the classes become inline styles..

Javascript API reference link is 404

From here: https://github.com/xing/wysihtml5/wiki/Getting-Started

To here: https://github.com/xing/wysihtml5/API

Does this exist somewhere else?

Using arrow keys for navigation broken in Firefox

Basically the events aren't captured by the editor, so the entire page scrolls instead.

Looks like Quora had a similar problem: http://www.quora.com/How-did-Quora-fix-the-contentEditable-bug-in-FF

Allow attributes without overriding or checking them

I'd like to allow my div tags, for example, to have the attribute "id", but there doesn't seem anyway to do this with the existing parser rule options. What am I missing?

Autoresize the content area?

Is there any way to auto resize the editing area based on the size of the content?

Pasting text behavior

Pasting text (cmd+v) on Chrome (OSX) will cause the textarea to lose focus.
Pasting text (cmd+v) on Firefox 3.6 (OSX) will cause the textarea to keep focus, but will move the cursor to the beginning of the textarea.

Relative paths in href

Setting "check_attributes" to "url" precludes relative paths.

Paragraphs are <br>s

A paragraph should return a paragraph, not a bunch of <br>. This is terribly unsemantic and will make global CSS changes for "paragraphs" nearly impossible.

Currently:

Paragraph 1
<br>
<br>
P2
<br>
line break on P2

Should be:

<p>Paragraph 1</p>
<p>P2<br>line break on P2</p>

Attach editor to existing contentEditable

For my use case, I'm not providing a textarea for editing text. Instead I'm taking the actual page for the final content and adding contentEditable to a container surrounding the content area (only if you have the right permissions though). The idea being that I'm editing content exactly as it will appear when saved.

Is it possible to do this without hacking the codebase too heavily? I guess the closest existing thing to what I want is AlohaEditor, but I want the more barebones solution provided by wysihtml5.

Allow using a div instead of a textarea

Actually we need a textarea to initialize a wysihtml5 editor. Maybe allowing a div too (with contentEditable) could be great.

Here's the code to do it (a little bit hackish):

// Allow wysihtml5 to work with div instead of textarea
wysihtml5.views.Textarea.prototype.getValue = function(parse) {
    var value

    if (parse) {
      value = this.parent.parse(value)
    } else {
      value = $('<div/>').html(this.element.innerHTML).text()
    }

    return value
}

wysihtml5.views.Textarea.prototype.setValue = function(html, parse) {
    var method = 'innerHTML'

    if (parse) {
      method = 'innerText'
      html = this.parent.parse(html)
    }

    this.element[method] = html
}

EDIT: just close the issue if it's not how wysihtml5 should work :)

Styles are not applied correctly on an iframe replacing a textarea with the required attribute

In my code I've added a required attribute to the textarea in the example that comes with the download.
<textarea id="textarea" placeholder="Enter text ..." required></textarea>

Doing so exposed some unexpected behavior of the functionality that applies styles form the textarea to the iframe containing the wysihtml5 editor. The problem I'm seeing is that even though the editor has content, it is always being styled as if it was in an error state.

I dug in, and basically, it seems that only the initial styles are copied from the text area element to the iframe. This means that the iframe is styled only with the values associated with the required and invalid pseudo classes. Or seen from another perspective, the styles associated with required and valid pseudo classes are never applied to the iframe. Below you'll see the CSS that can be used to address the different states of a textarea with the required attribute-- invalid, invalid with focus, and valid.

Also attached is a screenshot of the editor with valid content but the invalid styling.

<style>
textarea:required:invalid,
input:required:invalid{
    border: 1px solid orange;
}
input:focus:required:invalid:focus,
textarea:focus:required:invalid:focus 
{
    border: 1px solid red;
}
textarea:focus:required:valid:focus,
input:focus:required:valid:focus{
    border: 1px solid green;
}
</style>

Developing Custom Commands - any additional documentation?

Is there any more documentation or resources on writing custom commands beyond the source of the existing commands (and commands.js - which is pretty nicely documented, by the way!)

I need to write a sort of oEmbed command, and want to use the built-in dialog handling (round-trip - using the dialog to edit existing elements, as well as new elements)

The comments in the code are pretty good, but wanted to check, before I got going, if there was any additional information on best ways to do this sort of thing.

Thanks!

Removes pre-filled textarea of HTML

Does this plugin not support editing a textarea pre-populated with HTML?

eg:

<textarea id="report_front">This is <b>bold</b>...</textarea>

new wysihtml5.Editor('report_front')

The textarea and the wysihtml5 iframe now both display:

This is bold...

instead of

This is bold...

Correcting a misspelled word in Safari replaces the wrong word, triggers undo

Easier to demo with a video: http://cl.ly/0k2O1w3G1O203O223I2o

I tested with Safari Version 5.1.3 (7534.53.10). Works fine in Chrome.

Consider a more permissive license

wysihtml5 looks very promising! I'd love to integrate it as another editor option in Create. However, Create is licensed under MIT and wysihtml5 under the more strict GPL. This would prevent me from distributing the editor, and most implementors from using it.

It would be great if the editor could at least be dual-licensed.

Trigger click on data-wysihtml5-dialog-action="save"

What's the proper way to trigger a save on a dialog via JavaScript? I've tried something like:

$('[data-wysihtml5-dialog-action="save"]').trigger('click');

But it doesn't cause the dialog to save.

Single Toolbar with many editors

I have a page (actually an app) that will have many editable textareas and I just want a single toolbar for these, probably at the top of the page or floating. I've worked out how I can create a Toolbar dynamically using:

var toolbar = new wysihtml5.toolbar.Toolbar( editor, document.getElementById("wysihtml5-toolbar") ); 

but so far I haven't worked out how I can get this to only work with the textarea that has focus.

-Neville

Unbolding within a list jumps the content to a new list item

Reproduced this here:

http://tifftiff.de/wysihtml5/examples/advanced.html

This probably happens with other actions inside of a list, but it's easily reproduced with just bolding.

Hit bold, type something, start making a list. Make a list item with > 1 word, and then another one.

Select one of the words from the first list item:

And after hitting bold again:

Jumps to the next line instead of staying on the current one, unbolded.

Multiple editors per page

It seems multiple editors per page is broken. The second instance on the page seems to work properly, however the first does not behave correctly. For an example, see:

https://github.com/wvl/wysihtml5/blob/master/examples/multiple.html

Is this a known limitation, or is there much standing in the way of it working?

Thanks

Undo doesn't work after a paste

After pasting, cmd-z doesn't undo anything (in Chrome, Safari, and FF). Not sure if this is a bug or a reality of contentEditable.

Undo works fine after typing.

IE9 opening createLink dialog removes selection

Reproduced this on the advanced demo. Steps:

• Type some text
• Highlight a few words
• Click "Insert link" button
• 🐛 Selection disappears
• Fill in URL, hit OK
• Link is attached as expected.

Seems confusing/broken that the editor "forgets" the selection.

console log?

I get: Heya! This page is using wysihtml5 for rich text editing. Check out https://github.com/xing/wysihtml5

in my console.

That probably should not be.

There's no reason for me to use 2 versions of a script because my deployment process has a best in class minification process.

Thanks.

Uneditable block

I've been attempting to create an item inside the editor that the only method the user has to edit it is through a menu. I was able to get it somewhat working using a figure tag with contentuneditable="false" but the behavior was understandably flawed. Is there a method for grouping a set of tags together in this manner? This may be a outside of the scope of the editor.

Various characters should be converted to entities on paste.

I only tested this in the demo linked from the readme, so my appologies if this is already covered in a branch or something.

Characters such as emphasis dashes, left and right quotation marks, and ellipsis should be converted to their respective entities when pasted from an outside source. This is one of our biggest headaches when handling content pasted from word documents.

If it's helpful, here's the replacement block that I use in my markdown parser:

text = text.
    replace( /\u2026/g  , '…').
    replace( /\u00AB/g  , '«' ).
    replace( /\u00BB/g  , '»' ).
    replace( /\u201C/g  , '“' ).
    replace( /\u201D/g  , '”' ).
    replace( /\u2018/g  , '‘' ).
    replace( /\u2019/g  , '’' ).
    replace( /\u2014/g  , '—' ).
    replace( /\u2013/g  , '–' ).
    replace( /\u2022/g  , '•'  ).
    replace( /\u2122/g  , '™' ).
    replace( /\u00A9/g  , '©'  ).
    replace( /\u00AE/g  , '®'   );

Can't dynamically change editor styles

I was trying to figure out how to dynamically apply styles to the editor. I found this solution (using jQuery):

$(".wysihtml5-sandbox").contents().find("body").css("color", "blue");

Problem is that every time the editor receives focus, the original styles are applied. To avoid this I tryied to use the onFocus event:

function applyStyles() { $(".wysihtml5-sandbox").contents().find("body").css("color", "blue"); }
editor.on("focus", applyStyles);

But that doesn't work either, because the onFocus event is called before the original styles are applied to the editor. Is there any solution to this?

Thanks!

IE8 Insert Image

When inserting image somewhere inside text, the image is always inserted at the beginning of document.

Proposal: support callables on check_attributes

I do not know if it's possible to extend current check_attributes but I saw that it does not support callables. So I'm opening this issue for discussion.

Sometimes we need to check a tag attribute in a not-so-generic way, for example:

<img src="/path/instead/url" />

So what to do? The proposal is for supporting something like this:

            "img": {
                "check_attributes": {
                    "width": "numbers",
                    "alt": "alt",
                    "src": function(value)
                    {
                        return value.substr(0, 1) == "/"
                             ? value
                             : null;
                    },
                    "height": "numbers"
                }
            },

The change would be minimal:

parse.js, line 232

       for (attributeName in checkAttributes) {
+        methodName = checkAttributes[attributeName];
+        if (typeof(methodName) === "string") {
+            method = attributeCheckMethods[methodName];
+        }
+        else {
+            method = methodName;
+        }
         if (!method) {

IE(9): error focusing on hidden element

Hey there, we're exploring using this editor at 37signals, and I ran into a small issue in IE9. Here's an example test case:

<!DOCTYPE html>
<html lang="en">
<head>
<title>test </title>
  <script src="wysihtml5-0.2.0.js" type="text/javascript"></script>
  <meta charset="utf-8">
</head>

<body>
  <div style="display: none;">
    <textarea id="editor"></textarea>
  </div>
  <script type="text/javascript" charset="utf-8">
    new wysihtml5.Editor("editor", { style: true })
  </script>
</body>
</html>

The problem occurs when using { style: true } on a textarea that's hidden. Here's the resulting error in IE:

SCRIPT16389: Incorrect function.

wysihtml5-0.2.0.js, line 6887 character 7

The problematic code is here:
https://github.com/xing/wysihtml5/blob/master/src/views/composer.style.js#L64-65

The element responds to setActive, but calling it results in the error (presumably because the element is hidden). Removing that condition altogether and relying on the more verbose code below works fine. I'd be happy to provide a pull request to do just that, but wanted to check with you first to see if there's other options.

I'm just a day or two into exploring wysihtml5 and so far it's great! Thanks for your work.

After inserting a block element, new lines are generated using DIVs, not BRs

When normally entering text, pressing enter generates a <br>, but after inserting a block element (I tried lists and headers), newlines are created by wrapping the text in a div. Any idea what's up here?

Type lines of text normally:

line one<br>line two<br>line three

Typing lines of text after a list:

<ul><li>one</li><li>two</li></ul><div>line one</div><div>line two</div><div>line three</div>

bold and Italic

Although <b> and <i> are very much a part of the HTML5 spec they no longer mean 'Bold' and 'Italic'.
So UI icons representing bold and italic need to use <strong> and <em>.

<b> according to the spec is used to make text “stylistically offset from the normal prose without conveying any extra importance.
<i> represents text that’s “in an alternate voice or mood, or otherwise offset from the normal prose”

this article sums it up well
http://www.impressivewebs.com/bold-italic-html5/

Deleting a bullet in a list makes the text monospaced (cosmetic).

If you delete a bullet in a list, the text that used to follow said bullet is displayed in a monospaced font.

It remains like this until you show the markup (which is normal) and come back to the editor.

Happens in Chrome 18, Ubuntu 11.04.

insertHTML & insertImage don't work before editor is clicked

After editor is initialized, calling execCommand with insertHTML & insertImage don't work before you click in the iframe contentEditable area.

Editor loads incorrectly in ajax generated pages

When trying to initialize the editor withing an ajax generated page the generated iframe is not editable.

jQuery problem

Here is the error (copy from firebug) :
c is undefined
hasElementWithClassName(c=undefined)wysiht....min.js (ligne 134)
_initSandbox()wysiht....min.js (ligne 219)
constructor(a=Object { _constructing=true, config={...}, events={...}, more...}, b=undefined, c=Object { style=true, toolbar="undefined-wysihtml5-toolbar", autoLink=true, more...})wysiht....min.js (ligne 216)
extend()wysiht....min.js (ligne 105)
extend()wysiht....min.js (ligne 103)
constructor(a=undefined, d=Object { toolbar="undefined-wysihtml5-toolbar", parserRules={...}})wysiht....min.js (ligne 257)
extend()wysiht....min.js (ligne 103)
e(a=undefined)bootst....min.js (ligne 1)
e(b=[label.wysihtml], c=undefined)bootst....min.js (ligne 1)
e()bootst....min.js (ligne 1)
f(a=[label.wysihtml, textarea#rms_newsbundle_articletype_contenu.wysihtml], c=function(), d=undefined)jquery.min.js (ligne 2)
f(a=function(), b=undefined)jquery.min.js (ligne 2)
e(b=undefined)bootst....min.js (ligne 1)
()ajouter (ligne 87)
[Stopper sur une erreur]

...fier=a++))+":"+e,h=c[f];h||(h=c[f]=d.getElementsByClassName(e));return 0<h.lengt...

wysiht....min.js (ligne 134)

Any Examples of Underlined Text?

Trying to output an underline control, can't seem to get it down. Any examples?

Insert html through custom control

I'm probably just missing something simple, but is there a way to insert elements through javascript? We have a custom system for handling images and I need to find some way to hook into that.

Iframe optional

The iframe does not seems to be optional, i've hacked quite a lot to replace it by a div.

Is it possible in a next release to make it optional?

Thank you

Edit input value

Is there a way editing the input value i.e. markup saved previously ?

Specify the text of a link createLink

A few people have requested the ability to specify the text of a link for bootstrap-wysihtml5 (jhollingworth/bootstrap-wysihtml5#42).

Does anyone see any issue's with adding an additional (optional) text property to the object passed in to the createLink command , e.g.

editorInstance.composer.commands.exec("createLink", { href: "http://google.com", text: "Google"});

If this makes sense to you guys I'm happy to implement it

Thanks,
James