Vue Newszu Proofreading (文本校对组件)

一个基于 Vue.js 的智能文本校对组件，提供中文文本的错误检测和修正建议功能。

功能特性

- 🔍 智能文本校对和错误检测
- 🎯 精确的错误位置定位和高亮显示
- 📝 便捷的错误修正建议
- 🎨 现代化的用户界面设计
- 📱 响应式布局支持
- 🔧 可自定义的 API 配置
- 📦 支持多种引入方式

安装

``bash
npm install newszu-proofreading
`

使用方法

$3

`javascript
// main.js
import Vue from "vue";
import TextRecognition from "newszu-proofreading";

// 引入样式
require("newszu-proofreading/dist/newszu-proofreading.css");
// 或在 index.html 中引入：
//

Vue.use(TextRecognition);
`

$3

`javascript
import TextRecognition from "newszu-proofreading";

export default {
components: {
TextRecognition,
},
// ...
};
`

注意：样式文件建议在 main.js 或 index.html 中全局引入一次即可。

基本用法

`vue



`

完整示例（参考实际使用场景）

`vue



`

API 参数

$3

| 参数 | 类型 | 必填 | 默认值 | 说明 |
| -------------- | ------- | ---- | ---------- | --------------------- |
| visible | Boolean | 是 | false | 控制对话框的显示/隐藏 |
| apiConfig | Object | 是 | - | API 配置对象 |
| messageHandler | Object | 否 | 控制台输出 | 消息提示处理器 |

$3

| 参数 | 类型 | 必填 | 说明 |
| ----------- | ------ | ---- | ----------------------- |
| baseUrl | String | 是 | API 基础 URL |
| checkUrl | String | 是 | 启动校对的 API 路径 |
| progressUrl | String | 是 | 获取校对进度的 API 路径 |
| resultUrl | String | 是 | 获取校对结果的 API 路径 |

$3

| 参数 | 类型 | 必填 | 说明 |
| ------- | -------- | ---- | ---------------- |
| warning | Function | 否 | 警告消息处理函数 |
| error | Function | 否 | 错误消息处理函数 |
| success | Function | 否 | 成功消息处理函数 |

$3

| 事件名 | 参数 | 说明 |
| ------------- | ---------------- | ---------------------------------- |
| close | - | 对话框关闭时触发 |
| apply-changes | correctedContent | 应用修改时触发，参数为修正后的内容 |
| dialog-opened | - | 对话框打开后触发 |

$3

| 方法名 | 参数 | 说明 |
| ----------------------- | ------- | -------------------------------- |
| openTextProofingDialog | content | 打开校对对话框并开始校对指定内容 |
| closeTextProofingDialog | - | 关闭校对对话框 |

API 接口规范

$3

请求:

`json
{
"content": "要校对的文本内容"
}
`

响应:

`json
{
"message": "提交成功",
"data": "校对任务ID"
}
`

$3

请求:

`json
{
"requestId": "校对任务ID"
}
`

响应:

`json
{
"data": {
"progress": 50
}
}
`

$3

请求:

`json
{
"requestId": "校对任务ID"
}
`

响应:

`json
{
"message": "获取成功",
"data": {
"items": [
{
"errMsg": "错误类型",
"errPos": 10,
"errWord": "错误的词",
"cordWord": ["建议的词"]
}
]
}
}
`

重要说明

$3

组件会自动处理 HTML 内容：

1. 保留标签:

和
标签会被保留用于校对
2. 临时移除: 其他 HTML 标签（如 ,

$3



组件依赖 Element UI 的以下组件：

- el-dialog
- el-button

请确保你的项目已安装并正确配置 Element UI：

`javascript
import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

Vue.use(ElementUI);
`

如果你使用的是按需引入，请确保引入了所需的组件：

`javascript
import { Dialog, Button } from "element-ui";

Vue.use(Dialog);
Vue.use(Button);
`

样式自定义

组件使用原生 CSS 编写（无需预处理器），提供了完整的 CSS 类名，您可以通过覆盖这些类名来自定义样式：

`css
/ 主对话框 /
.text-proofing-dialog >>> .el-dialog {
/ 自定义样式 /
}

/ 工具栏 /
.text-proofing-toolbar {
/ 自定义样式 /
}

/ 文本编辑区域 /
.text-editor {
/ 自定义样式 /
}

/ 错误列表 /
.error-list {
/ 自定义样式 /
}

/ 错误项 /
.error-items {
/ 自定义样式 /
}

/ 错误高亮 /
.editor-content span[data-error-word] {
/ 自定义样式 /
}
`

注意: 组件使用了 scoped 样式和深度选择器 >>> 来避免样式污染，在自定义样式时可能需要提高选择器权重。

构建和发布

`bash

安装依赖

npm install

开发构建

npm run build:dev

生产构建

npm run build

发布到npm

npm publish
`

常见问题

$3

如果在使用时遇到 No PostCSS Config found 错误：

方法 1：直接引入编译后的 CSS（推荐）

`javascript
// 不要直接 import CSS 文件
// import "newszu-proofreading/dist/newszu-proofreading.css";

// 在 HTML 中引入或在 main.js 中这样引入：
require("newszu-proofreading/dist/newszu-proofreading.css");
`

方法 2：在项目根目录添加 postcss.config.js

`javascript
module.exports = {
plugins: {
autoprefixer: {},
},
};
`

方法 3：在 vue.config.js 中配置 CSS 规则

`javascript
module.exports = {
css: {
extract: false, // 不提取 CSS
loaderOptions: {
css: {
// CSS 相关配置
},
},
},
};
`

浏览器兼容性

- Vue.js 2.6+
- Element UI 2.x
- 现代浏览器 (Chrome, Firefox, Safari, Edge)
- IE11+ (需要 polyfill)

许可证

MIT License

更新日志

$3

- 重构组件，移除对 Vuex 和项目特定依赖
- 新增 apiConfig prop，支持自定义 API 配置
- 新增 messageHandler` prop，支持自定义消息提示
- 改进 TypeScript 类型定义
- 优化组件封装，提高复用性
- 完善文档和使用示例
- 使用原生 CSS 替代 SCSS，减少包体积和依赖

$3

- 完善组件封装，支持标准 npm 包安装
- 优化 API 配置方式
- 改进 TypeScript 类型定义
- 增强样式自定义能力

支持

如有问题或建议，欢迎提交 Issue。