ckeditor富文本解决文段首行缩进问题

最新推荐文章于 2024-07-12 09:39:23 发布
最新推荐文章于 2024-07-12 09:39:23 发布
阅读量3.1k 收藏 2
点赞数 1
分类专栏： # web前端 文章标签： ckeditor 富文本 首行缩进
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_36303853/article/details/114670864
版权
本文介绍了在使用ckeditor富文本编辑器时，如何解决文段首行缩进问题。作者分享了尝试过的无效方法，如添加空格和使用Outdent/Indent配置，并详细阐述了最终有效的解决方案：修改ckeditor.js文件中的特定代码以及调整config.js文件的过滤器设置。文章还提醒读者，修改配置后可能需要清除浏览器缓存才能看到效果。
摘要由CSDN通过智能技术生成

前言

今天使用富文本的时候，客户有个需求，需要在文段的前面空两格达到缩进效果
在这里插入图片描述

一开始我用了两种办法

1.文字前加空格（空格源码为 小程序前端不会有渲染效果）
在这里插入图片描述

2.开启ckeditor的Outdent和Indent减小缩进和增大缩进配置（源码加入了margin-left: 40px;样式，整段都被缩进了）
在这里插入图片描述

结果都达不到想要的效果，兜兜转转就写了这篇文章，希望帮到大家

解决

1.核心其实是因为margin-left: 40px;<

了解本专栏 订阅专栏 解锁全文 超级会员免费看
向宇it
关注
专栏目录
订阅专栏
thinkadmin默认ckeditor富文本配置修改
向宇
03-11 596
html代码 <textarea name="school_content"></textarea> js初始化 require(['ckeditor', 'angular'], function () { window.createEditor('[name="school_content"]', { height: 200, toolbar : [ ['Source','-','Save','NewP..
Ckeditor 首行缩进
b876143268的专栏
10-22 2188
//初始化编辑器 var ckeditor = CKEDITOR.replace(domName,{ height: 500, width:800 }); //监听粘贴代码时，进行首行缩进，因为粘贴后，编辑器还需要处理内容才会渲染，所以需要加入延时执行。 技术要点： ckeditor编辑器会默认过滤“text-indent”的样式。 不能关闭ckeditor过滤...
dedecms 5.7 sp1版 ckeditor 编辑器，首空两格的解决办法
liufile的专栏
12-04 4597
请注意，原创内容，转载请注意注明出处。 编辑器中编辑文本或者混排时，需要能首行空两格。 解决办法有： 1、用全角空格，这个别人都说过，就是输入法中按shift+空格键，切换出全角再打空格，可以解决问题，但是非常累人。如果很多的话。 2、使用css样式表，通常是在p标签中，加首行缩进，但是你会发现失效，为什么呢。看我解决办法。 样式解决： 1、找到include目
vue-quill-editor 富文本编辑器解决首行文字缩进问题
最新发布
noeal的博客
07-12 353
在标签中加入 ql-editor 样式即可完美解决问题。
ckeditor编辑时 回车 生成一个段落p、解决首行缩进问题
weixin_33727510的博客
04-28 1043
使用ckeditor编辑器时，会自己主动加入上的标签，按回车也会自己主动加入上同样的标签 查看ckeditor编辑器源代码时会看到，点击回车显示的&lt;p&gt;&amp;nbsp;&lt;/p&gt; statics/js/ckeditor/config.js配置文件改动它里面的 CKEDITOR.editorConfig = function( config ){...
CKEditor4解决首行缩进问题
qq_43604221的博客
11-11 782
CKEditor4解决首行缩进问题
小程序富文本editor首行缩进
qq_30351747的博客
10-05 2999
小程序富文本editor首行缩进 思路 自定义一个工具icon，点击这个icon就在html文本上添加一个空格符 效果图 代码 在editor.wxml上添加如下代码 <i class="iconfont" bindtap="indentClick"> ➔ </i> 在editor.js里添加如下方法 indentClick(){ // 点击添加缩进 this.editorCtx.insertText({ text: "ㅤㅤ" }) }, .........
wangEditor富文本编辑器（第四章：自定义首行缩进菜单）
DW14687的博客
08-01 3925
继上一章，我们实现了富文本框字数限制，到上一章呢，基本上得功能已经可以实现了。接下来就是扩展章节了，我会继续去探索更多得自定义菜单，今天先开一个简单得——“首行缩进”，感兴趣就继续往下看看吧~新建目录components/textIndent.js以上就是今天要讲的内容，本文仅仅简单自定义首行缩进菜单的思路和实现，好啦好啦，希望能够帮助到你啦，或者开阔一下思维也可以滴~。如果有什么想法也可以评论区留言给我哟~白白啦httpshttpshttpshttps。.........
ckeditor富文本编辑器
12-18
CKEditor是一款广泛应用于Web开发领域的专业富文本编辑器，它为用户提供了一种在网页上创建、编辑和格式化文本的强大工具。这款编辑器以其丰富的功能、易用性和高度可定制性而闻名，使得开发者能够轻松地在网站或...
ckeditor富文本使用与配置修改
向宇
03-11 1076
下载地址 http://ckeditor.com/download 使用 在页面中引入ckeditor核心文件ckeditor.js <script type="text/javascript" src="ckeditor/ckeditor.js"></script> 在使用编辑器的地方插入HTML控件 <textarea id="TextArea1" cols="20" rows="2" class="ckeditor"></textarea>
CKeditor 编辑器一键排版
05-21
CKeditor 编辑器一键排版，大大简化编辑人员排版时间
Django之富文本编辑器CKeditor的使用
hehui1uu的博客
05-09 572
文章目录一、什么是富文本编辑器？富文本编辑原理二、CKeditor使用(一）1.下载CKeditor2.CKeditor配置settings.py配置urls.py配置修改模型model.py三、CKeditor使用(二）富文本编辑器在前端使用下载ckeditor 自定义功能包引入js文件引入 ckeditor 富文本编辑器总结 一、什么是富文本编辑器？ 富文本编辑器，Rich Text Editor, 简称 RTE, 是一种可内嵌于浏览器，所见即所得的文本编辑器。它是一种解决可一般的用户不同html等
【踩坑】ckeditor5缩进功能无法直接使用的问题解决，以及首行缩进功能
weixin_44945942的博客
12-16 1669
ckeditor5缩进功能无法直接使用的问题解决，以及首行缩进功能
ckeditor5 增加左右缩进
weixin_42957379的博客
06-18 1674
1、安装好Node 和 yarn 2、安装ckeditor5 git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git cd ckeditor5-build-classic npm install 3、安装左右缩进插件 npminstall--saveckeditor5-indent-te...
处理富文本中的图片、文字首行缩进
asfcyg的博客
08-28 748
<view v-if="studyInfo.content!==''" v-html="studyInfo.content"></view> // 处理富文本中的图片 if(this.studyInfo.content!==''&&this.studyInfo.content!==null){ const regex = new RegExp('<img','gi'); this.studyInfo.content = this.studyInfo.c
富文本编辑器CKEditor4简单使用-07（处理浏览器不支持通过工具栏粘贴问题 和 首行缩进的问题）
@素素~的博客
05-02 1173
富文本编辑器CKEditor4简单使用-07（处理浏览器不支持通过工具栏粘贴问题 和 首行缩进的问题）
评论 4
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

向宇it

创作不易，感谢你的鼓励

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值