You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
|
|
|
|
### 运行
|
|
|
|
|
```
|
|
|
|
|
npm install
|
|
|
|
|
npm run serve
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
### 引用
|
|
|
|
|
见`App.vue`、`main.js`
|
|
|
|
|
|
|
|
|
|
### 添加插件
|
|
|
|
|
直接修改`App.vue`,见Export2Word插件
|
|
|
|
|
|
|
|
|
|
#### Export2Word插件
|
|
|
|
|
bug1:图片导出为word会恢复原始大小,而不是在编辑器中显示的大小。
|
|
|
|
|
bug2: 导出格式部分错误,如字体颜色、字体背景颜色、高亮
|
|
|
|
|
|
|
|
|
|
#### Export2PDF插件
|
|
|
|
|
bug1: 导出后编辑器框会显示出被选中的颜色 已修复√
|
|
|
|
|
bug2: 导出格式部分错误,字体颜色可以正常显示但背景颜色和高亮不行
|
|
|
|
|
|
|
|
|
|
#### 智能润色
|
|
|
|
|
选中需要处理的文本后,点击对应按钮即可触发实现,对应逻辑需要实现,框架已搭建。见插件Translate
|
|
|
|
|
|
|
|
|
|
#### 智能格式排版
|
|
|
|
|
· 样式库的管理和编辑
|
|
|
|
|
利用ckeditor5已有插件`style`进行配置。可以对符合要求的block等应用选中的样式。只需要设定好样式库,添加`大模型生成css样式``用户自定义样式管理`即可
|
|
|
|
|
https://ckeditor.com/docs/ckeditor5/latest/features/style.html
|
|
|
|
|
|
|
|
|
|
编辑器初始化时
|
|
|
|
|
```
|
|
|
|
|
// 配置文件定义样式
|
|
|
|
|
import { ClassicEditor, Style } from 'ckeditor5';
|
|
|
|
|
|
|
|
|
|
ClassicEditor
|
|
|
|
|
.create( document.querySelector( '#editor' ), {
|
|
|
|
|
plugins: [ Style, /* ... */ ],
|
|
|
|
|
toolbar: {
|
|
|
|
|
items: [
|
|
|
|
|
'style',
|
|
|
|
|
// More toolbar items.
|
|
|
|
|
// ...
|
|
|
|
|
],
|
|
|
|
|
},
|
|
|
|
|
style: {
|
|
|
|
|
definitions: [
|
|
|
|
|
// Styles definitions.
|
|
|
|
|
// ...
|
|
|
|
|
]
|
|
|
|
|
}
|
|
|
|
|
} )
|
|
|
|
|
.then( /* ... */ )
|
|
|
|
|
.catch( /* ... */ );
|
|
|
|
|
```
|
|
|
|
|
```
|
|
|
|
|
// 定义对应样式的css格式
|
|
|
|
|
.ck.ck-content h3.category {
|
|
|
|
|
font-family: 'Bebas Neue';
|
|
|
|
|
font-size: 20px;
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
color: #d1d1d1;
|
|
|
|
|
letter-spacing: 10px;
|
|
|
|
|
margin: 0;
|
|
|
|
|
padding: 0;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.ck.ck-content p.info-box {
|
|
|
|
|
padding: 1.2em 2em;
|
|
|
|
|
border: 1px solid #e91e63;
|
|
|
|
|
border-left: 10px solid #e91e63;
|
|
|
|
|
border-radius: 5px;
|
|
|
|
|
margin: 1.5em;
|
|
|
|
|
}
|
|
|
|
|
```
|