Question

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

这是呈现jQuery的按钮：

＆＃13;

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
}

＆＃13;

工具栏自定义代码：

＆＃13;

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

＆＃13;

问题是，当我点击工具栏中的BR按钮时，它会插入＆lt; br /＆gt;，而不是给我一个实际的换行符。

Answer 1

使用＆＃39; editor.pasteHTML＆＃39;而不是使用＆＃39; editor.insertText＆＃39;这允许插入html而不是强制安全的字符。

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

//创建按钮 var button = ui.button（{ 内容：＆＃39; BR ＆＃39;，工具提示：＆＃39;插入换行符＆＃39;， click：function（）{ //使用＆＃39; hello＆＃39;调用insertText方法在编辑模块上。 context.invoke（＆＃39; editor.pasteHTML＆＃39;，＆＃39;
＆＃39;）; } }）;

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

1 个答案: