Cannot show html correctly

[eguitarz]

When I was setting value="<p>Hello world!</p>", it doesn't show Hello world! in contenteditable, instead it shows <p>Hello world!</p>. I noticed it always render value with $.text() (refer to https://github.com/AddJam/ember-content-editable/blob/master/addon/components/content-editable.js#L79 )

Shouldn't it use $.html() to render when I set type=html?

[chrissloey]

I think this would actually take a bit more effort to solve unfortunately.

If we change it to use $.html() then you do get the initial desired effect in the output, but the value reported back to you by the ember-content-editable will be stripped of the tags. The problem is that we can't use html() to extract the current value from the element because browsers put their own (varying) html into the editable area.

Another issue is that if the user types html into the element, it still won't display. We'd probably need to set the value in the element after every user change

I'm not going to have time to try and solve this for a while but I'm open to pull requests if you want to take a shot. We'd probably need to keep track of what the content should be based on key events etc rather than based on looking at what's in the DOM, and then whenever what we think should be displayed changes we would update the element with $.html().

[JennieJi]

@eguitarz , though this issue exists for so long, I met this problem again for some features like showing some styles during text editing.
I tried hard and get a solution which might solve this by extending component.

• First, you need a HTML escape, like this: https://gist.github.com/JennieJi/2978ea7d34c62eba6288cd753b9de533

• Then, create a component, and rewrite _setValue_ method.
  Original code:

  setValue() {
    if (this.element) {
      this.$().text(this.get('value'));
    }
  }

  Extended component:

    import ContentEditable from 'ember-content-editable/components/content-editable';    
    export default ContentEditable.extend({
      setValue() {
        let result = htmlEscape(this.get('value'));
        if (this.element) {
          // make something to HTML here 
          // Exp:
          result = result.replace(/#(\S+)/g, '<span class="hashtag" contenteditable="false">$1</span>');
          return this.$().html(result);
        }
        this.$().html(result);
      }
    }

[st-h]

We no longer do support rendering html as of version 1.0.0 as this addon focuses on being a replacement for input elements. Please see #36 for more details.
Please look into available wysiwyg editors if you need to render html within a contenteditable.