Как вставить самородок в режиме 'codeview' (Summernote wysiwyg) - PullRequest
Новая
       33

Как вставить самородок в режиме 'codeview' (Summernote wysiwyg)

0 голосов
/ 16 марта 2019

Добрый день.У меня есть редактор Wysiwyg ' summernote ' с режимом codeview , включенным по умолчанию, что происходит, когда я хочу добавить nuggetts в области предварительного просмотра кода, но summernote помещает содержимое в другую область слепка.

Внутренне я выполнил процесс для режима просмотра кода, чтобы не отключать инструменты иизмените цвет фона кода, это я сделал именно для того, чтобы можно было добавлять слова через слепки.

Режим «Кодовое представление» активируется, когда некоторый контент вставляется в summernote (callback 'onPaste ')

Что мне нужно, так это то, что при вставке параметра слепка, немедленно оставайтесь в фокусе, который включен при записи, и не оставайтесь вне моей основной области содержимого, то есть, которые остаются внутри контейнера textarea, который соответствует '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>
...