【问题标题】:How to set font-size in summernote?如何在summernote中设置字体大小?
【发布时间】:2015-01-16 15:43:01
【问题描述】:

我一直使用summernote作为我的默认文本编辑器,但我无法在初始化时默认设置特定的字体大小。

到目前为止我已经尝试过

$('.active-textcontainer').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']]
        ],
         height:150,
         fontsize:'18px'
    });

$('.active-textcontainer').summernote({
        toolbar: [
            ['style', ['bold', 'italic', 'underline']],
            ['fontsize', ['fontsize']],
            ['color', ['color']],
            ['para', ['ul', 'ol', 'paragraph']]
        ],
         height:150,
         fontsize:'18'
    });

Ant 的帮助将不胜感激。

【问题讨论】:

  • 尝试fontSize 与大写的S?
  • @torzaburo 起初我也尝试使用fontSize:'18px'fontSize:18font-size... 没有运气,然后我看看summernote 和我最简单的方法正如我在答案中解释的那样,看到它是使用$('.note-editable').css('font-size','18px');

标签: javascript summernote


【解决方案1】:

我从来没有使用过summernote,但是看着API,没有任何东西(至少现在)可以指定默认字体大小,我做了一个测试,像你一样尝试了一些尝试,但似乎没有人工作。

对此的一种可能解决方案是使用jQueryfont-size 样式直接应用于编辑器div,因为当您在对象中初始化summernote 时,始终创建跟随div<div class="note-editable" ...>...</div>。因此,您可以在代码中初始化$('.note-editable').css('font-size','18px'); 后执行以下操作,这可能是:

$('.active-textcontainer').summernote({
    toolbar: [
        ['style', ['bold', 'italic', 'underline']],
        ['fontsize', ['fontsize']],
        ['color', ['color']],
        ['para', ['ul', 'ol', 'paragraph']]
    ],
     height:150
});

$('.note-editable').css('font-size','18px');

这个解决方案有点棘手,如果div 编辑器的class 名称在下一个版本中更改,这将不起作用,但也许它对您的情况来说已经足够了。

希望这会有所帮助,

【讨论】:

  • 我想过这个,如果没有其他选择,我就用这个。谢谢,只是想确定是否有这样做的选项。
  • 我以前从未使用过summernote,所以我不能 100% 确定是否有另一种方法可以做到这一点,但是我看看我在回答中所说的 API 和我没有看到其他选择。在没有找到其他方法之前,您可以使用此选项:)
【解决方案2】:

或者通过css设置默认

.note-editor .note-editable {
    line-height: 1.2;
    font-size: 18px;
}

【讨论】:

    【解决方案3】:

    可以设置当前选中文本的字体大小,

    $('.summernote').summernote('fontSize', 40);
    

    但似乎没有用于选择文本的 API。

    无法设置默认字体大小很奇怪,所以我filed an issue in their repo

    【讨论】:

      猜你喜欢
      • 2017-12-10
      • 2016-08-15
      • 2015-05-02
      • 2010-09-22
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2014-07-21
      • 2012-05-22
      相关资源
      最近更新 更多