Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Insert HTML in NicEdit WYSIWYG

How can I insert text/code at the cursors place in a div created by NicEdit?

I've tried to read the documentation and create my own plugin, but I want it to work without the tool bar (Modal Window)

like image 696
ThoKra Avatar asked Apr 28 '10 14:04

ThoKra


2 Answers

This is a quick solution and tested in firefox only. But it works and should be adaptable for IE and other browsers.

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);
}
like image 104
Reto Aebersold Avatar answered Sep 25 '22 19:09

Reto Aebersold


Insert Html Plugin

Don't know if this will help or not, but this is the plugin I created for inserting Html at the cursor position. The button opens a content pane and I just paste in the html I want and submit. Works for me!

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

I used the html_add icon from Silk Icons, pasted onto a transparent 18 x 18 and saved as gif in the same folder as nicEditorIcons.gif.

like image 41
CarlP Avatar answered Sep 21 '22 19:09

CarlP