wysiwyg - Summernote 所见即所得：将代码视图设置为默认视图

Question

我在网上找不到任何关于此的内容。有没有办法将 Summernote（所见即所得的 jQuery 文本编辑器）的默认视图设置为代码/html 视图。我想在登陆表单页面时直接看到 HTML 代码。

谢谢

Answer 1

您可以模拟点击 codeview 按钮（在summernote初始化之后），它对我有用：

$('.summernote').summernote({
     oninit: function() {
         $("div.note-editor button[data-event='codeview']").click();
     }
});

Answer 2

来自Summernote 文档：

在 v0.7.0 之后，每个回调都应该被回调对象包裹。

所以，为了工作，js应该是这样的：

$('.summernote_editor').summernote({
    callbacks: {
        onInit: function() {
            $("div.note-editor button.btn-codeview").click();
        }
    }
});

Answer 3

不是很优雅，我不知道是否有合适的方法，但如果你愿意，可以试试：

据我所知，我看起来并不难，codeview 按钮执行以下操作：

1. 向 div.note-editor 添加一个“codeview”类
2. 禁用所有按钮
3. 将“活动”类添加到代码视图按钮元素。

您可能会发现它还可以做其他事情，但这应该会让您走上一条可行的道路。

                $('div.note-editor').addClass('codeview');
                $('div.note-editor.codeview button').addClass('disabled');
                $("div.note-editor.codeview button[data-event='codeview']").removeClass('disabled').addClass('active');

Answer 4

好吧，您可以使用 init 回调。

$('.summernote').on('summernote.init', function () {
      $('.summernote').summernote('codeview.activate');
    }).summernote({
      height: 300,
      placeholder: 'Paste content here...',
      codemirror: { 
        theme: 'monokai'
      }
    });