一套内核，装得下所有编辑需求

<template>
  <Sneditor ref="ed" v-model="content" model-type="markdown" theme="cyber" :height="480"
            :options="editorOptions" @save="onSave" />
</template>

<script setup>
import { ref } from 'vue'
import Sneditor from './components/Sneditor.vue'

const content = ref('')
const ed = ref(null)
const editorOptions = {
  ai: { provider: 'zhipu', apiKey: 'xxx.yyy', remember: true },
  map: { defaultProvider: 'baidu' }
}

function onSave(payload) {
  api.post('/article', { content: payload.markdown })
}
// 也可以用 ref 调实例方法
// ed.value.getMarkdown(); ed.value.insertMapLocation({ lng: 116.397, lat: 39.908, name: '天安门' })
</script>

<template>
  <sneditor v-model="content" model-type="markdown" theme="mint" :height="480"
            :options="editorOptions" ref="ed" />
</template>

<script>
import Sneditor from '@/components/Sneditor.vue'

export default {
  components: { Sneditor },
  data () {
    return {
      content: '',
      editorOptions: { ai: { provider: 'deepseek', apiKey: 'sk-xxx' } }
    }
  },
  async mounted () {
    const md = this.$refs.ed.getMarkdown()
    // 也有 this.$refs.ed.insertMarkdown('## 标题')
  }
}
</script>

import { useRef, useEffect, forwardRef, useImperativeHandle } from 'react'
import '../sneditor/sneditor.css'
import '../sneditor/sneditor.js'          // 执行后挂到 window.Sneditor

const SneditorEditor = forwardRef(function SneditorEditor(
  { value = '', onChange, options = {} }, ref
) {
  const host = useRef(null)
  const ed = useRef(null)

  useEffect(() => {
    const Sneditor = window.Sneditor
    ed.current = new Sneditor(host.current, {
      ...options,
      content: value,
      onChange: (p) => onChange && onChange(p)
    })
    return () => ed.current.destroy()      // 卸载时必须销毁，否则事件会泄漏
  }, [])                                   // 依赖留空：只在挂载时建一次

  useImperativeHandle(ref, () => ({
    getHtml: () => ed.current.getHtml(),
    getMarkdown: () => ed.current.getMarkdown(),
    setContent: (v, f) => ed.current.setContent(v, f),
    getEditor: () => ed.current
  }))

  return <div ref={host} />
})

export default SneditorEditor

// 全部设置就在这一个对象里：AI 面板上没有任何输入框
var editor = new Sneditor('#editor', {
  ai: {
    provider: 'zhipu',        // openai | zhipu | spark | deepseek | moonshot | qwen | siliconflow | baidu
    apiKey: 'xxxx.yyyy',      // 当前服务商的 Key
    model: 'glm-4-flash',     // 留空用服务商默认模型

    // 多家一起配（按服务商名分别给）
    apiKeys: { openai: 'sk-xxx', zhipu: 'xxxx.yyyy' },
    models:  { openai: 'gpt-4o-mini', zhipu: 'glm-4-flash' },
    baseUrls:{ openai: 'https://my-proxy/v1' },   // 走自建转发时填

    panel: 'side',            // side = 编辑器内左右分栏（默认）| popover = 浮层面板
    position: 'right',
    width: 380,
    showEngine: true,         // 面板顶部只读的「服务商 · 模型」标识
    stream: true,
    temperature: 0.7,
    markdownOutput: true      // 结果按 Markdown 渲染后插入
  }
});

// 运行时换引擎（不经过界面）
editor.setAiEngine('openai', { apiKey: 'sk-x', model: 'gpt-4o-mini' });
// 排查连通性
editor.resolveAiEngine();      // { name, label, url, key, model, ready, error, … }
editor.testAiConnection();

Sneditor.apiBase = '/api/editor';

new Sneditor('#editor', {
  ai: {
    provider: 'proxy',                       // 密钥留在服务端，最安全
    endpoint: '',                            // 留空 = Sneditor.apiBase + '/ai'
    headers: { 'X-CSRF-Token': getToken() }, // 自定义请求头
    stream: true
  }
});

# 请求
POST /api/editor/upload        Content-Type: multipart/form-data
     file=<二进制>              # 字段名可用 uploadField 配置
     type=image|video|audio|attachment

# 响应
{
  "code": 0,
  "msg": "ok",
  "data": { "url": "https://cdn.x/a.png", "name": "a.png", "size": 102400, "ext": "png" }
}

# 请求
POST /api/editor/ai            Content-Type: application/json
     { "messages": [{ "role": "user", "content": "…" }], "model": "", "stream": true }

# 响应（SSE，任选一种格式，前端都认）
data: {"content": "增量文本"}          # 推荐：自定义精简格式
data: {"choices":[{"delta":{"content":"增量文本"}}]}   # OpenAI 原生格式
data: 纯文本分块
data: [DONE]