Vue.js文本校对组件,基于Newszu设计的智能错误检测和修正建议组件
npm install newszu-proofreadingbash
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
ref="textRecognitionRef"
:visible="textProofingDialogVisible"
:api-config="apiConfig"
:message-handler="messageHandler"
@close="closeTextProofingDialog"
@apply-changes="applyTextProofingChanges"
>
`
完整示例(参考实际使用场景)
`vue
这是要校对的文本内容...
文本校对
ref="textRecognitionRef"
:visible="textProofingDialogVisible"
:api-config="{
baseUrl: $store.state.umsbaseurl,
checkUrl: '/cns/AI/checkContentByCnsAI',
progressUrl: '/cns/AI/getProgressByRequestId',
resultUrl: '/cns/AI/getResultByRequestId',
}"
:message-handler="{
warning: (msg) => $message.warning(msg),
error: (msg) => $message.error(msg),
success: (msg) => $message.success(msg),
}"
@close="closeTextProofingDialog"
@apply-changes="applyTextProofingChanges"
>
`
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 标签(如 ,