StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

PO
text
Body
copied!<p>Your generated HTML has a problem:</p> <pre class="lang-js prettyprint-override"><code>parent.$("#data-store").data("content[0]", "<div class="editor ui-resizable ui-draggable" contenteditable="true" style="position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;"><h2 class="text2">Titsadasdle</h2><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up2 icon-on-edit" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down2 icon-on-edit" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash2 icon-on-edit" src="/assets/icon_trash.png" style="z-index: 2;"><i class="icon-move icon-on-edit" style="z-index: 2;"></i><i class="icon-font font2 icon-on-edit" style="z-index: 2;"></i><img class="icon-font-size icon-on-edit" src="/assets/font_size2.png" style="z-index: 2;"></div><div class="ui-wrapper ui-draggable" style="overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;"><img id="link1" style="position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;" src="http://i.imgur.com/qTXDZhT.png " class="ui-resizable"><div class="ui-resizable-handle ui-resizable-e" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-s" style="z-index: 90;"></div><div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90;"></div><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"><img class="icon-layer-up icon-on-img" src="/assets/icon_layer_up.png" style="z-index: 2;"><img class="icon-layer-down icon-on-img" src="/assets/icon_layer_down.png" style="z-index: 2;"><img class="icon-trash1 icon-on-img" src="/assets/icon_trash.png" style="z-index: 2;"><img class="icon-copy-el icon-on-img" src="/assets/icon_copy.png" style="z-index: 2;"></div>") // ^ etc. </code></pre> <p>There ae unescaped quotes throwing spanners in the works. Calling <code>.html_safe</code> isn't enough here; you'll need to run the HTML through a bit of code to replace <code>"</code> with <code>\"</code>. Fortunately, this is a simple task:</p> <pre class="lang-rb prettyprint-override"><code>tmp = @content[n.to_s].html_safe begin # regex matches a double-quote not preceded by a backslash tmp[/(?<!\\)"/] = '\\"' while true rescue # the regex failed; all quotes are now escaped (or no quotes in the first place) end # now echo tmp </code></pre> <pre class="lang-js prettyprint-override"><code>parent.$("#data-store").data("content[0]", "<div class=\"editor ui-resizable ui-draggable\" contenteditable=\"true\" style=\"position: absolute; left: 298.1111602783203px; top: 193.09722900390625px;\"><h2 class=\"text2\">Titsadasdle</h2><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up2 icon-on-edit\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down2 icon-on-edit\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash2 icon-on-edit\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><i class=\"icon-move icon-on-edit\" style=\"z-index: 2;\"></i><i class=\"icon-font font2 icon-on-edit\" style=\"z-index: 2;\"></i><img class=\"icon-font-size icon-on-edit\" src=\"/assets/font_size2.png\" style=\"z-index: 2;\"></div><div class=\"ui-wrapper ui-draggable\" style=\"overflow: hidden; position: absolute; width: 128px; height: 128px; top: 285.1111125946045px; left: 52.111114501953125px; margin: 0px;\"><img id=\"link1\" style=\"position: static; margin: 0px; resize: none; zoom: 1; display: block; height: 128px; width: 128px;\" src=\"http://i.imgur.com/qTXDZhT.png \" class=\"ui-resizable\"><div class=\"ui-resizable-handle ui-resizable-e\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-s\" style=\"z-index: 90;\"></div><div class=\"ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se\" style=\"z-index: 90;\"></div><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"><img class=\"icon-layer-up icon-on-img\" src=\"/assets/icon_layer_up.png\" style=\"z-index: 2;\"><img class=\"icon-layer-down icon-on-img\" src=\"/assets/icon_layer_down.png\" style=\"z-index: 2;\"><img class=\"icon-trash1 icon-on-img\" src=\"/assets/icon_trash.png\" style=\"z-index: 2;\"><img class=\"icon-copy-el icon-on-img\" src=\"/assets/icon_copy.png\" style=\"z-index: 2;\"></div>") </code></pre> <p>You can use a similar strategy to escape anything else that JavaScript might complain about.</p>

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