Einfügen von HTML in NicEdit WYSIWYG

Question

Wie kann ich Text einfügen / Code an den Cursor in einem div von NicEdit erstellt?

Ich habe versucht, die Dokumentation zu lesen und mein eigenes Plugin erstellen, aber ich mag es Arbeit ohne die Werkzeugleiste (Modal Fenster)

Answer 1

Dies ist eine schnelle Lösung und in Firefox nur getestet. Aber es funktioniert und sollte für den Internet Explorer und anderen Browsern anpassungsfähig sein.

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);
}

Answer 2

So wie ich dieses Problem gelöst war die nicEdit Instanz DIV abwerfbaren, mit jQuery UI zu machen; sondern auch alle Elemente innerhalb des div abwerfbaren zu machen.

$('div.nicEdit-main').droppable({
    activeClass: 'dropReady',
    hoverClass: 'dropPending',
    drop: function(event,ui) {
    $(this).find('.cursor').removeClass('cursor');
  },
  over: function(event, ui) {
    if($(this).find('.cursor').length == 0) {
      var insertEl = $('<span class="cursor"/>').append($(ui.draggable).attr('value'));
      $(this).append(insertEl);
    }
  },
  out: function(event, ui) {
    $(this).find('.cursor').remove();
  },
  greedy: true
});

$('div.nicEdit-main').find('*').droppable({
  activeClass: 'dropReady',
  hoverClass: 'dropPending',
  drop: function(event,ui) {
    $(this).find('.cursor').removeClass('cursor');
  },
  over: function(event, ui) {
    var insertEl = $('<span class="cursor"/>').append($(ui.draggable).attr('value'));
    $(this).append(insertEl);
  },
  out: function(event, ui) {
    $(this).find('.cursor').remove();
  },
  greedy: true
});

Dann wird Ihren Code oder Text ziehbar machen:

$('.field').draggable({
                appendTo: '.content', //This is just a higher level DOM element
                revert: true,
                cursor: 'pointer',
                zIndex: 1500, // Make sure draggable drags above everything else
                containment: 'DOM',
                helper: 'clone' //Clone it while dragging (keep original intact)
            });            

Dann schließlich stellen Sie sicher, setzen Sie den Wert des ziehbar Element zu dem, was Sie einfügen möchten, und / oder den Code ändern, unter das Element einzufügen (Span) Ihrer Wahl.

        $sHTML .= "<div class='field' value='{{".$config[0]."}}'>".$config[1]."</div>";

Answer 3

Einfügen Html Plugin

Sie wissen nicht, ob dies helfen wird, oder nicht, aber dies ist Plugin ich zum Einfügen von HTML an der Cursorposition geschaffen. Die Schaltfläche öffnet ein Inhaltsfenster und ich nur in der HTML Ich möchte und legt einfügen. Works für mich!

var nicMyhtmlOptions = {
    buttons : {
      'html' : {name : 'Insert Html', type : 'nicMyhtmlButton'}
    },iconFiles : {'html' : '/nicedit/html_add.gif'}

};

var nicMyhtmlButton=nicEditorAdvancedButton.extend({
      addPane: function () {
      this.addForm({
        '': { type: 'title', txt: 'Insert Html' },
        'code' : {type : 'content', 'value' : '', style : {width: '340px', height : '200px'}}
      });
    },

    submit : function(e) {
      var mycode = this.inputs['code'].value;
      this.removePane();
      this.ne.nicCommand('insertHTML', mycode );
    }

});
nicEditors.registerPlugin(nicPlugin,nicMyhtmlOptions);

habe ich das html_add Symbol von Silk Icons , geklebt auf ein transparentes 18 x 18 und als gif im selben Ordner wie nicEditorIcons.gif gespeichert.

Answer 4

Es funktioniert für mich, wenn ich benutze:

function neInsertHTML(value){
    $('.nicEdit-main').focus(); // Without focus it wont work!
    // Inserts into first instance, you can replace it by nicEditors.findEditor('ID');
    myNicEditor.nicInstances[0].nicCommand('InsertHTML', value); 
}

Answer 5

Eine Antwort auf @Reto: Dieser Code funktioniert, ich brauchte nur etwas fix hinzugefügt werden, da es nicht Einsatz nichts, wenn Textbereich ist leer. Auch fügt es nur Klartext. Hier ist der Code, wenn jemand Bedarf es:

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);
}

Answer 6

Ändern follwoing in NicEdit.js Datei

Aktualisiert von Reto Aebersold Am Es wird Null behandeln Knoten Ausnahme, wenn Textbereich ist leer

update: function (A) {
    (this.options.command);
        if (this.options.command == 'InsertBookmark') {
            var editor = nicEditors.findEditor("cpMain_area2");
            var range = editor.getRng();
            var editorField = editor.selElm();
            //  alert(editorField.content);
            if (editorField.nodeValue == null) {
                //  editorField.setContent('"' + A + '"')
                var oldStr = A.replace("<<", "").replace(">>", "");
                editorField.setContent("&lt;&lt;" + oldStr + "&gt;&gt;");
            }
            else {
                // alert('Not Null');
                // alert(editorField.nodeValue + '  ' + A);
                editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) + A + editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
            }
        }
        else {
            // alert(A);  
            /* END HERE */
            this.ne.nicCommand(this.options.command, A);
        }

Answer 7

Mit dieser Funktion arbeiten, wenn nicEdit Textbereich leer oder Cursor ist in dem Rohling oder eine neue Zeile.

function addToCursorPosition(textareaId,value) {
            var editor = nicEditors.findEditor(textareaId);
            var range = editor.getRng();
            var editorField = editor.selElm();
            var start = range.startOffset;
            var end = range.endOffset;
            if (editorField.nodeValue != null) {
                editorField.nodeValue = editorField.nodeValue.substring(0, start) +
                            value +
                            editorField.nodeValue.substring(end, editorField.nodeValue.length);
            }
            else {
                var content = nicEditors.findEditor(textareaId).getContent().split("<br>");
                var linesCount = 0;
                var before = "";
                var after = "";
                for (var i = 0; i < content.length; i++) {
                    if (linesCount < start) {
                        before += content[i] + "<br>";
                    }
                    else {
                        after += content[i] + "<br>";
                    }
                    linesCount++;
                    if (content[i]!="") {
                        linesCount++;
                    }
                }
                nicEditors.findEditor(textareaId).setContent(before + value + after);
            }

        }