富文本编辑器的行为不正确

用户名

我正在尝试在文本字段上创建富文本编辑器。为了做到这一点,我正在使用Summernote我让编辑器按照我想要的方式进行初始化。我真的希望airmode鼠标悬停时表现出来,而不是单击时表现出来。尽管如此,还是有一个奇怪的行为是我真正的问题。

如该小提琴中所示,用户可以开始在屏幕上输入三个编辑器之一。但是,一旦输入空格,文本就会转到输入字段上方的行。它不会停留在同一行上。奇怪的是,输入行上方的文本不允许进行丰富的编辑。我正在像这样初始化文本字段:

  var optionEditors = $('.option-editor');
  for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      }
    });
  }

我想念什么?一切看起来都正确。只是该行为似乎是错误的。谢谢你。

坚定的

另一个解决方案是使用CSS隐藏输入,并使summernote看起来像一个表单控件:

for (var i=0; i<optionEditors.length; i++) {
    $(optionEditors[i]).summernote({
      airMode: true,
      popover: {
        air: [
          ['font', ['bold', 'underline', 'clear']]
        ]
      },
      callbacks: {
        onInit: function() {
               // make the editor like a "form-control"
               $('.note-editor').addClass('form-control');
               // Force editor height adding one space 
               $(this).summernote('code', ' ');
            }
        }      
    });

}

@请参阅工作示例https://jsfiddle.net/v8zhvsmo/

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

Visual Studio 2017 更新 26430.04 后文本编辑器中的颜色不正确

来自分类Dev

AngularJS的富文本编辑器

来自分类Dev

如何验证富文本编辑器源

来自分类Dev

用于Winform的富文本编辑器

来自分类Dev

umbraco如何扩展富文本编辑器

来自分类Dev

富文本编辑器更改样式

来自分类Dev

Windows UWP富文本编辑器

来自分类Dev

如何使用JavaScript或jquery在[b]而不是<b>的富文本编辑器中加粗文本

来自分类Dev

AEM 6.1:在触摸屏上启用富文本编辑器(RTE)插件

来自分类Dev

富文本编辑器(tinymce)图像-如何禁用自动高度和宽度?

来自分类Dev

以编程方式在Sitecore的富文本编辑器的HTML选项卡中插入数据

来自分类Dev

通过富文本编辑器删除由CMS用户填充的div中的顺序<br>

来自分类Dev

添加富文本编辑器以在Asp.net核心MVC内外添加并显示富HTML

来自分类Dev

Sanity.io便携式文本富文本编辑器中的文本/图像对齐

来自分类Dev

如何使Microsoft Word选择的行为与纯文本编辑器中的行为相同

来自分类Dev

在HTML文档中呈现时,富文本编辑器中的文本是否不继承样式?

来自分类Dev

加密文本编辑器

来自分类Dev

文本编辑器上的竖线

来自分类Dev

加密文本编辑器

来自分类Dev

文本编辑器PHP MYSQL

来自分类Dev

译者的文本编辑器

来自分类Dev

如何删除在tinyMCE富文本编辑器上显示的弹出窗口(参见图片)?

来自分类Dev

Umbraco富文本编辑器不会保存html标记<code>(将其转换为<p>(版本6))

来自分类Dev

无法在包含在 React 组件中的富文本编辑器 (react-draft-wysiwyg) 中获取输入的数据

来自分类Dev

鹅毛笔富文本编辑器:如何将用于文件输入的按钮附加到工具栏并嵌入到编辑器

来自分类Dev

chrome无法显示特殊字符é,尽管它在文本编辑器中正确显示

来自分类Dev

Google Maps <iframe>代码无法从wp文本编辑器正确显示

来自分类Dev

在 docker 容器上的文本编辑器中未正确显示特殊字符

来自分类Dev

在线文本编辑器 - 如何正确修复我的代码?

Related 相关文章

  1. 1

    Visual Studio 2017 更新 26430.04 后文本编辑器中的颜色不正确

  2. 2

    AngularJS的富文本编辑器

  3. 3

    如何验证富文本编辑器源

  4. 4

    用于Winform的富文本编辑器

  5. 5

    umbraco如何扩展富文本编辑器

  6. 6

    富文本编辑器更改样式

  7. 7

    Windows UWP富文本编辑器

  8. 8

    如何使用JavaScript或jquery在[b]而不是<b>的富文本编辑器中加粗文本

  9. 9

    AEM 6.1:在触摸屏上启用富文本编辑器(RTE)插件

  10. 10

    富文本编辑器(tinymce)图像-如何禁用自动高度和宽度?

  11. 11

    以编程方式在Sitecore的富文本编辑器的HTML选项卡中插入数据

  12. 12

    通过富文本编辑器删除由CMS用户填充的div中的顺序<br>

  13. 13

    添加富文本编辑器以在Asp.net核心MVC内外添加并显示富HTML

  14. 14

    Sanity.io便携式文本富文本编辑器中的文本/图像对齐

  15. 15

    如何使Microsoft Word选择的行为与纯文本编辑器中的行为相同

  16. 16

    在HTML文档中呈现时,富文本编辑器中的文本是否不继承样式?

  17. 17

    加密文本编辑器

  18. 18

    文本编辑器上的竖线

  19. 19

    加密文本编辑器

  20. 20

    文本编辑器PHP MYSQL

  21. 21

    译者的文本编辑器

  22. 22

    如何删除在tinyMCE富文本编辑器上显示的弹出窗口(参见图片)?

  23. 23

    Umbraco富文本编辑器不会保存html标记<code>(将其转换为<p>(版本6))

  24. 24

    无法在包含在 React 组件中的富文本编辑器 (react-draft-wysiwyg) 中获取输入的数据

  25. 25

    鹅毛笔富文本编辑器:如何将用于文件输入的按钮附加到工具栏并嵌入到编辑器

  26. 26

    chrome无法显示特殊字符é,尽管它在文本编辑器中正确显示

  27. 27

    Google Maps <iframe>代码无法从wp文本编辑器正确显示

  28. 28

    在 docker 容器上的文本编辑器中未正确显示特殊字符

  29. 29

    在线文本编辑器 - 如何正确修复我的代码?

热门标签

归档