先解决缩进功能无法直接使用的问题,
如下,直接这样使用的时候,缩进按钮一直是disabled的置灰的状态,无法使用
toolbar: {
items: [
...
'indent',// 增加缩进
'outdent',// 减少缩进
...
]
}
**
解决方法一(推荐):
**
直接去官网添加插件,在线打包,https://ckeditor.com/ckeditor-5/online-builder/
缩进功能的插件是以下两个,加上即可
在线打包下载后,引入到项目中,缩进功能就可以使用了
**
解决方法二:
**
手动打包
git clone -b stable https://github.com/ckeditor/ckeditor5-build-classic.git
cd ckeditor5-build-classic
npm install
IndentBlock 在@ckeditor/ckeditor5-indent/src/已经存在了,所以不需要重新安装,但是需要引入。
在src/ckeditor.js引入IndentBlock :
import Indent from '@ckeditor/ckeditor5-indent/src/indent';// 已有
import IndentBlock from '@ckeditor/ckeditor5-indent/src/indentblock';//引入
Editor.builtinPlugins = [
...
Indent,
IndentBlock
...
]
重新打包后,缩进功能就可以使用了:
npm run build
**
关于首行缩进功能的修改:
**
原理就是讲margin-left:40px改为text-indent:2em,
build/ckeditor.js中,检索相关代码:
t.config.define("indentBlock",{offset:40,unit:"px"})
改成:
t.config.define("indentBlock",{offset:2,unit:"em"})
检索相关代码:
this.editor.locale.contentLanguageDirection?"margin-right":"margin-left"
改成:
this.editor.locale.contentLanguageDirection?"text-indent":"text-indent"
首行缩进功能就可以实现了