Databases
StackOverflow2013
Postsdbo
POHow to select the replaced text on the contenteditable area
Body
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POHow to select the replaced text on the contenteditable area
    text
    copied!<p>I have implemented the feature which wraps selected text in tag. You can try it clicking the 'Apply Style' button.<br> And also I have implemented the feature removing the tag.<br> I want to keep the text selected when the tag is removed but I don't know how to implement it.<br> I have tried it on the following code but it doesn't work...<br> I run this code on Chrome.<br></p> <p><a href="http://jsfiddle.net/f5HaK/3/" rel="nofollow">http://jsfiddle.net/f5HaK/3/</a></p> <p><a href="http://youtube.com/watch?v=VtBSJzoTmys&amp;feature=youtu.be" rel="nofollow">http://youtube.com/watch?v=VtBSJzoTmys&amp;feature=youtu.be</a> <br><br></p> <p><strong>HTML</strong></p> <pre><code>&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"&gt;&lt;/script&gt; &lt;script type="text/javascript" src="js/main.js"&gt;&lt;/script&gt; &lt;link href="css/demo.css" rel="stylesheet" type="text/css"&gt; &lt;title&gt;&lt;/title&gt; &lt;/head&gt; &lt;body&gt; &lt;div id="buttons"&gt; &lt;input id="applyStyle" type="button" value="Apply Style" /&gt; &lt;input id="removeStyle" type="button" value="Remove Style" /&gt; &lt;/div&gt; &lt;div contenteditable="true"&gt;hello world&lt;/div&gt; &lt;/body&gt; &lt;/html&gt; </code></pre> <p><strong>main.js</strong></p> <pre><code>$(function(){ var TextManager = function(){ var sel; var naked; }; TextManager.prototype = { execCommand: function(commandWithArgs, valueArg){ var commandArr = commandWithArgs.split(' '), command = commandArr.shift(), args = commandArr.join(' ') + (valueArg || ''); document.execCommand(command, 0, args); }, applyStyle: function(tagName, className){ this.sel = window.getSelection(); var snipet = '&lt;' + tagName + ' class="' + className + '" &gt;' + this.sel.toString() + '&lt;/' + tagName + '&gt;'; this.execCommand('insertHTML', snipet); console.log(this.sel); this.sel.extend(this.sel.focusNode, 0); }, removeStyle: function(){ var jcurnode = $(this.sel.focusNode.parentNode); this.naked = jcurnode.text(); jcurnode.replaceWith(this.naked); this.sel.extend(this.sel.focusNode, this.naked.length); //here, I'm trying to select text again which I removed the style. }, }; textManager = new TextManager(); $('#applyStyle').on('click', function(){ textManager.applyStyle('div', 'testclass'); }); $('#removeStyle').on('click', function(){ textManager.removeStyle(); }); }); </code></pre> <p><strong>demo.css</strong></p> <pre><code>div { outline: none; font-size: 20px; font-family: 'Meiryo' } #buttons{ margin: 10px; } .testclass{ font-weight: bold; } </code></pre>
 

Querying!

 
Guidance
An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload