tinymce 去掉编辑器换行默认增加的p标签

最新推荐文章于 2024-04-10 15:14:17 发布
最新推荐文章于 2024-04-10 15:14:17 发布
阅读量2.5k 收藏 2
点赞数 1
分类专栏： # Vue 2.x 文章标签： 编辑器
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/HH18700418030/article/details/125894052
版权

问题：tinymce 编辑器里面使用回车换行后会自动添加p标签。

解决方法：增加forced_root_block这个属性，替换为空后，换行就没有p标签了。

格式：

forced_root_block: '', // 删除在tinymce中自动添加的p标签

如下图：
在这里插入图片描述

设置前：
在这里插入图片描述

设置后：
在这里插入图片描述

＊且听风吟
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
专栏目录
TinyMce介绍、环境配置与使用心得
06-26 4332
　　TinyMCE 是一个基于浏览器(例如MSIE或Mozilla)的强大的所见即所得的编辑器，它使用户可以方便的编辑HTML内容。它非常灵活并且是为系统集成而设计的，比如在Intranets、CMS、LMS等系统中应用。 　　特点
TinyMCE syntaxhl插入代码后换行的修改方法
10-28
上次搞了个整合insert code的TinyMCE编辑器，非常好用。但有一个缺点：每次插入代码后，光标都会停留在pre标记里面，打回车出不来，必须编辑HTML
Tinymce 编辑文章时自动在首尾添加了p标签如何删除，Tinymce汉化
江湖的博客
10-17 2292
找到tinymce的配置文件，不通版本配置文件展示形式有所不同 1.汉化： 在window.tinymce.init配置项增加language:'zh_CN'即可 2.删除在tinymce中自动添加p标签： 在window.tinymce.init配置项增加forced_root_block:""即可 如下图所示 3.如果需在工具栏调整展示的工具，找到toolbar.js文件，在该文件的数组中进行配置即可，如配置展示调整字体大小和选择字体 toolbar文件配置如图： ...
【TinyMCE】TinyMCE6.1及以上版本去除换行增加的P标签
sunxinyi9978的博客
01-05 1007
TinyMCE
Tinymce 去除多余的换行
feihuiwu123的专栏
04-20 3451
1输入：content = "<!DOCTYPE html>↵<html>↵<head>↵</head>↵<body>↵\n<p>原文</p>↵</body>↵</html>".replace(/(↵)+|(\n)+|(\r\n)+/
Django模板为Tinymce赋值 换行无法识别的问题
Nty268的博客
11-11 564
linebreaksbr 将换行符替换成br标签，使得多行文本拼接成单行字符串。replaceAll()将所有br标签去除，还原成原汁原味的文本。赋值内容存在多行，而不是单一的一行字符串，，这两个过滤器处理后，赋值的原文会出现。就可以成功对tinyMCE赋值。
tinyMCE 富文本编辑器 line-height 行间距调整.zip
07-06
tinyMCE 富文本编辑器 line-height 行高插件。 tinyMCE富文本编辑器line-height行高插件，下载后放在tinyMCE插件的plugins文件夹中，之后初始化中引入plugins，即可在toolbar中展示 tinyMCE line-height 行高插件
TinyMCE富文本编辑器保存文本后自动追加＜p＞标签
Are_you_kidding_的博客
12-22 769
去除自动追加的标签 1.打开TinyMCE的配置文件index.vue 2.找到window.tiny.init，增加语句forced_root_block:false, 3.效果
富文本回显 p 标签？去不掉怎么办？如何解决？
最新发布
weixin_71108480的博客
04-10 802
使用富文本控件上传的上传的数据，回显到文本框时显示标签，并且数据库里面的数据也为带有p标签的数据，如何去掉。
去掉TinyMCE自动加上段落标记（<p>）
aren3032的博客
03-12 1131
为了防止出现最初的P标签，您需要添加下面一行到你的初始化语句： tinyMCE.init({ ... force_p_newlines : true//当返回或进入 Mozilla/Firefox 时，这个选项可以打开/关闭段落的建立。选项默认值为：true。 }); 但它仍然把一<p>在块的顶部 用这句就OK了 forced_root_bloc...
tinymce变化后onchange光标变化问题（React）
猜测
05-24 1479
由于我是ant design pro包了一层，它给分配的value和onchange，不用的话，确实也不会有这问题，但那样form提交表单时，虽然编辑器里已经变化，但获取不到变化值。最后想了想它为什么会这么跳的原理，是因为onchange之后，改变了value值，导致组件又重新渲染了内容，所以只要value值不变，其实就不会有这问题。就是编辑几个字之后，再点击一下才会触发onchange，也就是说点到别的地方光标会先跳回来一次，再点击一次才正常……比如回车、复制粘贴，都会跳到最前面。
前端tinymce 富文本编辑英文不换行问题
LYingyuan的博客
10-23 425
最近在vue tinymce 富文本编辑器中，发现输入汉字可以自动换行，输入一连串不间断字母，不会主动换行，并且会超出div边界
富文本回车间隔过大，将回车效果修改为shift+回车的效果
云雨之石的博客
05-11 964
这段时间做的一个app，后台使用了tinymce这个富文本，本来的时候感觉挺好用的，可能是后来修改了一些东西导致用起来效果没有那么好了。 其中发现tinymce富文本下的回车案件生成的回车产生行与行之间的间隔较大，而shift+回车产生的间隔是正常的，我们希望按下回车时的效果能和按下shift+回车的效果一致，一下是解决方案。 在tinymce初始化init下生命如下属性： setup: function (editor) { editor.on('keydown', function (event) {
在Vue项目中使用tinymce富文本编辑器
服务员的博客
04-16 5083
这两个组件安装完之后，在public目录下新建文件夹tinymce，目录建好后，找到node_modules文件夹下的tinymce/skins目录，将skins目录复制到我们创建的tinymce文件夹内。安装之后，在 node_modules 中找到 tinymce/skins 目录，然后将 skins 目录拷贝到 public/tinymce 目录下。在刚才创建的static/tinymce文件夹内再新建langs文件夹，用来存放我们下载的中文语言包，如下图所示。多语言支持，官网可下载几十种语言。
tinymce富文本编辑器（vue）
热门推荐
天高任鸟飞
08-10 4万+
TinyMC编辑器简介 TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。跟其他富文本编辑器相比，有着丰富的插件，支持多种语言，能够满足日常的业务需求并且免费。 TinyMCE的优势： 开源可商用，基于LGPL2.1 插件丰富，自带插件基本涵盖日常所需功能 接口丰富，可扩展性强，有能力可以无限拓展功能 界面好看，符合现代审美 提供经典、内联、沉浸无干扰三种模式（详见“介绍与入门”） 对标准支持优秀（自v5开始） 多语言支持，官网可下载几十种语言。 下图为开启全部功能的截图 Tiny
tinymce怎么去掉POWERED BY TINY
weixin_41870211的博客
12-14 4546
文章目录前言一、问题描述二、解决方案 前言 提示：在使用tinymce富文本编辑器的时候会遇到这么一个问题，那就是在文本框下方有一个统计字数的横框。在一些产品上出现这个标识，明显是不合适的，那该怎么优雅的把这行字给去掉呢？ 一、问题描述 右下角会自带商标，并且与字数统计功能绑定在了一起。最早的想法是用css样式直接干掉（当然也是可以的），后面发现了更好的解决方案。 二、解决方案 tinymce中自带隐藏富文本编辑器组件商标消息” Powered by TinyMCE”的配置项branding win.
tinyMCE编辑器去除换行增加的P标签
dai0941的专栏
08-27 5727
tinyMCE编辑器去除换行增加的P标签 tinyMCE里使用回车后会加P标签，如何变成原本的br标签呢？搜索出force_p_newlines : false参数可以关闭自动添加P标签，但实际测试没什么变化，查询了一下源码发现带‘p’的就forced_root_block这个属性，替换为空 后，换行就没有P标签了。 例子： js 代码 tinyMCE.init({  
tinymce富文本编辑器增加自定义按钮
09-20
要在TinyMCE富文本编辑器中添加自定义按钮，您可以按照以下步骤进行操作： 1. 首先，确保您已经引入了TinyMCE编辑器的脚本文件。例如： ```html <script src="https://cdn.tiny.cloud/1/<YOUR_API_KEY>/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script> ``` 2. 创建一个自定义插件，并定义插件的行为。例如，创建一个名为"customButton"的自定义按钮插件： ```javascript tinymce.PluginManager.add('customButton', function(editor, url) { // 定义按钮的行为 editor.addButton('customButton', { text: '自定义按钮', icon: false, onclick: function() { // 在按钮被点击时执行的操作 editor.insertContent('您点击了自定义按钮！'); } }); }); ``` 3. 初始化TinyMCE编辑器时，将自定义插件添加到插件列表中： ```javascript tinymce.init({ selector: 'textarea', plugins: 'customButton' // 添加自定义插件到插件列表 }); ``` 现在，当您在TinyMCE编辑器中使用时，应该能够看到一个名为"自定义按钮"的按钮，点击它将插入内容到编辑器中。 请注意，上述示例中的"YOUR_API_KEY"是您从TinyMCE网站上获取的API密钥。确保将其替换为您自己的API密钥。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值