适合vue的富文本框

我就是我 2024-04-17 20:27 74阅读 0赞

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

<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
            },
            /** * @description 是否开启本地存储 */
            cache: { 
                type: Boolean,
                default: false
            }
        },
    
        data() { 
            return { };
        },
    
        computed: { 
            editorId() { 
                return `editor${ this._uid}`;
            }
        },
    
        watch: { 
            value(newValue, oldValue) { 
                // console.log(newValue);
                // 解决页面第一次加载后获取的数据无法渲染到富文本的问题
                this._setHtmlOnce(newValue);
            }
        },
    
        methods: { 
            setHtml(val) { 
                this.editor.txt.html(val);
            },
    
            setEditorHeight() { 
                let el = document.querySelector('.w-e-text-container');
    
                el.style.minHeight = '300px';
                el.style.height = '';
            },
    
            _setHtmlOnce(val) { 
                if (!this.__setHtmlCount) { 
                    this.editor.txt.html(val);
                    this.__setHtmlCount = 1;
                }
            }
        },
    
        mounted() { 
            this.editor = new Editor(`#${ this.editorId}`);
            this.editor.customConfig.onchange = html => { 
                let text = this.editor.txt.text();
                // if (this.cache) localStorage.editorCache = html;
                this.$emit('input', this.valueType === 'html' ? html : text);
                this.$emit('on-change', html, text);
            };
            this.editor.customConfig.onchangeTimeout = this.changeInterval;
            this.editor.customConfig.showLinkImg = false;
            // this.editor.customConfig.uploadImgShowBase64 = true;
            // create这个方法一定要在所有配置项之后调用
    
            this.editor.create();
            // this.setEditorHeight();
            // 如果本地有存储加载本地存储内容
            // let html = this.value || localStorage.editorCache;
    
            let html = this.value;
            if (html) this.editor.txt.html(html);
        }
    };
    </script>

## 页面js中直接调用 ##

import Editor from '@/components/editor/index';
    export default { 
        components: { 
            Editor
        },
      }

## 页面上直接渲染 ##

#### 效果图 ####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]![\#\#\#\# 转换成的内容][20190831154945157.png]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20190831154843937.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L0hfY19s,size_16,color_FFFFFF,t_70
[20190831154945157.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/04/17/c65c6ced4a8d4f5aa6bc5a25000df2ce.png