当前位置：首页 > news >正文

[vue3] 富文本

news 来源：原创 2024/5/19 13:52:50

✨✨博主简介:一个会bbox的👨‍💻

✨✨个人主页:沫洺的主页

📚📚系列专栏: 📖 JavaWeb专栏📖 JavaSE专栏 📖 Java基础专栏📖vue3专栏

💖💖如果文章对你有所帮助请留下三连✨✨

🛴富文本

🛵纯文本就是用文本编辑器编写，输入什么就是什么的文档。

🛵富文本是通过富文本编辑器进行渲染和计算，然后再呈现给你看的文档，所见即所得。

🛵doc，docx，rtf，pdf都是富文本的格式, 包括浏览器等都可算作广义上的富文档软件

🛵富文本地址:wangEditor

🚲安装

🛵安装依赖包

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

🚲新建src/views/Editor.vue

🛵创建后添加路由

🛵App.vue

<template>
 <router-link to="/home">首页</router-link><br />
  <router-link to="/poduct/list">商品列表</router-link><br />
  <router-link to="/editor">富文本</router-link><br />
  <hr />
  <router-view></router-view>
</template>
<script setup lang="ts">

</script>

🛵router/index.ts

import { createRouter, createWebHistory } from "vue-router";
const routes = [
    {
        path: '/home',
        component: () => import("@/views/Home.vue")
    },
    {
        path: '/poduct',
        component: () => import("@/views/poduct/Index.vue"),
        children: [
            {
                path: '/poduct/list',
                component: () => import("@/views/poduct/List.vue"),
            }
        ]
    },
    {
        path: '/editor',
        component: () => import("@/views/Editor.vue")
    },
]
const router = createRouter({
    history: createWebHistory(),
    routes
})
export default router

🚲编辑Editor.vue

<template>
    <div style="border: 1px solid #ccc">
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" />
        <Editor style="height: 300px; overflow-y: hidden;" v-model="valueHtml" @onCreated="handleCreated" />
    </div>
</template>
<script setup lang="ts">
import { ref, reactive, onBeforeUnmount, shallowRef, onMounted } from "vue";
import '@wangeditor/editor/dist/css/style.css' // 引入 css
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
//富文本编辑器
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()
const valueHtml = ref('<p>hello 富文本编辑器</p>')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
</script>