coeditor/ckeditor5/handbook.md

运行

npm install
npm run serve

引用

见App.vue、main.js

添加插件

插件定义在./components/plugins.js中,添加方式见Export2Word插件

Export2Word插件

bug1：图片导出为word会恢复原始大小，而不是在编辑器中显示的大小。 bug2: 导出格式部分错误，如字体颜色、字体背景颜色、高亮

Export2PDF插件

bug1: 导出后编辑器框会显示出被选中的颜色 已修复√ bug2: 导出格式部分错误，字体颜色可以正常显示但背景颜色和高亮不行

智能润色

选中需要处理的文本后，点击对应按钮即可触发实现，对应逻辑需要实现，框架已搭建。见插件Translate 具体的输出可以显示在侧边栏中，修改侧边栏中智能润色子菜单部分App.vue44-48行，如果需要与大模型交互，可以参考271-279行和sendMessage, displayMessage函数

智能格式排版

· 样式库的管理和编辑 利用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( /* ... */ );

初始化配置，可以通过修改./components/utils中的setConfig函数和getUserConfigFromBackend函数和初始化时对应部分。 应用样式需要修改getAndApplyUserStyles函数。需要和后端配合。 需要在目录页面（或其他位置）增加一个用户自定义配置的功能。

/* 定义对应样式的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;
}