[vue3] 富文本

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

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

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

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

富文本

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

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

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

富文本地址:wangEditor

安装

安装依赖包

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

 新建src/views/Editor.vue

创建后添加路由

App.vue

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

 效果图

 获取富文本内容

加个按钮

获取富文本内容

定义getEditor方法

const getEditor  = ()=>{

    console.log(valueHtml.value);

}

 效果图