vue中使用wangeditor富文本编辑器

目录

安装

 完整代码

通过v-html回显

弹窗内包裹富文本编辑器主动获取焦点失败

判断富文本内容是否为空

 编辑器的事件

​编辑

取消自动获取焦点

去除全屏

学习文档：自动Focus · wangEditor 用户文档

安装

yarn add @wangeditor/editor
# 或者 npm install @wangeditor/editor --save
 
yarn add @wangeditor/editor-for-vue@next
# 或者 npm install @wangeditor/editor-for-vue@next --save

 完整代码

<template>
    <div style="border: 1px solid #ccc; width:640px">
        <!-- 工具栏 -->
        <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig" />
        <!-- 编辑器 -->
        <Editor style="height:200px; overflow-y: hidden;" :defaultConfig="editorConfig" v-model="passSon" @onCreated="onCreated" />
    </div>
</template>
 
<script lang="ts" setup>
import { ref, reactive, shallowRef, onBeforeUnmount } from 'vue'
import { ElMessage } from 'element-plus'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'
import '@wangeditor/editor/dist/css/style.css' //  引入css
//import { globalUrl ] from "@/utils/global";

const editorRef = shallowRef()
const action = ref('')
// action在正式项目中，是地址
// const env = import .meta.env;
//switch (env.MODE) {
    //case "development":
        //action.value = globalUrl.development; //地址格式为: http(s)://.../
        //break;
    //case "test":
        //action.value = globalUrl.test;
        //break;
    //case "production":
        //action.value = globalUrl.production;
        //break;
type InsertFnType = (url: string, alt: string, href: string) => void
const passSon = ref('')

//编辑器配置
const editorConfig = {
    placeholder: '请输入内容...',
    // 所有的菜单配置，都要在 MENU_CONF 属性下
    MENU_CONF: {
        // 配置字号
        // fontSize: [... ],
         insertImage: {
            checkImage(src: string) {
                console.log('image src , src)
                if (src.indexOf('http') !== 0) {
                    return '图片网址必须以 http/https 开头'
                }
                return true
            }
        },
        // 图片上传
        uploadImage: {
            fieldName: 'file',
            server: '/api/admin/uploade',
            // 自定义插入图片
            customInsert(res, insertFn) {
                // 因为自定义插入导致onSuccess与onFailed回调函数不起作用,自己手动处理
                // 先关闭等待的ElMessage
                // ElMessage.closeAll();
                // if (res.code === 200) {
                    // ElMessage.success({
                        //  message: "图片上传成功",
                    // });
                // } else {
                    // ElMessage.error({
                        // message: "图片上传失败，请重新尝试",
                                    grouping: true,
                    // });
                // }
                // 从 res 中找到 url alt href ，然后插入图片
                insertFn(res.data.url);
            },
            // 单个文件的最大体积限制，默认为 2M
            maximgSize: 15 * 1024 * 1024, // 15M
            // 最多可上传几个文件，默认为 100
            // maxNumberOfimgs: 10,
            // 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []
            allowedimgTypes: ['image/*'],
            // 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。
            meta: {
                // token: 'xxx',
                folderId: '',
            },
            // 将 meta 拼接到 url 参数中，默认 false
             metaWithUrl: false,
 
            // 自定义增加 http  header
            headers: {
                // Accept: 'text/x-json',
                // otherKey: 'xxx'
                // 注意：pc/Token是当前项目的token缓存，每个项目不一样
                Authorization: localStorage.getItem('pc/Token')
            },
 
            // 跨域是否传递 cookie ，默认为 false
            withCredentials: false,
 
            // 超时时间，默认为 10 秒
            timeout: 5 * 1000, //5 秒
        }
    },
}

// 工具栏配置
const toolbarConfig = {
    // toolbarKeys:'headerSelect','bold','my-menu-1'],
    excludeKeys: ['insertVideo','uploadVideo','group-video']
    // insertKeys: {
        //index: 0,
        //keys : 'my-menu-1',
    /}
}

// 编辑器回调函数
const handleCreated = (editor: any) => {
    console.log('created', editor)
    editorRef.value = editor // 记录 editor 实例，重要!
    //window.editor = editor // 临时测试使用，用完删除
}

// 及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    // 销毁，并移除 editor
    editor.destroy()
})

const getHtml = () => {
    const editor = editorRefvalue
    if (editor == null) return
    console.log(editor.getHtml())
}

</script>
 
<style>
 
</style>

通过v-html回显

将下方内容保存提交到后端接口后，其他地方，通过v-html回显<div y-html="problemScheme”></div>

弹窗内包裹富文本编辑器主动获取焦点失败

在弹窗的show事件内：editorRef.value.focus();

判断富文本内容是否为空

方法一：在VUE3项目

//判断富文本内容为空
const checkVal = (str:any) => {
    let num = 0,
    reg = /<p>(&nbsp; |&nbsp; \s+)+<\/p>|<p>(<br>)+<\/p>/g;
    while (num < str.length && str != "")
    {
        num++;
        let k = str.match(reg);
        if (k) {
            str = str.replace(k[0],"");
        }
    }
    return str == ""
}

 方法二：在VUE2项目

//判断富文本内容为空
const editorRules = (rule,value,callback) => {
    let newVal = value
        .replace(/<[^<p>]+>/g, '')  // 将所有<p>标签 replace ''
        .replace(/<[</p>$]+>/g, '')  // 将所有</p>标签 replace ''
        .replace(/&nbsp;/gi, '')  // 将所有 空格 replace ''
        .replace(/<[^<br/>]+>/g, '') // 将所有 换行符 replace ''
        .replace(/\s*/g,"")  // 将所有 空格 replace ''
    }
    if(!value){
        callback(new Error('请输入'))
    }else{
        if(newVal){
            callback()
        }else{
            return callback(new Error('请输入'))
        }
    }
}

 编辑器的事件

取消自动获取焦点

去除全屏

​​​​​​​