【学习总结】wangeditor插件使用

最新推荐文章于 2024-09-13 07:18:36 发布

快学点111

最新推荐文章于 2024-09-13 07:18:36 发布

阅读量1.6k

点赞数

文章标签：学习

本文链接：https://blog.csdn.net/leporc/article/details/127412271

版权

本文介绍了如何在项目中集成WangEditor，并对比了它与Fullcalendar插件的使用体验。通过详细步骤展示了WangEditor的基本配置和自定义图片上传功能，同时结合Element-Plus实现了点击图片弹出预览的功能。文章提供了关键代码片段以供参考。

摘要由CSDN通过智能技术生成

之前的项目中就因为这个插件踩坑了，现在正好就用上这个插件了，相比最近使用的fullcalendar插件来说，wangeditor插件好用太多了（"@wangeditor/editor": "^5.0.0"）

首先放上官网地址：点击跳转

基本的使用就按照官网的步骤就做出来了，而且文档写的真的很细致，有问题找找文档都能解决

这里用的编辑器配置方法和文档有点区别(从项目扣下来的，复制粘贴不一定能直接用)

<template>
    <div>
        <div>
            <!-- 工具栏 -->
            <Toolbar :editor="editorRef":defaultConfig="toolbarConfig":mode="mode" />
            <!-- 编辑器 -->
            <Editor :defaultConfig="editorConfig" v-model="defaultHtml" 
                :mode="mode" @onCreated="handleCreated" />
        </div>
    </div>
</template>

<script setup lang="ts">
    import { Editor, Toolbar } from '@wangeditor/editor-for-vue';

    const state = reactive({
    toolbarConfig: {},
    editorConfig: {
        placeholder: '请输入内容...',
        scroll: false,//实现回车自动增加高度
        MENU_CONF: {},
    },
    defaultHtml: props.modelValue,
    mode: 'default',
    editer: true,
});

const { toolbarConfig, editorConfig, defaultHtml, mode } = toRefs(state);
const handleCreated = (editor: any) => {
    editorRef.value = editor; // 记录 editor 实例
};

</script>

//引入编辑器css
<style src="@wangeditor/editor/dist/css/style.css"></style>

配置上传图片的服务器：

 editorConfig: {
        scroll: false,//实现回车自动增加高度，给编辑器设置min-height
        MENU_CONF: {
            uploadImage: {
                // 自定义图片上传
                async customUpload(file: any, insertFn: any) {
                    //返回数据必须有url用来显示图片
                    自己的图片上传方法(file).then(response => {
                        const url = response.data.url;
                        insertFn(url);//将url插入到编辑器中
                    }).catch((err: any) => {
                        console.log("img upload fail:", err)
                    });
                }
            },
        },

第二个需求：需要实现上传图片之后点击图片可以弹出图片预览，这里是结合了"element-plus": "^2.2.16",

参考了大师兄 element-plus设置点击按钮预览图片（非点击el-image图片本身）代码 -这篇文章实现的

(核心代码，从项目中扣下来的，不全)

<template>
    <el-image-viewer v-if="dialogVisible" :initial-index="whichImg" 
        :url-list="dialogImageUrl" @close="dialogVisible = false" :infinite="false" />
    <div class="wangeditorClass" @click="isFocus">
</template>

<script setup lang="ts">

let dialogVisible = ref(false)
let dialogImageUrl = <any>ref([])
let whichImg = ref(0)

const operation = ()=> {
        //获取编辑器中的dom元素，editorRef.value中是编辑器
        let doms = editorRef.value.getEditableContainer()
        //获取dom元素中的img元素
        let imgs = doms.getElementsByTagName('img')
        if (imgs.length != 0) {
            dialogImageUrl.value = []
            for (let i = 0; i < imgs.length; i++) {
                dialogImageUrl.value.push(imgs[i].currentSrc)//保存用于预览的url
                //给图片增加点击事件
                imgs[i].onclick = () => {
                    if (editer.value == false) {
                        whichImg.value = i //预览哪张图片
                        dialogVisible.value = true
                    }
                };
            }
        }

}
</srcipt>

实现点击上传的图片进行预览