​
技术概述

PIG AI 编辑器是一个基于 Vue 的 WYSIWYG（所见即所得）富文本编辑组件，集成了 AI 辅助功能，支持实时预览和内容优化。该组件无需开发者掌握复杂标记语言，同时提供标准化的数据输出接口，适用于需要增强内容编辑体验的各类表单场景。

​
组件集成

​
基础引入方式

import AiEditor from '/@/components/AiEditor/index.vue';

<ai-editor 
  v-model="form.prompt"
  :placeholder="promptPlaceholder"
  :min-height="450"
  output="text"
/>

​
主要属性

// 核心属性
v-model     // 双向绑定的内容值
placeholder // 占位提示文本
min-height  // 编辑器最小高度(px)
output      // 输出格式，可选值: "text"(纯文本), "html"(HTML格式)

// 高级配置（可选）
:toolbar="['bold', 'italic', 'link']"  // 自定义工具栏
:readonly="false"                      // 只读模式
@change="handleEditorChange"           // 内容变更回调
@focus="handleEditorFocus"             // 获得焦点回调

在表单中使用 AiEditor 时，需要在外层 form 元素添加 @submit.prevent 指令，以防止表单提交导致页面刷新，中断编辑器状态。

​
实现功能

​
AI 辅助编辑流程

  1. 在编辑器中输入初始文本内容
  2. 选中需要由 AI 辅助处理的文本片段
  3. 触发 AI 编辑功能（通过工具栏按钮或快捷键）
  4. 系统处理并返回优化后的内容
1

选中文本

在编辑器中选择需要处理的文本片段

2

触发AI功能

点击工具栏中的 AI 按钮或使用快捷键 Ctrl+Shift+A

3

选择操作类型

从弹出菜单中选择需要执行的 AI 操作类型

4

应用结果

系统处理完成后，自动将结果应用到当前位置

​
实际操作示例

​
开发示例

<template>
  <form @submit.prevent="handleSubmit">
    <ai-editor
      v-model="formData.content"
      :min-height="300"
      output="text"
    />
    <button type="submit">提交</button>
  </form>
</template>

<script setup>
import AiEditor from '/@/components/AiEditor/index.vue';
import { ref } from 'vue';

const formData = ref({
  content: ''
});

const handleSubmit = () => {
  console.log('提交的内容:', formData.value.content);
  // 处理表单提交逻辑
};
</script>