AI 编辑器技术实现指南

AiEditor界面概览

技术概述

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 辅助编辑流程

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

选中文本

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

触发AI功能

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

选择操作类型

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

应用结果

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

实际操作示例

AiEditor操作流程

开发示例

<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>

<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>

<template>
  <form @submit.prevent="handleSubmit">
    <ai-editor
      v-model="formData.content"
      :min-height="300"
      output="text"
      :class="{ 'error': errors.content }"
    />
    <div v-if="errors.content" class="error-text">{{ errors.content }}</div>
    <button type="submit" :disabled="!!errors.content">提交</button>
  </form>
</template>

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

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

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

watch(() => formData.value.content, (newVal) => {
  if (!newVal || newVal.length < 10) {
    errors.value.content = '内容长度不能少于10个字符';
  } else {
    errors.value.content = '';
  }
});

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

AI 本地体验

部署使用

RAG 知识库

模型函数

进阶使用

技术概述

组件集成

基础引入方式

主要属性

实现功能

AI 辅助编辑流程

实际操作示例

开发示例

AI 本地体验

部署使用

RAG 知识库

模型函数

进阶使用

​技术概述

​组件集成

​基础引入方式

​主要属性

​实现功能

​AI 辅助编辑流程

​实际操作示例

​开发示例

技术概述

组件集成

基础引入方式

主要属性

实现功能

AI 辅助编辑流程

实际操作示例

开发示例