⭐写在前面
🚀 框架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.安装
🚀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
})
})
</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 其他问题
这是循环引用导致的报错,会导致热更新报错，需要手动刷新页面才能生效
错误写法： 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文档