Note that there are some explanatory texts on larger screens.

plurals
  1. PO
    primarykey
    data
    text
    <p>Thank you so much Tim, I have already tried your Rangy plugin (looking at several previous answers) and it is very close to what I'm looking for. Unfortunately I have noticed a strange behaviour in FF while moving the cursor through arrow keys. Left arrow doesn't work when the cursor comes into a span colse to another span.</p> <p>I try to be more clear:</p> <pre><code>&lt;div contenteditable='true' id='THE_EDITOR'&gt; some text &lt;span class='in_red'&gt;other in red&lt;/span&gt;&lt;span class='in_blue'&gt;||or in blue&lt;/span&gt; &lt;/div&gt; </code></pre> <p>I've used "||" to represent the cursor. In this case: <code>&lt;span&gt;&lt;/span&gt;&lt;span&gt;||&lt;/span&gt;</code> Left arrow fails to move the cursor in FF (I don't understand the reason) but works correctly if there is at least one character between the two elements: <code>&lt;span&gt;&lt;/span&gt;[space]&lt;span&gt;||&lt;/span&gt;</code></p> <p>If you want to try to reproduce this "bug" the code is (using JQuery):</p> <pre><code>$("#THE_EDITOR").attr("contentEditable","true").keyup(function(){ var savedSel = rangy.saveSelection(); //this blok is only to clean the HTML code every time $(this).children(".star").each(function(){ $(this).after($(this).html()); $(this).remove(); }); //to wrap the spewial word "*" with a personal formatting span var str = $(this).html(); str = str.split("*").join("&lt;span class='star'&gt;*&lt;/span&gt;"); $(this).html(str); rangy.restoreSelection(savedSel); rangy.removeMarkers(savedSel); }); </code></pre> <p>If you try to type two or more "*" in sequence an then move back using left arrow the cursor will not move. Put a space or another character between them and it will move again.</p>
    singulars
    1. This table or related slice is empty.
    1. This table or related slice is empty.
    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. This table or related slice is empty.
    1. This table or related slice is empty.
 

Querying!

 
Guidance

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