Summernote精简版项目符号和数字列表未默认为自定义默认字体大小

时间:2018-07-07 22:37:11

标签: javascript django django-forms wysiwyg summernote

我正在测试summernote所见即所得(WYSIWYG)编辑器,这是Django实现中没有引导的精简版本。除了项目符号和数字大小,其他所有内容似乎都运行良好。它们的默认大小为6,而我的默认fontSize为22。如下所示,fontSize默认为22,对子弹和数字列表按钮没有影响。他们停留在6。我在HTML中使用以下代码:

<textarea id="summernote" name="book"></textarea>
    <script>
      $('#summernote').summernote({
        width: 755,
        height: 300,
        toolbar: [
          ['undo', ['undo',]],
          ['redo', ['redo',]],
          ['style', ['bold', 'italic', 'underline',]],
          ['font', ['strikethrough',]],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
        ]
      });
      $('#summernote').summernote('fontSize', 22);
    </script>

我正在尝试使项目符号和数字与字体的格式匹配,但似乎无法使它们与我的默认fontSize匹配。我在表单中使用SummerNote小部件,如下所示:

widgets = {
    'book': SummernoteInplaceWidget(),
}

我还在HTML标头中使用默认库,如文档所示,如下所示:

<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote-lite.js"></script>

我似乎无法分辨这是否是预期的行为,或者是否有某种方式可以使它们全部同步,字体大小,项目符号列表和数字列表。我尝试将fontSize代码行移到默认参数之前,但这似乎无济于事。预先感谢您的任何想法。

enter image description here

enter image description here

1 个答案:

答案 0 :(得分:0)

将配置从嵌入式HTML移到Django的settings.py文件中,即可解决此问题。

我在我的settings.py文件中定义了配置,如下所示:

distributionUrl=https\://services.gradle.org/distributions/gradle-2.10-all.zip

在settings.py文件中定义了summernote配置之后,然后定义了默认字体大小和CSS中编辑器的位置,如下所示:

SUMMERNOTE_CONFIG = {
   'summernote': {
        'toolbar': [
          ['undo', ['undo',]],
          ['redo', ['redo',]],
          ['style', ['bold', 'italic', 'underline',]],
          ['font', ['strikethrough',]],
          ['fontsize', ['fontsize']],
          ['color', ['color']],
          ['para', ['ul', 'ol', 'paragraph']],
        ],
        'width': 760,
        'height': 300,
        'focus': True,
        'fontSizes': ['8', '9', '10', '11', '12', '14', '18', '22','24', '36', '48' , '64', '82', '150'],
},
}

最终结果:

enter image description here

上面概述的代码解决了我的问题。