如何在 django summernote 中添加自定义按钮？

问题描述

我想在由 django-summernote 呈现的 summernote 小部件中添加新按钮。我怎么能在这里做？

我这样做了，但小部件中没有任何反应。

<script>
    var HelloButton = function (context) {
    var ui = $.summernote.ui;

    // create button
    var button = ui.button({
        contents: '<i class="fa fa-child"/> Hello',tooltip: 'hello',click: function () {
        // invoke insertText method with 'hello' on editor module.
        context.invoke('editor.insertText','hello');
        }
    });

        return button.render();   // return button as jquery object
    } 

    $('.summernote').summernote({
  toolbar: [
    ['mybutton',['hello']]
  ],buttons: {
    hello: HelloButton
  }
});
</script>

我怎样才能在 django summernote 中做到这一点？

解决方法

django-summernote 有很好的文档记录，您可以按照他们的文档以任何方式对其进行自定义。

要添加自定义按钮，您可以这样尝试：

'toolbar': [
    ....
    ['insert',['link','picture','video','hr','readmore']],['my-custom-button',['color']],...
],

可以在此处找到更多详细信息：https://github.com/summernote/django-summernote

为了处理自定义事件，你也可以在js中注入一些代码。

这里是夏天，而不是深潜

https://summernote.org/deep-dive/

django django