Vue Newszu Proofreading (文本校对组件)

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

功能特性

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

安装

npm install newszu-proofreading

使用方法

方式一：全局注册（推荐）

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

// 引入样式
require("newszu-proofreading/dist/newszu-proofreading.css");
// 或在 index.html 中引入：
// <link rel="stylesheet" href="path/to/newszu-proofreading.css">

Vue.use(TextRecognition);

方式二：组件内按需引入

import TextRecognition from "newszu-proofreading";

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

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

基本用法

<template>
  <div>
    <!-- 触发校对的按钮 -->
    <button @click="openProofreading">开始文本校对</button>

    <!-- 文本校对组件 -->
    <text-recognition
      ref="textRecognitionRef"
      :visible="textProofingDialogVisible"
      :api-config="apiConfig"
      :message-handler="messageHandler"
      @close="closeTextProofingDialog"
      @apply-changes="applyTextProofingChanges"
    >
    </text-recognition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textProofingDialogVisible: false,
      // API配置
      apiConfig: {
        baseUrl: "https://your-api-domain.com",
        checkUrl: "/cns/AI/checkContentByCnsAI",
        progressUrl: "/cns/AI/getProgressByRequestId",
        resultUrl: "/cns/AI/getResultByRequestId",
      },
      // 消息处理器（可选，用于兼容不同的UI框架）
      messageHandler: {
        warning: (msg) => this.$message.warning(msg),
        error: (msg) => this.$message.error(msg),
        success: (msg) => this.$message.success(msg),
      },
    };
  },
  methods: {
    // 打开文本校对对话框
    openProofreading() {
      const content = "<p>这里是要校对的HTML格式文本内容</p>";
      this.textProofingDialogVisible = true;
      this.$nextTick(() => {
        this.$refs.textRecognitionRef.openTextProofingDialog(content);
      });
    },

    // 关闭对话框
    closeTextProofingDialog() {
      this.textProofingDialogVisible = false;
    },

    // 应用校对修改
    applyTextProofingChanges(correctedContent) {
      console.log("修正后的内容:", correctedContent);
      // 在这里处理修正后的内容，例如更新编辑器内容
    },
  },
};
</script>

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

<template>
  <div>
    <!-- 编辑器 -->
    <div ref="editor" contenteditable="true">
      <p>这是要校对的文本内容...</p>
    </div>

    <!-- 文本校对按钮 -->
    <el-button @click="openTextProofingDialog">文本校对</el-button>

    <!-- 文本校对组件 -->
    <text-recognition
      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"
    >
    </text-recognition>
  </div>
</template>

<script>
export default {
  data() {
    return {
      textProofingDialogVisible: false,
    };
  },
  methods: {
    // 打开文本校对dialog
    openTextProofingDialog() {
      // 获取编辑器内容进行校对
      const content = this.$refs.editor.innerHTML;
      if (!content || content.trim() === "") {
        this.$message.warning("请先输入内容再进行文本校对");
        return;
      }

      // 可选：弹出确认框，提示用户会格式化内容
      this.$confirm("此操作将格式化内容, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          // 显示dialog
          this.textProofingDialogVisible = true;
          // 调用组件的方法开始文本校对
          this.$nextTick(() => {
            if (this.$refs.textRecognitionRef) {
              this.$refs.textRecognitionRef.openTextProofingDialog(content);
            }
          });
        })
        .catch(() => {
          console.log("用户取消了操作");
        });
    },

    // 关闭文本校对dialog
    closeTextProofingDialog() {
      this.textProofingDialogVisible = false;
    },

    // 应用文本校对的修改
    applyTextProofingChanges(cleanContent) {
      // 将修改后的内容应用到编辑器
      this.$refs.editor.innerHTML = cleanContent;
      this.$message.success("文本校对完成");
    },
  },
};
</script>

API 参数

Props

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

apiConfig 配置

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

messageHandler 配置

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

Events

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

Methods

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

API 接口规范

启动校对接口 (checkUrl)

请求:

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

响应:

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

获取进度接口 (progressUrl)

请求:

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

响应:

{
  "data": {
    "progress": 50
  }
}

获取结果接口 (resultUrl)

请求:

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

响应:

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

重要说明

HTML 标签处理

组件会自动处理 HTML 内容：

1. 保留标签: <p> 和 <br> 标签会被保留用于校对
2. 临时移除: 其他 HTML 标签（如 <img>, <video>, <span> 等）会在校对前临时移除
3. 自动恢复: 校对完成后，所有移除的标签会自动恢复到原位置

这样可以确保校对过程不受富文本标签干扰，同时保持内容结构完整。

依赖要求

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

• el-dialog
• el-button

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

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

Vue.use(ElementUI);

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

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

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

样式自定义

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

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

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

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

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

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

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

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

构建和发布

# 安装依赖
npm install

# 开发构建
npm run build:dev

# 生产构建
npm run build

# 发布到npm
npm publish

常见问题

PostCSS Config 错误

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

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

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

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

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

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

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

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

更新日志

v2.0.21

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

v2.0.20

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

支持

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