Vue.js文本校对组件，基于Newszu设计的智能错误检测和修正建议组件
npm install vue-newszu-proofreadingbash
npm install vue-newszu-proofreading
`
使用方法
$3
`javascript
import Vue from "vue";
import VueNewszuProofreading from "vue-newszu-proofreading";
Vue.use(VueNewszuProofreading);
`
$3
`javascript
import { NewszuProofreading } from "vue-newszu-proofreading";
export default {
components: {
"text-recognition": NewszuProofreading,
},
};
`
基本用法
`vue
:api-config="apiConfig"
:message-handler="messageHandler"
@close="closeTextProofingDialog"
@apply-changes="applyTextProofingChanges"
@dialog-opened="onTextProofingDialogOpened"
ref="textRecognition"
>
`
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": ["建议的词"]
}
]
}
}
`
样式自定义
组件提供了完整的 CSS 类名，您可以通过覆盖这些类名来自定义样式：
`css
/ 主对话框 /
.text-proofing-dialog {
}
/ 工具栏 /
.text-proofing-toolbar {
}
/ 文本编辑区域 /
.text-editor {
}
/ 错误列表 /
.error-list {
}
/ 错误项 /
.error-items {
}
/ 错误高亮 /
.error-highlight {
}
`
构建和发布
`bash
安装依赖
npm install
开发构建
npm run build:dev
生产构建
npm run build
发布到npm
npm publish
``