[vue3] 富文本

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

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

                           📖MyBatis专栏📖Spring专栏📖SpringMVC专栏📖SpringBoot专栏

                           📖Docker专栏📖Reids专栏📖MQ专栏📖SpringCloud专栏     

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

🛴富文本

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

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

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

🛵富文本地址:wangEditor

🚲安装

🛵安装依赖包

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

 🚲新建src/views/Editor.vue

🛵创建后添加路由

🛵App.vue

<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

<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('
hello 富文本编辑器
')
const handleCreated = (editor: any) => {
    editorRef.value = editor // 记录 editor 实例，重要！
}
script>

 🚲效果图

 🚲获取富文本内容

加个按钮

获取富文本内容

定义getEditor方法

const getEditor  = ()=>{

    console.log(valueHtml.value);

}

 🚲效果图