官网地址 wangEditor官网

工具栏配置

共有58个key

    toolbarKeys: [
        "bold","underline","italic","through","code","sub","sup","clearStyle","color",
        "bgColor","fontSize","fontFamily","indent","delIndent",
        "justifyLeft","justifyRight","justifyCenter","justifyJustify",
        "lineHeight","insertImage","deleteImage","editImage","viewImageLink",
        "imageWidth30","imageWidth50","imageWidth100","divider",
        "emotion","insertLink","editLink","unLink","viewLink","codeBlock","blockquote","headerSelect","header1",
        "header2","header3","header4","header5","todo","redo","undo","fullScreen","bulletedList",
        "numberedList","insertTable","deleteTable","insertTableRow","deleteTableRow","insertTableCol",
        "deleteTableCol","tableHeader","tableFullWidth",
        "insertVideo","uploadVideo","uploadImage","codeSelectLang"
    ]

把所有工具栏列出来，就是下图：

解决ios无法选中的问题
div *{ -webkit-user-select:text; outline: none; }
div{ -webkit-user-select:text; outline: none; }

使用

模板

<template>
	<view>
	    <!-- <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet" /> -->
		<view class="bg-f46 radius10">
			<Toolbar :editor="editor" :defaultConfig="toolbarConfig" :mode="mode" />
		    <Editor style="height: 400px; overflow-y: hidden;" v-model="html"
		    :defaultConfig="editorConfig" :mode="mode" @onCreated="onCreated"/>
		</view>
	</view>
</template>

script

<script>
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue';
    export default {
        components: { Editor, Toolbar },
        data() {
            return {
                editor: null,
                html: '',
                toolbarConfig: {
                    toolbarKeys: ['bold', 'underline', 'through', 'clearStyle', 'fontSize', 
                    'indent', 'delIndent', 'justifyLeft', 'justifyRight', 'justifyCenter', 'justifyJustify', 
                    'bulletedList', 'numberedList', 
                    'uploadVideo', 'uploadImage','deleteImage', 'editImage'],
                },
                editorConfig: { 
                    autoFocus: false,
                    placeholder: '请输入内容...' ,
                    hoverbarKeys: {
                        'image': {},
                        'video': {},
                    },
                    MENU_CONF: {
                        uploadImage: {},
                        uploadVideo: {}
                    }
                },
                mode: 'simple', // 'default' or 'simple'
            };
        },
        beforeDestroy() {
            const editor = this.editor
            if (editor == null) return
            editor.destroy() // 组件销毁时，及时销毁编辑器
        },
        methods: {
            onCreated(editor) {
                this.editor = Object.seal(editor) // 一定要用 Object.seal() ，否则会报错
            },
            /** 初始化富文本编辑器 */
            initEditor() {
                let that=this;
                // 上传图片
                this.editorConfig.MENU_CONF['uploadImage'] = {
                    // 自定义上传
                    customBrowseAndUpload(insertFn) {
                        uni.chooseImage({
                            count: 1,
                            sourceType: ['camera','album'],
                            sizeType: ['compressed', 'original'],
                            success: (rey) => {
								const tempFilePaths = rey.tempFilePaths[0]
                                uni.showLoading({ title: '上传中',mask: true });
                                uni.uploadFile({
									url: that.uploadUrl,
									filePath: tempFilePaths,
									name: 'file',
                                    success:(ret) =>{
                                        var res=JSON.parse(ret.data);
                                        uni.hideLoading();
                                        if(res.code==1){
                                            let str = res.data.split('/');
                                            insertFn(res.data, str[str.length - 1], res.data);
                                        } else{
                                            that.toast(res.msg)
                                        }
                                    }
                                })
                            },
                            fail: (err) => { console.log(err.code) }
                        })
                    },
                }
                // 上传视频
                this.editorConfig.MENU_CONF['uploadVideo'] = {
                    // 自定义上传
                    customBrowseAndUpload(insertFn) {
                        uni.chooseVideo({
                            count: 1,
                            sourceType: ['camera', 'album'],
                            success: function (rey) {
                                // console.log(rey.tempFile)
                                uni.showLoading({ title: '上传中',mask: true });
                                uni.uploadFile({
                                    url: that.uploadUrl,
                                    file: rey.tempFile,
                                    fileType: 'video',
                                    name: 'file',
                                    success: (uploadFileRes) => {
                                        let res = JSON.parse(uploadFileRes.data)
                                        uni.hideLoading();
                                        if(res.code==1){
                                            insertFn(res.data, res.data+'?x-oss-process=video/snapshot,t_100,f_jpg')
                                        } else{
                                            that.toast(res.msg)
                                        }
                                    },
                                });
                            },
                            fail: (err) => { console.log(err.code) }
                        });
                    },
                }
            },
        }
    };
    </script>