ckeditor5 增加左右缩进

博客介绍了CKEditor5的安装与配置过程。首先需安装Node和yarn,接着克隆CKEditor5仓库并安装依赖,再安装左右缩进插件。之后进行配置,添加插件和设置工具栏等。最后构建项目查看demo,若需首行缩进,可修改对应文件后重新构建。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、安装好Node 和 yarn

2、安装ckeditor5

git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git cd ckeditor5-build-classic

npm install

3、安装左右缩进插件

npm install --save ckeditor5-indent-text

4、配置

/src/ckeditor.js

import IndentTextPlugin from 'ckeditor5-indent-text/src/indent-text';

ClassicEditor.builtinPlugins = [

    //...

    IndentTextPlugin,

    //...

];

ClassicEditor.defaultConfig = {

    //...

    toolbar: {

        items: [

            //...

            'indentLeft',

            'indentRight',

            //...

        ]

    },

    //...

    indentText: {

        options: {

            indentLength: 40,

            indentMeasure: 'px',

        },

    },

    //...

};

5、最后

yarn run build

查看demo 如图

6、如果需要首行缩进的话 可以修改bulid/ceditor.js  相对应的地方 把 padding-left 修改成  text-indent  或者 修改node_modules/ckeditor5-indent-text/src/indent-text-editing.js文件下padding-left 修改成  text-indent  最后重新构建 yarn run build

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值