@itshixun/qckeditor-vue2 1.0.0

package/README.md

@@ -0,0 +1,265 @@
+# @itshixun/qckeditor-vue2
+
+Vue 2 组件库，用于 CKEditor 5 富文本编辑器。
+
+**注意：这是 Vue 2 版本。如果你使用 Vue 3，请使用 `@itshixun/qckeditor-vue3`。**
+
+## 安装
+
+```bash
+npm install @itshixun/qckeditor-vue2
+# 或
+pnpm add @itshixun/qckeditor-vue2
+# 或
+yarn add @itshixun/qckeditor-vue2
+```
+
+### 对等依赖
+
+本库需要以下对等依赖：
+
+```bash
+npm install vue@^2.6.0 ckeditor5@>=42.0.0
+```
+
+## 使用
+
+### 引入样式
+
+在使用组件前，需要先引入 CKEditor 的样式文件：
+
+```javascript
+import 'ckeditor5/ckeditor5.css';
+import '@itshixun/qckeditor-vue2/dist/style.css';
+```
+
+### 基础编辑器（CKEditor）
+
+底层 CKEditor 封装组件，支持任意 CKEditor 构建：
+
+```vue
+<template>
+  <CKEditor
+    v-model="content"
+    :editor="ClassicEditor"
+    :config="editorConfig"
+    @ready="onReady"
+    @input="onInput"
+  />
+</template>
+
+<script>
+import { ClassicEditor } from 'ckeditor5';
+import { CKEditor } from '@itshixun/qckeditor-vue2';
+import 'ckeditor5/ckeditor5.css';
+
+export default {
+  components: {
+    CKEditor,
+  },
+  data() {
+    return {
+      content: '',
+      ClassicEditor,
+      editorConfig: {
+        toolbar: ['bold', 'italic', 'link', 'bulletedList', 'numberedList'],
+      },
+    };
+  },
+  methods: {
+    onReady(editor) {
+      console.log('Editor ready:', editor);
+    },
+    onInput(data, event, editor) {
+      console.log('Content changed:', data);
+    },
+  },
+};
+</script>
+```
+
+### 经典编辑器（QCKClassic）
+
+预配置的经典编辑器组件：
+
+```vue
+<template>
+  <QCKClassic v-model="content" :config="editorConfig" @ready="onReady" />
+</template>
+
+<script>
+import { QCKClassic } from '@itshixun/qckeditor-vue2';
+import 'ckeditor5/ckeditor5.css';
+
+export default {
+  components: {
+    QCKClassic,
+  },
+  data() {
+    return {
+      content: '',
+      editorConfig: {
+        toolbar: ['bold', 'italic', 'link'],
+      },
+    };
+  },
+  methods: {
+    onReady(editor) {
+      console.log('Editor ready:', editor);
+    },
+  },
+};
+</script>
+```
+
+### 专业版编辑器（QCKEditorPro）
+
+点击激活的编辑器，提升页面性能：
+
+```vue
+<template>
+  <QCKEditorPro
+    v-model="content"
+    :config="editorConfig"
+    placeholder="点击编辑内容"
+    :min-height="100"
+    @ready="onReady"
+  />
+</template>
+
+<script>
+import { QCKEditorPro } from '@itshixun/qckeditor-vue2';
+import 'ckeditor5/ckeditor5.css';
+
+export default {
+  components: {
+    QCKEditorPro,
+  },
+  data() {
+    return {
+      content: '',
+      editorConfig: {
+        toolbar: ['bold', 'italic'],
+      },
+    };
+  },
+  methods: {
+    onReady(editor) {
+      console.log('Editor ready:', editor);
+    },
+  },
+};
+</script>
+```
+
+### 内容展示（QCKContent）
+
+安全渲染编辑器内容：
+
+```vue
+<template>
+  <QCKContent :content="htmlContent" />
+</template>
+
+<script>
+import { QCKContent } from '@itshixun/qckeditor-vue2';
+import 'ckeditor5/ckeditor5.css';
+
+export default {
+  components: {
+    QCKContent,
+  },
+  data() {
+    return {
+      htmlContent: '<p>Hello <strong>World</strong></p>',
+    };
+  },
+};
+</script>
+```
+
+## Props
+
+### CKEditor
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| editor | Function | 必填 | CKEditor 构建类 |
+| config | Object | {} | 编辑器配置 |
+| tagName | String | 'div' | 渲染标签 |
+| disabled | Boolean | false | 是否禁用 |
+| disableTwoWayDataBinding | Boolean | false | 禁用双向绑定 |
+| value / v-model | String | '' | 编辑器内容 |
+
+### QCKClassic
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| config | Object | {} | 编辑器配置 |
+| tagName | String | 'div' | 渲染标签 |
+| disabled | Boolean | false | 是否禁用 |
+| disableTwoWayDataBinding | Boolean | false | 禁用双向绑定 |
+| value / v-model | String | '' | 编辑器内容 |
+
+### QCKEditorPro
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| config | Object | {} | 编辑器配置 |
+| content | String | - | 初始内容 |
+| placeholder | String | '点击编辑内容' | 占位文本 |
+| minHeight | Number | 95 | 最小高度(px) |
+| height | Number | 0 | 固定高度(px) |
+| fitHeight | Boolean | false | 适应父容器高度 |
+| contentBgColor | String | 'rgb(0 0 0 / 2%)' | 背景色 |
+| contentBgHoverColor | String | 'rgb(0 0 0 / 4%)' | 悬停背景色 |
+| borderRadius | Number | 4 | 圆角大小 |
+| sanitize | Boolean | true | 是否清洗 HTML |
+| value / v-model | String | '' | 编辑器内容 |
+
+### QCKContent
+
+| 属性 | 类型 | 默认值 | 说明 |
+|------|------|--------|------|
+| content | String | - | HTML 内容 |
+| containerClass | String | '' | 容器类名 |
+| sanitize | Boolean | true | 是否清洗 HTML |
+| value / v-model | String | '' | 内容 |
+
+## 事件
+
+所有编辑器组件都支持以下事件：
+
+| 事件 | 参数 | 说明 |
+|------|------|------|
+| ready | (editor) | 编辑器就绪 |
+| destroy | - | 编辑器销毁 |
+| blur | (event, editor) | 失去焦点 |
+| focus | (event, editor) | 获得焦点 |
+| input | (data, event, editor) | 内容变化 |
+
+## 与 Vue 3 版本的区别
+
+1. **组件注册**：Vue 2 需要手动在 `components` 选项中注册
+2. **v-model**：Vue 2 使用 `value` prop 和 `input` 事件
+3. **生命周期**：使用 `beforeDestroy` 替代 `beforeUnmount`
+
+## 类型导出
+
+```typescript
+import type { Props, ExtractEditorType } from '@itshixun/qckeditor-vue2';
+```
+
+## 注意事项
+
+1. **CKEditor 授权**：本库使用 CKEditor 5 的 GPL 授权。如需商业使用，请购买 [CKEditor 商业授权](https://ckeditor.com/pricing/)。
+
+2. **样式文件**：必须导入 `ckeditor5/ckeditor5.css` 以确保编辑器样式正确。
+
+3. **HTML 清洗**：`QCKContent` 和 `QCKEditorPro` 默认开启 XSS 防护，会自动过滤危险标签和属性。
+
+4. **Vue 版本**：本库支持 Vue 2.6+ 和 Vue 2.7。
+
+## License
+
+MIT