javascript - Summernote custom dialog and button - Stack Overflow

admin管理员组

文章数量:1023063

I try to implement Summertnote editor. Here is the JS code:

$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
    var ui = $.summernote.ui;
    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'Ciao!',
        click: function () {
            // invoke insertText method with 'hello' on editor module.
            context.invoke('editor.insertText', 'hello');
        }
    });
    return button.render();   // return button as jquery object
}
function autoFormat() {
    var totalLines = editor.lineCount();
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
    lang: 'it-IT',               // set italian language
    height: 350,                 // set editor height
    width: 350,                  // set editor width
    minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    dialogsFade: true,           // set fade on dialog
    prettifyHtml: false,
    toolbar: [
        ['mybutton', ['hello']]
    ],
    buttons: {
        hello: HelloButton
    },
    codemirror: {                // codemirror options
        mode: "text/html",
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        theme: 'monokai',
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    }
   },
    focus: true  set focus to editable area after initializing summernote
});

I get the code here: So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?

Thanks

I try to implement Summertnote editor. Here is the JS code:

$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
    var ui = $.summernote.ui;
    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'Ciao!',
        click: function () {
            // invoke insertText method with 'hello' on editor module.
            context.invoke('editor.insertText', 'hello');
        }
    });
    return button.render();   // return button as jquery object
}
function autoFormat() {
    var totalLines = editor.lineCount();
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
    lang: 'it-IT',               // set italian language
    height: 350,                 // set editor height
    width: 350,                  // set editor width
    minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    dialogsFade: true,           // set fade on dialog
    prettifyHtml: false,
    toolbar: [
        ['mybutton', ['hello']]
    ],
    buttons: {
        hello: HelloButton
    },
    codemirror: {                // codemirror options
        mode: "text/html",
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        theme: 'monokai',
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    }
   },
    focus: true  set focus to editable area after initializing summernote
});

I get the code here: http://summernote/deep-dive/#custom-button So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?

Thanks

• javascript
• jquery
• summernote

Share Improve this question Follow asked Feb 6, 2016 at 17:38 pinguinonepinguinone 48311 gold badge77 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Instead of

  context.invoke('editor.insertText', 'hello');

use

  $('#st-editor').summernote('editor.insertText', 'hello'); 

works only if you have one editor of course. I'm still searching how to get this context thingy passed. Maybe something with onInit, but I couldn't get it working yet.

@wessel code works, for multiple ids I do an iteration using jQuery each: Make sure oyu attach an id attribute to all editors:

        if ($('.summernote').length) {

        var blockQuoteButton = function(itemId) {
            var ui = $.summernote.ui;
            var button = ui.button({
                className: 'note-btn-blockquote',
                contents: '<i class="fa fa-quote-right">Quo</i>',
                tooltip: 'Blockquote',
                click: function() {
                    $('#' + itemId).summernote('editor.formatBlock', 'blockquote');
                }
            });

            return button.render();
        }
        $('.summernote').each(function(k, item) {
            let itemId = $(item).attr('id');
            $('#' + itemId).summernote({
                height: 100,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline']],
                    ['para', ['ul', 'ol']],
                    ['mybutton', ['blq']]
                ],
                buttons: {
                    blq: blockQuoteButton(itemId)
                }
            });
        });
    }

This issue appeared in version 0.8.12. Reverting back to 0.8.10 fixes it

Inside package.json specify

  "dependencies": {
    ...
    "ngx-summernote": "0.7.0",
    "summernote": "0.8.10",
    ...

  },

and run npm install afterwards. It works after that

I try to implement Summertnote editor. Here is the JS code:

$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
    var ui = $.summernote.ui;
    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'Ciao!',
        click: function () {
            // invoke insertText method with 'hello' on editor module.
            context.invoke('editor.insertText', 'hello');
        }
    });
    return button.render();   // return button as jquery object
}
function autoFormat() {
    var totalLines = editor.lineCount();
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
    lang: 'it-IT',               // set italian language
    height: 350,                 // set editor height
    width: 350,                  // set editor width
    minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    dialogsFade: true,           // set fade on dialog
    prettifyHtml: false,
    toolbar: [
        ['mybutton', ['hello']]
    ],
    buttons: {
        hello: HelloButton
    },
    codemirror: {                // codemirror options
        mode: "text/html",
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        theme: 'monokai',
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    }
   },
    focus: true  set focus to editable area after initializing summernote
});

I get the code here: So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?

Thanks

I try to implement Summertnote editor. Here is the JS code:

$(document).ready(function() {
//Summernote
//var te_markdown = document.getElementById("code-markdown");.
var textarea = document.getElementById("code");
var HelloButton = function (context) {
    var ui = $.summernote.ui;
    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',
        tooltip: 'Ciao!',
        click: function () {
            // invoke insertText method with 'hello' on editor module.
            context.invoke('editor.insertText', 'hello');
        }
    });
    return button.render();   // return button as jquery object
}
function autoFormat() {
    var totalLines = editor.lineCount();
    editor.autoFormatRange({line:0, ch:0}, {line:totalLines});
}
$('#st-editor').summernote({
    lang: 'it-IT',               // set italian language
    height: 350,                 // set editor height
    width: 350,                  // set editor width
    minHeight: null,             // set minimum height of editor
    maxHeight: null,             // set maximum height of editor
    dialogsFade: true,           // set fade on dialog
    prettifyHtml: false,
    toolbar: [
        ['mybutton', ['hello']]
    ],
    buttons: {
        hello: HelloButton
    },
    codemirror: {                // codemirror options
        mode: "text/html",
        lineNumbers: true,
        lineWrapping: true,
        extraKeys: {"Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }},
        foldGutter: true,
        theme: 'monokai',
        gutters: ["CodeMirror-linenumbers", "CodeMirror-foldgutter"]
    }
   },
    focus: true  set focus to editable area after initializing summernote
});

I get the code here: http://summernote/deep-dive/#custom-button So, In this example I want to simply put a "Hello" string clicking the button but it gives me an error "TypeError: context is undefined". Can someone help me?

Thanks

• javascript
• jquery
• summernote

Share Improve this question Follow asked Feb 6, 2016 at 17:38 pinguinonepinguinone 48311 gold badge77 silver badges1717 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

Instead of

  context.invoke('editor.insertText', 'hello');

use

  $('#st-editor').summernote('editor.insertText', 'hello'); 

works only if you have one editor of course. I'm still searching how to get this context thingy passed. Maybe something with onInit, but I couldn't get it working yet.

@wessel code works, for multiple ids I do an iteration using jQuery each: Make sure oyu attach an id attribute to all editors:

        if ($('.summernote').length) {

        var blockQuoteButton = function(itemId) {
            var ui = $.summernote.ui;
            var button = ui.button({
                className: 'note-btn-blockquote',
                contents: '<i class="fa fa-quote-right">Quo</i>',
                tooltip: 'Blockquote',
                click: function() {
                    $('#' + itemId).summernote('editor.formatBlock', 'blockquote');
                }
            });

            return button.render();
        }
        $('.summernote').each(function(k, item) {
            let itemId = $(item).attr('id');
            $('#' + itemId).summernote({
                height: 100,
                toolbar: [
                    ['style', ['style']],
                    ['font', ['bold', 'italic', 'underline']],
                    ['para', ['ul', 'ol']],
                    ['mybutton', ['blq']]
                ],
                buttons: {
                    blq: blockQuoteButton(itemId)
                }
            });
        });
    }

This issue appeared in version 0.8.12. Reverting back to 0.8.10 fixes it

Inside package.json specify

  "dependencies": {
    ...
    "ngx-summernote": "0.7.0",
    "summernote": "0.8.10",
    ...

  },

and run npm install afterwards. It works after that

本文标签： javascriptSummernote custom dialog and buttonStack Overflow