美文网首页
Froala-editor 设置默认行高

Froala-editor 设置默认行高

作者: Asuler | 来源:发表于2021-04-19 13:33 被阅读0次

期望默认选中2倍距行高,但是查阅了一下文档,没法配置
这个Deafult,根本没有生效,而且如果设置了2,手动选中时,他会和Double同时高亮


image.png

原先想法是手动hack css,但是这样的话b端也要改很麻烦

后来想了一种手动改变的方法,在配置参数的events里面监听initialized事件,然后利用实例的方法手动选中行高,这里要加上settimeout,让该事件延迟执行,否则会报错undefined,可能是这个编辑器的bug

          'initialized': function () {
                // 设置默认行高2倍,必须要加setTimeout,否则报错
                setTimeout(() => {
                    if (this.core.isEmpty()) {
                        this.commands.selectAll();
                    }
                    this.lineHeight.apply('2');
                    this.fontSize.apply('14px');
                });
            },
            'keyup': function () {
                if (this.core.isEmpty()) {
                    this.commands.selectAll();
                    this.lineHeight.apply('2');
                    this.fontSize.apply('14px');
                }
            }

遇到的bug:删除内容的时候,当编辑器内容为空,并且只有一行,并且那一行没有任何内容的时候,多按几次退格键,会删掉lineheight的格式,

解决:

  1. 使用contentChanged事件监听,但是contentChanged被编辑器自动防抖了,会有延迟,所以把事件换成了keyup,只要编辑器内容为空了,就重新设置行高和字体大小

相关文章

  • Froala-editor 设置默认行高

    期望默认选中2倍距行高,但是查阅了一下文档,没法配置这个Deafult,根本没有生效,而且如果设置了2,手动选中时...

  • css、line-height初探

    浏览器默认行高1.0-1.2之间 行高主要有五种设置方法 1.line-height: normal; //默认...

  • Froala-editor 设置默认字号

    配置里有个fontSizeDefaultSelection属性,设置了大小根本没用,去github上下载了最新的f...

  • css-display

    块级元素 1.0 单独占一行 2.0 可以设置宽高 3.0 如果不设置宽高,宽度默认是一整行,高度默认由内容来决定...

  • display默认inline和block-inline的区别

    1、display的默认情况:inline(元素和其他元素都在一行上) 特点是: 设置宽度、高度无效, 设置行高(...

  • html笔记

    块标签与行标签的特点: 块标签:1、独占一行;2、可以设置宽高;3、没有设置width时,默认是100%的宽;4、...

  • day4 - 京东登录

    recode 1.标准流:块级 - 一个占一行,默认宽度是父标签的宽度,设置宽高有效行内 - 行可以显示多个,默认...

  • 再看 line-height

    如果没有字体,只设置行高 块级元素设置行高 内联元素设置行高 行内块元素设置行高 行高起作用的前提是有文字存在 ,...

  • CSS元素显示模式

    什么是块级元素,行内元素? 块级元素会独占一行可以设置宽高如果没有设置宽高,默认和父元素一样的宽高 行内元素不会独...

  • Display简析

    block:默认宽度为父元素宽度,可以设置宽高,换行显示 inline: 默认宽度为内容宽度,不可设置宽高,同行显示。

网友评论

      本文标题:Froala-editor 设置默认行高

      本文链接:https://www.haomeiwen.com/subject/nyojgktx.html