vue-cli富文本编辑器

Posted 2021-08-28 码上暴富

vue-cli富文本编辑器

• 富文本编辑器

富文本编辑器

来源

以下教程参考自官方的教程：
https://www.wangeditor.com/

安装

执行以下语句安装：
npm i wangeditor --save

使用

<template>
    <div>
        <div class="home">
            <div id="demo1"></div>
        </div>
        <button type="button" class="btn" @click="getEditorData">获取当前内容</button>
    </div>
</template>

<script>
    import wangEditor from 'wangeditor'
    export default {
        data() {
            return {
                editor: null,
                editorData: ''
            }
        },
        methods: {
            getEditorData() {
                // 通过代码获取编辑器内容
                let data = this.editor.txt.html();
                alert(data)
            }
        },
        mounted() {
            const editor = new wangEditor(`#demo1`);
            // 配置 onchange 回调函数，将数据同步到 vue 中
            editor.config.onchange = (newHtml) => {
                this.editorData = newHtml
            };
            // 配置菜单栏，删减菜单，调整顺序
            editor.config.menus = [
                'fontName',
                'fontSize',
                'bold',
                'italic',
                'underline',
                'justify',
                'lineHeight',
                'link',
                'image',
                'indent',
                'undo',
                'redo',
            ];
            editor.config.showFullScreen = false; // 配置全屏功能按钮是否展示
            editor.config.showLinkImg = false; // 配置网络图片是否展示
            editor.config.debug = true; //开启debug模式
            editor.config.pasteFilterStyle = false; // 关闭粘贴内容中的样式
            editor.config.pasteIgnoreImg = true; // 忽略粘贴内容中的图片
            editor.config.uploadFileName = 'file'; // 设置文件上传的参数名称
            editor.config.uploadImgServer = 'imageFile/upload'; //设置上传文件的服务器路径
            editor.config.uploadImgHooks = {
                customInsert: (insertImgFn, result) => {
                    // result 即服务端返回的接口
                    // insertImgFn 可把图片插入到编辑器，传入图片 src ，执行函数即可
                    insertImgFn(result.data.filePath)
                }
            };
            // 创建编辑器
            editor.create();
            this.editor = editor
        },
        beforeDestroy() {
            // 调用销毁 API 对当前编辑器实例进行销毁
            this.editor.destroy()
            this.editor = null
        }
    }
</script>

<style lang="scss">
    .home {
        width: 600px;
        margin: 100px auto;
    }
</style>

结果

运行结果