Attach editor to existing contentEditable about wysihtml5

[julesbou]

Hi, i'm facing the same problems, i've tested many editors and for the moment wysihtml5 is the best i've found so far (aloha editor is just too huge in term of size and complexity)

You can use existing divs instead of a textarea with this snippet:

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

    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
}

Hope it work for you.

You can also refer to these issues for more informations:

#35
#33

[tiff]

I'm considering to implement something like this in wysihtml5. Thanks @gordonslondon for your work.

[julesbou]

@tiff Great!

As a side note if i use innerHTML in wysihtml5.views.Textarea.prototype.setValue it's no more secure. In my case i'm sanitizing htlm on the server side before calling wysihtml5.views.Textarea.prototype.setValue to be safe.

[wimleers]

@tiff Do you have any timeframe for this? The "true WYSIWYG" goal that's described here (exact same styling while editing as when viewing) is also what we are after!

[tiff]

@wimleers Sorry for the late reply. No timeframe yet. Will keep you up to date.