CKEditor4解决首行缩进问题

已于 2022-11-11 17:52:40 修改
阅读量733 收藏 1
点赞数
文章标签： vue.js 前端 javascript
于 2022-11-11 17:50:34 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43604221/article/details/127810112
版权

前言

本来一开始用的Quill富文本，后来满足不了需求，于是引进CKEditor4富文本，然后发现它自带的缩进是整段缩进，不太符合中国人的习惯(Quill原生的也是整段缩进，如果有需要，后续也可以更一个Quill版本的)，于是记录一下更改过程


原生样式

在这里插入图片描述

我们来它的看看源码
在这里插入图片描述
它是在整个p标签里面加了一个 margin-left，所以我们得把这个改成 text-indent 才行


修改过程

首先我们进入自己下载的CKEditor4包解压位置，找到ckeditor.js文件，如图

在这里插入图片描述


打开之后全局搜索margin-left，发现总共有14个，我们就挨个去找，看看是哪个

在这里插入图片描述


后来找到了这个，有margin-left，有40px，于是我确定是这个

在这里插入图片描述


接着就是开始修改，尝试一下看看是否成功，修改后为这样

在这里插入图片描述


成功解决问题
在这里插入图片描述
在这里插入图片描述


希望这篇文章对你有所帮助
ヾ(✿ﾟ▽ﾟ)ノ

小白鸭
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 3
    评论
ckeditor富文本解决文段首行缩进问题
向宇
03-11 3057
前言 今天使用富文本的时候，客户有个需求，需要在文段的前面空两格达到缩进效果 一开始我用了两种办法 1.文字前加空格（空格源码为 小程序前端不会有渲染效果） 2.开启ckeditor的Outdent和Indent减小缩进和增大缩进配置（源码加入了margin-left: 40px;样式，整段都被缩进了） 结果都达不到想要的效果，兜兜转转就写了这篇文章，希望帮到大家 解决 1.核心其实是因为margin-left: 40px;和text-indent: 2em;的问题 2.打开cked
ckeditor5-build-full:包含CKEditor的所有正式构建方法以及一些自定义插件
03-30
CKEditor5-内部版本完整 此包同时包含了document，inline，classic这3个官方构建，并且每个都都使用的是同一个配置清单，功能上使用了插件包，该插件包包含了首行缩进，行高，一级间距，清除空行，清除多余空间，全半角转换，自定义图片上传文件键，软换行转硬断行，快速布局，自定义扩展等功能。 此包基于CKEditor5进行合并，文档请移步。 文献资料 。 。 。 快速开始 安装重建： # 目前本人自用采用npm私服安装，未发布到npm官方仓库，客观们可以使用如下命令安装： npm i -S https://github.com/letsbug/ckeditor5-build-full.git # or (if you have configured github's SSH key locally) npm i -S git://git@github.com:let
富文本编辑器CKEditor4简单使用-08（段落首行缩进插件 + 处理粘贴 Microsoft Word 中的内容后保持原始内容格式（包括首行缩进））
最新发布
@素素~的博客
05-02 1416
富文本编辑器CKEditor4简单使用-08（段落首行缩进插件 + 处理粘贴 Microsoft Word 中的内容后保持原始内容格式（包括首行缩进））
Ckeditor 首行缩进
b876143268的专栏
10-22 2159
//初始化编辑器 var ckeditor = CKEDITOR.replace(domName,{ height: 500, width:800 }); //监听粘贴代码时，进行首行缩进，因为粘贴后，编辑器还需要处理内容才会渲染，所以需要加入延时执行。 技术要点： ckeditor编辑器会默认过滤“text-indent”的样式。 不能关闭ckeditor过滤...
ckeditor5 增加左右缩进
weixin_42957379的博客
06-18 1654
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...
ckeditor4(4.22.1-含上传图片、快速表格、首行缩进等插件)
01-30
3. 含解决粘贴word解决首行缩进的问题； 4. creditor4 简单使用，拿来即用，上面插件已包含； 5. 上传图片接口，请看：https://download.csdn.net/download/suixinfeixiangfei/88794851 6. 如果首行缩进没有开启插件...
ckeditor.rar
08-13
自己在使用织梦后台编辑器时候发现没有行间距设置，段落首行缩进是用的margin-left=40, 感觉很不方便，本人比较喜欢text-indent=2em，于是就整理修改添加了行间距设置选项，并修改段落首行缩进text-indent=2em。...
ckeditor5-plugins:自定义ckeditor5插件（例如
05-14
full-half 全角、半角相互转换│ ├── extensions 自定义扩展│ ├── indent-first 首行缩进│ ├── line-height 行高控制│ ├── paragraph-spacing 段落间距控制│ ├── quick-style 快速排
ckeditor 最新版本
12-17
2. **丰富的文本格式化**：支持多种文本样式，如加粗、斜体、下划线、字体颜色和大小调整，以及段落格式设置，如首行缩进、对齐方式等。 3. **多媒体支持**：可以插入图片、视频、音频，甚至在线嵌入媒体资源，提供...
ckeditor的自动排版插件
07-08
公司要求在ckeditor里添加一个能自动排版的功能，本人上网找到一些，发现大部分都是fckeditor的，部分ckeditor的也都没办法用，所以就根据那些代码自己写了一个，已经在各浏览器测试可用．本插件下载解压后直接放plugins目录下，怎么添加到ckeditor的按钮里就不用我说的吧
ckeditor富文本编辑器
12-18
1. **丰富的文本格式化选项**：用户可以方便地对文本进行加粗、斜体、下划线、颜色、字体和字号设置，以及段落样式调整，如首行缩进、对齐方式等。 2. **多媒体支持**：集成图片上传和管理功能，支持插入链接、视频...
富文本编辑器CKEditor4简单使用-07（处理浏览器不支持通过工具栏粘贴问题 和 首行缩进的问题）
@素素~的博客
05-02 1092
富文本编辑器CKEditor4简单使用-07（处理浏览器不支持通过工具栏粘贴问题 和 首行缩进的问题）
CKEDitor支持WORD格式的缩进问题
在交流中成长
03-16 4052
CKEditor，WORD，首行缩进
quill-editor首行缩进问题
CRT本人的博客
07-12 4065
<quill-editor class="ql-editor" v-model="detailContent" ref="myQuillEditor" :options="editorOption" style="height: 500px...
ckeditor编辑时 回车 生成一个段落p、解决首行缩进问题
weixin_33727510的博客
04-28 1035
使用ckeditor编辑器时，会自己主动加入上的标签，按回车也会自己主动加入上同样的标签 查看ckeditor编辑器源代码时会看到，点击回车显示的&lt;p&gt;&amp;nbsp;&lt;/p&gt; statics/js/ckeditor/config.js配置文件改动它里面的 CKEDITOR.editorConfig = function( config ){...
vue-quill-editor踩坑记
sunny327的专栏
08-01 7235
1、在做quill编辑器时，会遇到中文没有首行缩进的功能，因为quill 的样式靠 css class name 来输出，不同于内联样式；所以不会在内联样式中写样式，都是通过quill-editor和quill-container来渲染。所以想要实现首行缩进，在写文章时有首行缩进，回显时也要有首行缩进的需求，那就用这样的属性white-space:pre-wrap来覆盖quill的默认样式。如下：...
CKEditor 4开发与集成指南
"CKEditor 4 是一款强大的富文本编辑器，主要用于网页内容的编辑与创建。本开发人员指南旨在帮助开发者顺利安装、升级及集成CKEditor 4到他们的项目中。" CKEditor 4 开发人员指南详细介绍了如何操作这款编辑器，...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值