How insert nugget in 'codeview' mode (Summernote wysiwyg)

问题

Good afternoon. I have my Wysiwyg editor 'summernote' with codeview mode enabled by default, what happens is that I want to add nuggetts in the codeview preview area, but summernote puts the content in a different area of the nugget.

Internally, I made a process for codeview mode not to disable the tools and change the background color of the codeview, this I did precisely to be able to add words through the nuggets.

'Codeview' mode is activated when some content is pasted into summernote (callback 'onPaste')

What I need is that when inserting a nugget option, immediately stay in the focus that is enabled in the writing, and do not stay outside my main content area, that is, that stay inside the container textarea which corresponds to 'codeview', and not outside:

Here is my functional example so far: https://codepen.io/fernandocham133/project/editor/AnNmRj

Thank you for your help!

//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>

来源：https://stackoverflow.com/questions/55198929/how-insert-nugget-in-codeview-mode-summernote-wysiwyg

标签

javascript

jquery

summernote