如何实现在<p>...</p> 标签前后,批量插入内容
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了如何实现在<p>...</p> 标签前后,批量插入内容相关的知识,希望对你有一定的参考价值。
要求:
1、现在有很多的 html的编码 txt文件,我需要在<p>...</p> 标签前后,批量插入内容。
2、一个文件中有4个<p>...</p>标签,在第一个</p>标签,后边添加123;在第三个</p>标签,后边添加456。
3.还要实现,正序,倒序。如,在倒数第一个</p>标签,后边添加123,在倒数第三个</p>标签,后边添加456。
如何配置 ckeditor 不将内容包装在 <p> 块中?
【中文标题】如何配置 ckeditor 不将内容包装在 <p> 块中?【英文标题】:How to configure ckeditor to not wrap content in <p> block? 【发布时间】:2011-03-21 08:42:09 【问题描述】:我在我的网站上使用ckeditor 以方便用户输入 HTML。
但是,我从 ckeditor 返回的数据被包装在 <p></p>
块中。 (我不想要。)
是否有一些配置设置强制编辑器不将文本换行?
【问题讨论】:
【参考方案1】:将以下内容添加到 CKEditor 的 config.js 文件中:
config.enterMode = CKEDITOR.ENTER_BR;
例子:
...
CKEDITOR.editorConfig = function (config)
config.enterMode = CKEDITOR.ENTER_BR;
...
;
详情
控制此行为的配置设置基于您希望在用户按下 Enter 时发生的情况。
以防万一刚接触 HTML 的人读到这里,我将包含一些有关概念的基本解释,以及为什么在按下 Enter 键时需要插入标签。
我们知道,如果我们在 HTML 文档中输入一些文本,然后将其他文本放在新行上,浏览器将不会将文本显示为两行,它将忽略任何回车并在字符之间压缩多个空格到一个空格。
以下 HTML:
qwer
tyui
将呈现为:
qwer tyui
所以编辑器需要插入一个 HTML 标签来告诉浏览器它应该在新的一行显示第二组文本。
控制它的配置设置是config.enterMode
,它提供了三个选项:
1 - 插入段落
默认设置在每次按下 Enter 时创建一个段落元素:
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 />`
The CKEditor documentation indicates that using the ENTER_BR
setting is not recommended:
注意:建议使用
CKEDITOR.ENTER_P
设置,因为它的语义价值和正确性。编辑器已针对此设置进行了优化。
另一个相关设置'autoParagraph'
还有第二个设置可以控制类似的情况——config.autoParagraph
。它的功能取决于上面讨论的config.enterMode
设置。
autoParagraph
确定span
等内联元素是否被包裹在enterMode
设置指定的块元素(p
或div
)中。默认是包装内联元素,所以如果你输入这样的跨度(作为 HTML):
<span>asdfg</span>
它将被包裹在一个 p 或 div 元素中,如下所示:
<p><span>asdfg</span></p>
或者这个:
<div><span>asdfg</span></div>
如果将其设置为 false
或将 enterMode
设置为 CKEDITOR.ENTER_BR
,则不会包装内联元素。
The CKEditor documentation includes this note about config.autoParagraph
:
注意:更改默认值可能会带来不可预知的可用性问题。
更多设置
还有三个与这个主题有些相关的设置:
config.fillEmptyBlocks
config.forceEnterMode
config.ignoreEmptyParagraph
参考
可在此处找到可用配置选项的完整列表:
CKEDITOR.config - CKEditor 3 JavaScript API Documentation CKEDITOR.config - CKEditor 4 Documentation【讨论】:
感谢您提供如此全面的回答。 不客气,这让我开始思考为什么要插入标签。乔 @shybovycha 我回滚了你的编辑。我意识到您不知道您通过编辑更改了答案的含义,所以这是不正确的:我使用<br />
标记来格式化答案,它们不是答案的一部分并且没有出现给阅读答案的人。查看问题顶部附近显示“以下文本:”的位置,我演示的是,如果没有任何 HTML 标记来告诉浏览器显示换行符,则文本将显示在一行上。您的更改导致显示<br />
标签,这改变了我写的内容并导致它不正确。
@codewaggle 哦,我很抱歉......是的,我确实注意到了这一点并修改了我的编辑。注意:现在答案看起来好多了,不是吗?
建议在发送 HTML 电子邮件等情况下使用 ENTER_BR 设置,因为电子邮件阅读器不会始终呈现 标签,因此必须改用 标签。否则,请尝试始终使用
标签。
【参考方案2】:我知道我玩游戏有点晚了,但我认为 OP 正在寻找的选项是:
config.autoParagraph = 假;【讨论】:
可能不建议这样做的原因:“更改默认值可能会带来不可预知的可用性问题。”见:docs.cksource.com/ckeditor_api/symbols/… 这实际上帮助了我,而且到目前为止看起来还不错。任何已知的“不可预测的问题”? =/config.enterMode = CKEDITOR.ENTER_BR;
不建议在 ckeditor 文档中使用:docs.cksource.com/ckeditor_api/symbols/…【参考方案3】:
上面已经很好地回答了这个问题,但是如上所述,您不应该在主配置中真正更改它。
这样做的正确方法是每个 .replace 真的。
即
<form name="title" method="post" action="<?php echo htmlentities($_SERVER['PHP_SELF']);?>">
<textarea id="editor2" name="editor2" rows="300"><?php echo $editor2;?></textarea>
<textarea id="editor1" name="editor1" rows="1" cols="50" onfocus="this.value=''; this.onfocus=null;">Type Tab Title Here:</textarea>
<input type="submit" value="Submit">
</form>
<script type="text/javascript">
CKEDITOR.replace( 'editor2',
enterMode: CKEDITOR.ENTER_BR,
on: 'instanceReady': function (evt) evt.editor.execCommand('maximize'); ,
);
</script>
【讨论】:
【参考方案4】:无需任何配置更改的非常简单的解决方案是使用
shift
+enter
换行符<br>
,以及
只需enter
就会产生一个新段落。
优点是您不必进行任何配置更改。另外,两者兼而有之。
【讨论】:
这就是我所希望的答案。【参考方案5】:如果你想排除<p>
标签并且只需要基本的编辑工具,比如Ckeditor中的粗斜体上标下标等,请按照以下步骤操作:
我 100% 确定这一点,因为我连续研究了 36 小时 :)
第 1 步:在您的 PHP 网页中添加此脚本
<script type="text/javascript">
CKEDITOR.replace( 'editor1',
enterMode: CKEDITOR.ENTER_BR,
on: 'instanceReady': function (evt) evt.editor.execCommand('');,
);
</script>
第 2 步:像这样在文本区域中添加 id="editor2"
和 onfocus="this.value='';"
<textarea id="editor2" name="AsYourWish" onfocus="this.value='';">
第 3 步:确保从 Textarea 中删除 Class="ckeditor"
。
第 4 步:如果没有发生,请重新加载您的网页删除缓存/历史记录并重新启动 PC/笔记本电脑。
第 5 步:完成 :)
【讨论】:
【参考方案6】:对于Django-ckeditor
,将此配置添加到您的settings.py
文件中:
ENTER_P = 1 # default
ENTER_BR = 2
ENTER_DIV = 3
CKEDITOR_CONFIGS =
'default':
'enterMode': ENTER_BR,
,
【讨论】:
【参考方案7】:如果有人带着 ckeditor 5 来到这里,请不要寻找这个选项。他们已经删除了它,我花了好几天才弄明白。
恐怕你不会喜欢它,但进入模式 BR 是根 万恶之源。如果可以的话,我们早就将它从 CKEditor 4 中删除了 之前,我们绝对不会在 CKEditor 5 中实现它。
相关GitHubissue
【讨论】:
以上是关于如何实现在<p>...</p> 标签前后,批量插入内容的主要内容,如果未能解决你的问题,请参考以下文章
HTML/javascript 文本 清除 CSS 样式 代码 等标签 如何编写
怎么用js 把<p> </p> 替换为空 html = html.replace('<p> </p>'
Sigil里面怎么用查找替换删除空行?为啥我替换了<p><br/></p>,然后就每行都有空行