vue3 vite3 typescript使用wangEditor编辑器

文章目录

• • • ⭐写在前面
    • ⭐步入正题
    • • 🚀1.安装
      • 🚀2.配置
      • • 2.1 存数据
        • 2.2 读数据
      • 🚀3.跨域及其他问题
      • • 3.1 跨域
        • 3.2 其他问题
      • 🚀4.写在最后

⭐写在前面

🚀 框架Vue3 + Vite3 + TypeScript：

👉 Vue3：更快、更小、更易维护

Vue3 是 Vue.js 的最新版本，相比于 Vue2，Vue3 在性能、体积和开发体验上都有了大幅度的提升。其中最大的变化是使用了新的响应式系统，使得 Vue3 在性能方面有了很大的提升。此外，Vue3 还引入了 Composition API，使得代码更易维护和重用。

👉 Vite3：更快的开发体验

Vite3 是一个基于 ES Modules 的构建工具，它利用了浏览器原生的 ES Modules 特性，实现了更快的开发体验。Vite3 的热更新速度非常快，可以在几乎不等待的情况下进行热更新。此外，Vite3 还支持多种语言和框架，包括 Vue、React、Angular 等。

👉 TypeScript：更安全、更可维护的代码

TypeScript 是 JavaScript 的一个超集，它为 JavaScript 添加了静态类型检查和其他一些特性，使得代码更安全、更易维护。TypeScript 可以在编译时检查代码的类型错误，避免了在运行时出现类型错误的情况。此外，TypeScript 还支持面向对象编程和模块化编程，使得代码更易维护和重用。

⭐步入正题

🚀1.安装

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

🚀2.配置

根据文档给出的模板：

<template>
    <div style="border: 1px solid #ccc">
      <Toolbar
        style="border-bottom: 1px solid #ccc"
        :editor="editorRef"
        :defaultConfig="toolbarConfig"
        :mode="mode"
      />
      <Editor
        style="height: 500px; overflow-y: hidden;"
        v-model="valueHtml"
        :defaultConfig="editorConfig"
        :mode="mode"
        @onCreated="handleCreated"
      />
    </div>
</template>复制

<script setup lang="ts">
import {  shallowRef,ref,onBeforeUnmount, reactive} from 'vue';
import request from '@/utils/axios'
import { useRouter } from 'vue-router';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
const router =useRouter()
const editorRef = shallowRef()
const mode = 'default'
const valueHtml = ref('')
const toolbarConfig = { }
const editorConfig = { placeholder: '请输入内容...' }
const handleChange = (editor:any) => {
      console.log('change:', editor.getHtml());
    };
const articleList =reactive({
  content:valueHtml,
  name:"test",
})
 
 
onBeforeUnmount(() => {
        const editor = editorRef.value
        if (editor == null) return
        editor.destroy()
    })
const handleCreated = (editor:any) => {
      editorRef.value = editor // 记录 editor 实例，重要！
    }
</script>复制

valueHtml用来存储编辑器的内容。它通过ref函数创建，并在Editor组件上使用v-model指令进行绑定，从而实现了双向数据绑定。当用户在编辑器中输入或修改文本时，valueHtml的值会自动更新，当我们点击提交按钮时，会将文章内容提交到数据库。

2.1 存数据

const submit=()=>{    //提交文章内容到数据库
  request.post('/article',articleList).then(res=>{
    console.log(res.status);
  })
}复制

富文本编辑器的内容通常是HTML格式的，因此在存储到数据库中时也应该以HTML格式进行存储，可以将该字段定义为VARCHAR或TEXT类型。

2.2 读数据

<template>
    <Editor style="height: 500px;width: 500px; overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig">
    </Editor>
</template>
<script setup lang="ts">
import request from '@/utils/axios';
import { onMounted, ref } from 'vue';
import { useRoute } from 'vue-router';
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor } from '@wangeditor/editor-for-vue'
const valueHtml: any = ref('')
const editorConfig = { readOnly: true }
onMounted(() => {  
    let route = useRoute()
    //获取文章内容
    request.get('/article/' + route.query.id).then(res => {
        console.log(res.data.data.content);
        valueHtml.value = res.data.data.content![在这里插入图片描述](https://img-blog.csdnimg.cn/882a01db2bc747eab2cc98dacb649d5e.png#pic_center)
 
    })
})
</script>复制

这里也使用了编辑器进行渲染，通过编辑器配置readOnly: true可以设置为只读模式，这样可以将富文本的样式排版保留。虽然渲染HTML格式内容可以使用v-html，排版虽在但是富文本本有的样式会没，例如：
v-html：

使用富文本编辑器

🚀3.跨域及其他问题

3.1 跨域

  //vite.config.ts
  server:{
    hmr:true,
    open: true,//启动项目自动弹出浏览器
    port: 3000,//启动端口
        proxy: {
          '/api': {
            target: 'http://localhost:9090',	//实际请求地址
            changeOrigin: true,
            rewrite: (path) => path.replace(/^\/api/, '')
          },
        }
  }复制

 //axios.ts
const request = axios.create({
    // headers:{
    //   token : ``
    // },
    baseURL:"/api",
    timeout: 3000
  });复制

3.2 其他问题

HMR error: Cannot access ‘…’ before initialization

这是循环引用导致的报错,会导致热更新报错，需要手动刷新页面才能生效
错误写法： mian.js与xx.vue重复导入import router from '@/router'

//mian.js
import router from '@/router'
 
createApp(App).use(router).mount('#app')
 
//xx.vue
import router from "@/router";复制

正确写法：

//mian.js
import router from '@/router'
 
createApp(App).use(router).mount('#app')
 
//xx.vue
import { useRouter } from 'vue-router';
const router = useRouter()复制

🚀4.写在最后

更多富文本编辑器配置说明请看：wangEditor文档

后端转前端的小白一枚，一起加油~