vue3使用AiEditor

# vue3使用AiEditor

### 初始化项目

创建vue项目

![image-20240715112056209](http://banmag.cn:8089/i/2024/07/15/669495974ddd1.png)

```bash
npm init vue@latest
```

选择以下进行安装

![image](http://banmag.cn:8089/i/2024/07/15/669478a563571.png)

安装依赖并启动项目

![image](http://banmag.cn:8089/i/2024/07/15/669478a800904.png)

### 安装插件

```vash
npm i aieditor
```

在页面中引入

```js
  import { AiEditor } from "aieditor";
  import "aieditor/dist/style.css";
```

### 使用

![image](http://banmag.cn:8089/i/2024/07/15/6694c4ce49915.png)

```vue
<script setup>
  import { AiEditor } from "aieditor";
  import "aieditor/dist/style.css";
  import { onMounted, ref,onUnmounted } from "vue";
  //   编辑器的ref
  let divRef = ref(null);
  //   实例化编辑器
  let aiEditor = ref();

onMounted(() => {
    aiEditor.value = new AiEditor({
      element: divRef.value,//元素
      placeholder: "点击输入内容...",
      content: "AiEditor 是一个面向 AI 的开源富文本编辑器。 "// 默认内容
    });
  });

onUnmounted(() => {
    aiEditor && aiEditor.destroy();
  });
</script>

<template>
  <div>
    <h1>AiEditor，一个面向 AI 的富文本编辑器</h1>
  </div>
  <div ref="divRef" style="height: 600px" />
</template>

```

‍

参数配置 https://aieditor.dev/zh/config/base.html

### 配置AI

我这边使用的是火星大模型

在火星后台[创建应用](https://console.xfyun.cn/app/myapp)，

![image](http://banmag.cn:8089/i/2024/07/15/6694c4cf9769e.png)

点击创建的应用

![image](http://banmag.cn:8089/i/2024/07/15/6694c4d0a4f7d.png)

可以看到我们需要的信息

![image](http://banmag.cn:8089/i/2024/07/15/6694c4d1b82d8.png)

点击立即购买，购买`tokens`

修改代码

```vue
<script setup>
  import { AiEditor } from "aieditor";
  import "aieditor/dist/style.css";
  import { onMounted, ref, onUnmounted } from "vue";
  //   编辑器的ref
  let divRef = ref(null);
  //   实例化编辑器
  let aiEditor = ref();

onMounted(() => {
    aiEditor.value = new AiEditor({
      element: divRef.value, //编辑器挂载的 dom 节点，可以是 string 类型的节点描述，比如 #editor 或者 .editor 等，也可以是一个 dom 节点对象。
      placeholder: "点击输入内容...", //占位符，当编辑器没有任何内容时显示。
      theme: "light", // 主题，支持配置为 "light"（亮色） 或者 "dark"（暗色），默认为亮色主题。
      content: "AiEditor 是一个面向 AI 的开源富文本编辑器。 ", // 编辑的内容。
      contentRetention: true, // 是否自动保存（缓存）当前编辑的内容，默认为：false。
      contentRetentionKey: "ai-vue-demo", //自动保存（缓存）到 localStorage 的 key 值，默认为：ai-editor-content。
      ai: {
        models: {
          spark: {
            appId: "***",
            apiKey: "*****",
            apiSecret: "****",
            protocol: "ws", //或者 wss
            version: "v3.1" //或者其他

}
    }}

});
  });

onUnmounted(() => {
    aiEditor && aiEditor.destroy();
  });
</script>

<template>
  <div>
    <h1>AiEditor，一个面向 AI 的富文本编辑器</h1>
  </div>
  <div ref="divRef" style="height: 600px" />
</template>

```

![recording](http://banmag.cn:8089/i/2024/07/15/6694c4d2d6c0a.gif)

这样我们的ai的基本功能就配置好了，其他请参考官网 https://aieditor.dev/zh/ai/base.html

### 配置图片

```vue
 aiEditor.value = new AiEditor({
      element: divRef.value, //编辑器挂载的 dom 节点，可以是 string 类型的节点描述，比如 #editor 或者 .editor 等，也可以是一个 dom 节点对象。
      placeholder: "点击输入内容...", //占位符，当编辑器没有任何内容时显示。
      theme: "light", // 主题，支持配置为 "light"（亮色） 或者 "dark"（暗色），默认为亮色主题。
      content: "AiEditor 是一个面向 AI 的开源富文本编辑器。 ", // 编辑的内容。
      contentRetention: true, // 是否自动保存（缓存）当前编辑的内容，默认为：false。
      contentRetentionKey: "ai-vue-demo", //自动保存（缓存）到 localStorage 的 key 值，默认为：ai-editor-content。
      ai: {
        models: {
          spark: {
            appId: "3a8073e1",
            apiKey: "8c763c72c5ce1877c953bbd53829207e",
            apiSecret: "NTk5Zjg1NmY1YzNmNTNiYmU2MmY3NWU4",
            protocol: "ws", //或者 wss
            version: "v3.1" //或者其他
          }
        }
      },
      image: {
        allowBase64: true,
        defaultSize: 350,

uploadUrl: "***",
        uploadFormName: "file", //上传时的文件表单名称
        uploadHeaders: {
          Authorization: "****",
        },
        uploader: (file, uploadUrl, headers, formName) => {
          //可自定义图片上传逻辑
        },
        uploaderEvent: {
          onUploadBefore: (file, uploadUrl, headers) => {
            //监听图片上传之前，此方法可以不用回任何内容，但若返回 false，则终止上传
          },
          onSuccess: (file, response) => {
            //监听图片上传成功
            //注意：
            // 1、如果此方法返回 false，则图片不会被插入到编辑器
            // 2、可以在这里返回一个新的 json 给编辑器
          },
          onFailed: (file, response) => {
            //监听图片上传失败，或者返回的 json 信息不正确
          },
          onError: (file, error) => {
            //监听图片上传错误，比如网络超时等
          }
        },
        bubbleMenuItems: ["AlignLeft", "AlignCenter", "AlignRight", "delete"]
      }
    });
```

通过官方文档查看，上传图片还是相对简单的

### 总结

经过阅读官方文档，感觉还是可以的，功能全面，操作也比较简单，后续推出的功能也比较客观，非常支持