适合vue的富文本框

最新推荐文章于 2025-05-19 08:41:32 发布

原创

最新推荐文章于 2025-05-19 08:41:32 发布 · 1.3k 阅读

3 ·

CC 4.0 BY-SA版权

本文介绍了如何在Vue项目中创建并使用一个富文本组件，该组件能够自动将输入的内容转换为带有HTML标签的形式，方便在页面上直接调用和渲染，提供了直观的效果图展示。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

直接做成一个组件，在需要的地方直接调用即可，能够自动将内容转换为带有标签

<template>
    <div class="editor-wrapper">
        <div :id="editorId" class="editor-div"></div>
    </div>
</template>

<script>
import Editor from 'wangeditor';
// import 'wangeditor/release/wangEditor.min.css';

export default {
   
    name: 'Editor',
    props: {
   
        value: {
   
            type: String,
            default: ''
        },
        /**
         * 绑定的值的类型, enum: ['html']
         */
        valueType: {
   
            type: String,
            default: 'html'
        },

        /**
         * @description 设置change事件触发时间间隔
         */
        changeInterval: {
   
            type: Number,
            default: 200