如何配置 ckeditor 不将内容换行到

块中?

2024-03-05

我在用ckeditor http://ckeditor.com/在我的网站上,让用户更容易输入 HTML。

但是,我从 ckeditor 返回的数据包含在<p></p>块。 (这是我不想要的。)

是否有一些配置设置强制编辑器不将文本换行?


将以下内容添加到您的配置文件CKEditor 文件:

config.enterMode = CKEDITOR.ENTER_BR;

Example:

...

CKEDITOR.editorConfig = function (config)
{
    config.enterMode = CKEDITOR.ENTER_BR;

    ...
};

Details

The configuration setting that controls this behavior is based on what you want to happen when the user presses Enter.

Just in case someone who's new to working with HTML reads this, I'm including some basic explanation of the concepts involved and why a tag will need to be inserted when the Enter key is pressed.

我们知道,如果我们在 HTML 文档中输入一些文本,然后在新行中添加其他文本,浏览器不会将文本显示为两行,它会忽略任何回车符,并将字符之间的多个空格压缩为单个空格空间。

以下 HTML:

qwer
tyui

将呈现为:

奎尔蒂伊

因此编辑器需要插入一个 HTML 标签来告诉浏览器应该在新行上显示第二组文本。

控制它的配置设置是config.enterMode它提供了三个选项:

1 - 插入段落

The default setting creates a paragraph element each time Enter is pressed:

config.enterMode = CKEDITOR.ENTER_P; // inserts `<p>...</p>`

2 - 插入“div”

您可以选择创建一个div元素而不是段落:

config.enterMode = CKEDITOR.ENTER_DIV; // inserts `<div></div>`

3 - 插入中断(您正在寻找的设置)

如果您不想将文本换行,您可以选择插入换行标记:

config.enterMode = CKEDITOR.ENTER_BR; // inserts `<br />`

CKEditor 文档表明使用ENTER_BR不推荐设置 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.enterMode:

注意:建议使用CKEDITOR.ENTER_P由于其语义价值和正确性而设置。编辑器针对此设置进行了优化。

另一个相关设置“autoParagraph”

还有第二个设置可以控制类似的情况 -config.autoParagraph。它如何发挥作用取决于config.enterMode上面讨论的设置。

autoParagraph确定是否内联元素,例如span被包裹在块元素中(p or div)由指定enterMode环境。默认情况下是包装内联元素,因此如果您输入这样的跨度(作为 HTML):

<span>asdfg</span>

它将被包裹在 p 或 div 元素中,如下所示:

<p><span>asdfg</span></p>

or this:

<div><span>asdfg</span></div>

如果将其设置为,则内联元素将不会被换行false或者如果你设置enterMode to CKEDITOR.ENTER_BR.

CKEditor 文档包含以下注释:config.autoParagraph http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.autoParagraph:

注意:更改默认值可能会带来不可预测的可用性问题。

更多设置

还有另外三个设置与此主题有些相关:

  • config.fillEmptyBlocks
  • config.forceEnterMode
  • config.ignoreEmptyParagraph

参考

可用配置选项的完整列表可以在此处找到:

  • CKEDITOR.config - CKEditor 3 JavaScript API 文档 http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html
  • CKEDITOR.config - CKEditor 4 文档 http://docs.ckeditor.com/#!/api/CKEDITOR.config
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何配置 ckeditor 不将内容换行到

块中? 的相关文章

  • 像模板一样保存多个 CKEditor 内联编辑器字段的数据

    我正在建立一个模板系统 设计人员可以在其中提交 HTML5 设计并允许用户添加自己的内容 我正在为该应用程序使用 CKEditor 4 2 和 Rails 3 我希望用户能够加载模板页面 然后直接编辑各种内联编辑器 然后通过 JS 和 Aj
  • 使用 webpack 在 Laravel 5 中将插件安装到 CKEditor 5

    我在将插件安装到集成到 Laravel 5 6 的 CKEditor 时遇到了一个小问题 根据 CKEditor 文档的集成指南 我能够添加 ckeditor ckeditor5 build classic https www npmjs
  • ckeditor jquery 插件和模糊事件

    我目前正在使用 ckeditor 并且我正在使用该编辑器的 jquery 插件 以便在文档准备好时实例化所有内容 我需要做的是为正在创建的 ckeditor 实例设置一个模糊事件 下面的代码是我用来实例化 ckeditor 的代码 text
  • 如何在Vim中显示垂直线以换行?

    我有兴趣找到一种在 Vim 而不是 GVim 中在第 80 列显示垂直线的方法 我用过set wrap 但我只想显示一条垂直线 这样我就可以自己包裹长线 Vim 7 3 中的新功能 colorcolumn 是一个逗号分隔的屏幕列列表 这些列
  • Yii ,从 $_FILES 保存图像,但不使用模型

    这可能吗 这是有模型的 CUploadedFile getInstance model newsimage model gt image gt saveAs image path 但我不想创建模型只是为了保存我的图像 我实际上需要这个的目的
  • 换行时居中 div(当它不适合在线时)

    我正在尝试仅使用 CSS 创建此布局 当标题合适时 当标题不合适时 右边的 btn 如果换行的话应该居中 我试过这个 container width 100 border 1px solid grey padding 5px block p
  • 如何设置CKEditor 5(经典编辑器)的高度

    在 CKEditor 4 中 有一个配置选项可以更改编辑器高度 配置高度 http docs ckeditor com api CKEDITOR config cfg height 如何更改 CKEditor 5 的高度 经典编辑器 回答我
  • ckeditor“key”的使用 CKEDITOR.instances.editor.on('key', function (e){

    我意识到存在有关如何为 CKEDITOR 4 实现事件处理程序的问题 我可以使用此代码来获取按键按下数据 但我似乎无法在按键后获取数据 CKEDITOR instances editor on key function e document
  • 自定义 CKEditor 工具栏

    我想自定义CKEditor的工具栏 不过 首先我想要一个工具栏可用选项的完整列表 我搜索了工具栏选项并发现了以下不完整列表 请帮我找到完整的列表 以便我可以根据我的要求进行选择 config toolbar MyToolbar name d
  • 如何在CKEditor激活时在HTML5文本区域中显示占位符属性?

    我在 HTML5 网站中有一个文本区域 具有适当的占位符 示例文本 属性 在我通过 CKEditor 添加 RichText 支持之前 它显示得很好 CKEditor GUI 正在重新创建文本区域 并且不显示其中的占位符文本 有没有办法在
  • 调整 UILabel 大小以适应自动换行

    这是 iPhone 应用程序的一部分 但通常应该适用于用 objC 编写的 Cocoa 我有一个 UILabel 保存各种数量的文本 从单个字符到几个句子 文本应始终以适合 UILabel 中所有文本的尽可能大的字体显示 最大行数设置为 4
  • 表格单元格自动换行不适用于斜杠

    我试图将文本包装在固定布局中 但当文本包含斜杠时它不起作用 可以在不插入 Javascript 纯 CSS 空格的情况下解决这个问题吗 jsfiddle http jsfiddle net HgBhk 1 http jsfiddle net
  • 如何在CKEditor中动态切换文本方向

    在我当前的项目中 用户可以用英语和希伯来语输入文本 根据当前文本自动定义方向会很棒 例如 如果文本包含希伯来语符号 则方向应为 RTL 但如果文本不包含希伯来语 则方向为 LTR 文本可以随时更改 我认为最好的解决方案是动态切换方向 就像在
  • 在 CKEditor 4.x 中,有没有办法在初始化后获取允许的标签列表?

    有没有办法获取 CKEditor 4 x 准确地说是 4 4 7 中所有允许标签的列表after编辑器已使用所有插件进行初始化 并且所有allowedContentRules and disallowedContentRules或已应用任何
  • iframe 中元素的 CKEditor 内联编辑器

    在应用程序中 我在 iframe 中有内容可编辑元素 并且希望将内联 CKEditor 应用于这些元素 它可以工作 除非我滚动 iframe 时 CKEditor 工具栏不会随之滚动 是否有特殊标志或某种方法可以让工具栏随 iframe 内
  • 控制换行以使线条等宽

    如果 h1 太长而无法容纳在一行中并换行到下一行 我希望这两行的宽度大致相同 我已经到处寻找 CSS 解决方案 但没有成功 CSS 真的不可能做到这一点吗 这似乎是一个如此简单的事情 在很多情况下都很有用 所以我真的很困惑 这似乎不能用 C
  • CKFinder 如何在选择图像(文件:选择)时获取尺寸 URL 和尺寸(宽度/高度)?

    我正在使用 CkFinder 3 成功上传图像后 我需要能够在用户单击 选择 按钮后进行检测 文件名 ID url 原始图像的宽度和高度 目前我正在使用files choose但我找不到有关 cb 事件的信息 知道如何解决吗 代码示例将不胜
  • 如何找到我的 typescript/react 模块的声明?

    我对前端技术非常 非常 陌生 特别是 React 和 TypeScript 当尝试做一件简单的事情 即使用反应组件时 我的问题出现了https github com ckeditor ckeditor5 https github com c
  • CKEditor - 内联:以禁用模式显示

    我正在尝试在内联模式下使用 CKEditor 如下所示 var div div content CKEDITOR disableAutoInline true CKEDITOR inline div 0 单击 div 时 将显示 CKEdi
  • 如何自定义 ckeditor 4.2 内置插件(如链接)?

    如果我想向链接插件添加选项卡 最佳实践方法是什么 我不想更改发布代码 只需用带有我的自定义的版本覆盖它即可 因此 很容易更新新版本 CKEDITOR 4 2 有这方面的操作方法吗 我正在使用新的内联样式工具栏 如果我获得源代码 我可以在没有

随机推荐