### 运行 ``` 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; } ```