Databases
StackOverflow2013
Postsdbo
POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
 

Note that there are some explanatory texts on larger screens.

plurals
  1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
    primarykey
    data
    text
    <p>I am making a minimal JavaScript WYSIWYG control.</p> <p>I don't want to use document.execCommand because it doesn't allow arbitrary HTML, it's inconsistent across browsers etc.</p> <p>Here is what I have so far stripped down to minimum working code:</p> <p><a href="http://jsfiddle.net/2WxQn/1/" rel="nofollow">http://jsfiddle.net/2WxQn/1/</a></p> <pre class="lang-html prettyprint-override"><code>&lt;button data-action="strong"&gt;&lt;strong&gt;b&lt;/strong&gt;&lt;/button&gt; &lt;button data-action="em"&gt;&lt;em&gt;i&lt;/em&gt;&lt;/button&gt; &lt;button data-action="u"&gt;&lt;u&gt;u&lt;/u&gt;&lt;/button&gt; &lt;p contenteditable&gt;The quick brown fox jumps over the lazy dog.&lt;/p&gt; &lt;script src="http://code.jquery.com/jquery-1.9.1.min.js"&gt;&lt;/script&gt; &lt;script&gt; $( function(){ $( 'button' ).on( 'click', function(){ var selection = window.getSelection(); var range = selection.getRangeAt( 0 ); var action = $( this ).attr( 'data-action' ); var node = document.createElement( action ); var frag = range.extractContents(); node.appendChild( frag ); range.insertNode( node ); return false; }); }); &lt;/script&gt; </code></pre> <p>If some of the selection already contains strong tags (or whatever), how do I make it so that clicking the button a second time removes these tags instead of wrapping the selection with a new strong tag?</p> <p>Writing this question has given me an idea. I will try it now and answer my own question if it works - that way this question is here in case anybody else comes up against this. Otherwise I shall await your assistance with baited breath :)</p> <p>EDIT: obviously if somebody else posts a working solution, I will accept their answer rather than mine if it is better.</p> <p>EDIT(2): so my idea didn't pan out. It turns out that something (probably range.insertNode) will magically balance the tags for you. I don't seem to have enough information from selection, range or frag to always know if the selection is inside a given tag. Any ideas?</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PTQuestion
    1. USnrkn
    1. USnrkn
    plurals
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    1. PO
      singulars
      1. PTAnswer
    1. VO
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. This table or related slice is empty.
      1. VTUpMod
    2. VO
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. USChris
      1. VTFavorite
    3. VO
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. USkicaj
      1. VTFavorite
    1. COI am amazed that you can make a simple WYSIWYG editor with so few code!
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. USUooo
    2. COIt's `extractContents()` that does the magic. To make a well-formed document fragment from an arbitrary range and leave the document in a well-formed state when the range's ends maybe at completely different levels in the DOM tree may require a certain amount of duplication of nodes.
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. USTim Down
    3. COHi @TimDown - you wrote Rangy didn't you? - I don't seem to see anything helpful on the object returned by extractContents - do you have any ideas? What is vaguely taking shape in my mind is that I may have to take the anchorNode and focusNode from the selection, walk up the dom to the nearest common parent of the two, and then try and do some kind of reference counting walking back down so I can balance the tags myself? Do you think I may be on the right track or do you have any other ideas?
      singulars
      1. POMinimal JavaScript wysiwyg - remove tag from selected text if already exists
      1. USnrkn
 

Querying!

 
Guidance
A row detail

Detail views are divided into sections. All the information in the data section comes from columns in the selected row. The other sections display data from other, related rows.

Related data can be related in a to-one or a to-many fashion. Captions of data related in a to-many fashion link to a list view showing a filtered view of the table.

Try moving around until you find a non-empty to-many entry and click on the label to get to one. You can move back to the root by clicking on the database name in the header.

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