Question

下午好。我默认启用了 codeview 模式的Wysiwyg编辑器“ summernote ”，该怎么办？在代码视图预览区域中添加掘金，但是summernote会将内容放在掘金的其他区域。

在内部，我为代码视图模式创建了一个过程，以不禁用工具并更改代码视图的背景颜色，而我这样做的目的正是为了能够通过掘金添加单词。

将某些内容粘贴到summernote（回调“ onPaste”）

中时，将激活“代码视图”模式

我需要的是，在插入一个块选项时，立即停留在写作中启用的焦点上，并且不要停留在我的主要内容区域之外，也就是说，不要停留在与“ codeview”相对应的容器文本区域内'，并且不在外面：

这是我到目前为止的功能示例： https://codepen.io/fernandocham133/project/editor/AnNmRj

谢谢您的帮助！

//Initialize the summernote
$('#summernote').summernote({
  //We define the tools
  toolbar: [
    ['insert', ['nugget']],
    ['codeview', ['codeview']]
  ],
  //We list the nuggets to use
  nugget: {
    list: [
      'Alguma Coisa 1',
      'Alguma Coisa 2',
      'Alguma Coisa 3'
    ]
  },
  //We run the callback events
  callbacks: {
    //We perform functions when we paste some content
    onPaste: function(e) {
      //We run the methods immediately after having copied some content to preserve the content in the 'codeview'	
      setTimeout(function() {
        //We run 'codeview' mode
        $("div.note-editor button.btn-codeview").click();
        //We changed the background color to 'codeview' mode for white
        $("div.note-editor textarea.note-codable").css('background-color', '#EFECE8').css('color', '#000');
        //We enabled the 'nugguets' tool so that codeview mode does not block
        $("div.note-editor button.dropdown-toggle").prop('disabled', false).removeClass('disabled');
      }, 1);
    }
  },
  //Summernote height
  height: 200
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/css/bootstrap.min.css">
<link rel="stylesheet" href="css/main.css">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.11.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.11/summernote-bs4.js"></script>
<script src="js/nugget.js"></script>



<div id="summernote">

</div>

如何在“代码视图”模式下插入金块（Summernote wysiwyg）

0 个答案: