Insert HTML/Text @ Cursor Inline Div (NicEdit)

Question

So I haven't found any other inline-div editing jquery/javascript software besides NicEdit. I want to inject a tab, or any html at that matter into the div where my cursor is. I stumbled upon some code here:

function insertAtCursor(editor, value){
    var editor = nicEditors.findEditor(editor);
    var range = editor.getRng();                    
    var editorField = editor.selElm();
    editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
                            value +
                            editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);

}

HOWEVER, it doesn't work if the cursor is exactly on the left side (no text entered, right at the beginning of the line) (nodeValue turns to be null). Also, when text is entered, the cursor jumps around in several browsers (comparing Chrome and Firefox).

Is there a WYSIWYG that supports inline Tabs (tab button) or text inject with Divs (or textareas that mimic divs?) Why is this so hard to find?

score 0 · Answer 1 · answered Sep 13 '12 at 07:08

The following code fix the problem about injecting divs or other html elements and also about no having any text in editor yet:

if(editorField.nodeValue==null){
  editor.setContent('<strong>Your content</strong>');
}else{        
  editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
                          '<strong>Your content</strong>' +
                          editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
  editor.setContent(editorField.nodeValue);
}

score 0 · Answer 2 · edited May 23 '17 at 10:26

0

See my answer HERE. It's a plugin I created to insert html at the cursor position and works well for me.

edited May 23 '17 at 10:26

Community

1
1

answered Oct 13 '12 at 02:13

CarlP

91
1
5

score 0 · Answer 3 · answered Oct 27 '14 at 12:46

First Check for Null Node then Set that Particular Node (editorField value)

    var editor = nicEditors.findEditor("cpMain_area2");
    var range = editor.getRng();            
    var editorField = editor.selElm();
   if (editorField.nodeValue == null) {
        editorField.setContent('<DIV><'+  A +'></DIV>')
         }
    else {

        editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) + A + editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
       }

score 0 · Answer 4 · answered Jul 16 '11 at 02:43

The best inline editor I've found is Google's WYSIWYG that is a part of their open source javascript library called Closure Library: http://code.google.com/intl/sv-SE/closure/library/

Unfortunately, it was not very easy to setup and not that well-documented, but if you manage to get it up and running it has roughly the same features as the Gmail editor or the Google Sites editor, has great browser compatibility and a nice inline feature.

score -1 · Answer 5 · edited Oct 06 '15 at 11:42

-1

First Check for Null Node then Set that Particular Node

if (editorField.nodeValue == null) {
    editorField.setContent(DataFieldValue);
}

edited Oct 06 '15 at 11:42

SuperBiasedMan

9,814
10
45
73

answered Oct 06 '15 at 10:49

mananjmodi

1
1

if (editorField.nodeValue == null) { editorField.setContent(DataFieldValue); } – mananjmodi Oct 06 '15 at 10:50

Insert HTML/Text @ Cursor Inline Div (NicEdit)

5 Answers5