将棱镜添加到Summernote

Question

有没有办法在Summernote编辑器中添加一个用于Prism的按钮？

我已经在视图中包含了Prism的CSS和JS文件，但是我不知道如何在编辑器中添加它的按钮：

$(document).ready(function() {
  $('.summernote').summernote({
      minHeight: 200,
      toolbar: [
         ['style', ['style', 'bold', 'italic', 'underline', 'clear']],
         ['font', ['strikethrough', 'superscript', 'subscript']],
         ['fontsize', ['fontsize', 'fontname', 'fontsizeunit', 'height']],
         ['color', ['color']],
         ['para', ['ul', 'ol', 'paragraph']],
         ['table', ['table']],
         ['insert', ['link', 'emoji', 'picture', 'video']],
         ['view', ['fullscreen', 'codeview', 'help']]
      ]
  });
});

有什么想法吗？

- mafortis

---

你已经尝试过什么了吗？我之前用prettify也做过类似的事情，所以我猜用prism也是可以的。 - Zydnar

我还没有尝试过任何东西，在网络上也找不到有关prism和summernote的文章 :/ - mafortis

使用 prettify，我获得编辑器的 .innerHTML，然后将内容放入<pre>中，之后就很容易了。我制作了一个开关（复选框）来在代码和编辑器之间切换。在源代码模式下，我隐藏了所有按钮，如加粗等。但这个项目不属于我，所以我不能分享它。编辑：你可能找不到任何官方教程来完成它。 - Zydnar

Answer 1

已解决

我通过创建适用于summernote的插件和其他人使用的软件包来解决了我的问题。

截图

编辑器

视图

软件包链接

NPM

GitHub

希望它也能帮到其他人。

- mafortis