首页 前端知识 vue3 vite3 typescript使用wangEditor编辑器

vue3 vite3 typescript使用wangEditor编辑器

2024-04-19 21:04:30 前端知识 前端哥 483 133 我要收藏

文章目录

      • ⭐写在前面
      • ⭐步入正题
        • 🚀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文档

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

转载请注明出处或者链接地址:https://www.qianduange.cn//article/5318.html
评论
发布的文章

用js生成小米商城

2024-04-27 21:04:59

网页汇率计算器vue代码

2024-04-26 13:04:44

Python读写Json文件

2024-04-23 22:04:19

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!