在summernote中自定义工具栏按钮上插入html的问题

问题描述：

我想在summernote工具栏中添加2个自定义按钮，1只是简单地添加一个换行符，另一个插入一些小样式的文本。当我使用按钮时，它会清除html，并且不执行所需的结果（换行符或插入小文本）。我怎样才能从工具栏选择插入HTML并让它不被更改？在summernote中自定义工具栏按钮上插入html的问题

这里是按钮呈现的jQuery：

var BR_Button = function (context) { 
 
    var ui = $.summernote.ui; 
 

 
    // create button 
 
    var button = ui.button({ 
 
    contents: 'BR', 
 
    tooltip: 'Line Break', 
 
    click: function() { 
 
     // invoke insertText method with 'hello' on editor module. 
 
     context.invoke('editor.insertText', '<br/>'); 
 
    } 
 
    }); 
 

 
    return button.render(); // return button as jquery object 
 
} 
 

 
var Small_Button = function (context) { 
 
    var ui = $.summernote.ui; 
 

 
    // create button 
 
    var button = ui.button({ 
 
    contents: 'small', 
 
    tooltip: 'Small Style Emphasis', 
 
    click: function() { 
 
     // invoke insertText method with 'hello' on editor module. 
 
     context.invoke('editor.insertText', '<small>small text</small>'); 
 
    } 
 
    }); 
 

 
    return button.render(); // return button as jquery object 
 
}

而且工具栏自定义代码：

$('#id_text').summernote({ 
 
\t \t toolbar: [ 
 
\t \t ['paragraph', ['paragraph']], 
 
\t \t ['fontsize', ['style','fontname','fontsize','height']], 
 
\t \t ['style', ['bold', 'italic', 'underline', 'clear']], 
 
\t \t ['font', ['small','strikethrough', 'superscript', 'subscript']], 
 
\t \t ['color', ['color']], 
 
\t \t ['para', ['BR','ul', 'ol',]], 
 
\t \t ['insert', ['table','link','picture','video','hr']], 
 
\t \t ['codeview', ['codeview']], 
 
\t \t ], 
 
\t \t focus: true, 
 
\t \t buttons: { 
 
\t \t \t \t small: Small_Button, 
 
\t \t \t \t BR: BR_Button 
 
\t \t \t \t } 
 
\t \t });

钍问题是，当我点击工具栏上的BR按钮时，它会插入< br/>，而不是给我一个实际的换行符。

答

而不是使用'editor.insertText'，使用'editor.pasteHTML'和这允许插入html而不是强制安全字符。

var BR_Button = function（context）{ var ui = $ .summernote.ui;

//创建按钮 VAR键= ui.button（{ 内容： 'BR'，工具提示： '插入换行'，点击：功能（）{// 调用insertText方法与' hello'on编辑模块 context.invoke（'editor.pasteHTML'，'
'）; } }）;

在summernote中自定义工具栏按钮上插入html的问题

相关推荐