gin-vue-admin 使用富文本 wangeditor

npm i @wangeditor/editor --save

npm i @wangeditor/editor-for-vue@next --save

VUE 

 <el-form-item label="内容:"  prop="title" >
         <div style="border: 1px solid #ccc">
            <Toolbar
              style="border-bottom: 1px solid #ccc"
              :editor="editorRef"
              :default-config="toolbarConfig"
              :mode="mode"
            />
            <Editor
              v-model="formData.content"
              style="height: 500px; overflow-y: hidden;"
              :default-config="editorConfig"
              :mode="mode"
              @onCreated="handleCreated"
            />
      </div>
 </el-form-item>

JS

import { onBeforeUnmount, ref, shallowRef, reactive } from 'vue'


//富文本++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
// 内容 HTML
const valueHtml = ref('<p>默认</p>')
const toolbarConfig = {}
const editorConfig = { placeholder: '请输入内容...', MENU_CONF: {
            // 配置上传图片
            uploadImage: {
            //server必须要配置正确
              server: "/api/fileUploadAndDownload/upload",
              maxFileSize: 4 * 1024 * 1024, // 1M
              // 最多可上传几个文件，默认为 100
              maxNumberOfFiles: 10,
              // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
              allowedFileTypes: [],
              // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
              fieldName: "file",
              meta: {
              //官网中把token放到了这里，但是请求的时候会看不到token
              },
              headers: {
              //所以token放这里
                "x-token": localStorage.getItem('token'),//window.sessionStorage.token,
              },
              // 将 meta 拼接到 url 参数中，默认 false
              metaWithUrl: false,
              // 跨域是否传递 cookie ，默认为 false
              withCredentials: false,
              // 超时时间，默认为 10 秒
              timeout: 5 * 1000, // 5 秒
              customInsert(res, insertFn) {
                // JS 语法
                // res 即服务端的返回结果
                // 从 res 中找到 url alt href ，然后插图图片
                //后台地址的URL
                insertFn("http://127.0.0.1/"+res.data.file.url);
              },
            }}
          }
// Editor.defaultConfig.uploadImgServer="/upload";
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
  const editor = editorRef.value
  if (editor == null) return
  editor.destroy()
})
const handleCreated = (editor) => {
  editorRef.value = editor // 记录 editor 实例，重要！
}
//富文本++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++

GO跨域问题

在方法入口处写入

    //接收客户端发送的origin （重要！）
	c.Writer.Header().Set("Access-Control-Allow-Origin", "*")
	//服务器支持的所有跨域请求的方法
	c.Header("Access-Control-Allow-Methods", "POST, GET, OPTIONS, PUT, DELETE,UPDATE")
	//允许跨域设置可以返回其他子段，可以自定义字段
	c.Header("Access-Control-Allow-Headers", "Authorization, Content-Length, X-CSRF-Token, Token,session")
	// 允许浏览器（客户端）可以解析的头部 （重要）
	c.Header("Access-Control-Expose-Headers", "Content-Length, Access-Control-Allow-Origin, Access-Control-Allow-Headers")
	//设置缓存时间
	c.Header("Access-Control-Max-Age", "172800")
	//允许客户端传递校验信息比如 cookie (重要)
	c.Header("Access-Control-Allow-Credentials", "true")