Removing <div> from value
friksa opened this issue · 4 comments
When editing the value and pressing enter, you get a
It would be nice to specify that it should be a text only value vs html and then convert all
tags to \r\n
This will make the component more versatile if it can be used as a text only or html editor.
Looking into the best way of handling this right now.
Ok so previously the component was just using jquery .text() on the element to get a value. I'm about to release 0.3 which includes an isText property that can be passed to the component.
If isText is false, it will use jquery .html() and then call htmlSafe() on that to prevent etc showing up in output.
If isText is true, it will use innerText or textContent instead of .text() in order to preserve newlines.
I think the bigger issue here is what you referenced regarding extra <div>s. I looked into it and this sort of behaviour is a bug in webkit rather than in this component. Other tags like spans, font tags etc have been reported too. See this SO thread and this blog post. I'm not sure it's possible for the component to tackle that under every situation.
Workarounds I've found include using display: inline-block on your contenteditable div, which results in no div tags being inserted.
Alternatively you can also pass in a function to the component as stringInterpolator=myInterpolator, when the value is changed it gets passed to the interpolator and the return value is then used. So you could implement a function myInterpolator(value) { /*some code*/ return valueWithNoDivs; }.
isText=true works great and no div present when used. the inline-block workaround works great when isText=false.
Great! :)