编辑器组件

最新推荐文章于 2024-05-14 14:51:13 发布

粥里面放点糖

最新推荐文章于 2024-05-14 14:51:13 发布

阅读量432

点赞数 9

文章标签：编辑器 okhttp

本文链接：https://blog.csdn.net/2301_80137119/article/details/136396369

版权

本文介绍了如何在Vue项目中使用Wangeditor编辑器，包括自定义工具栏、异步加载内容、上传图片功能的配置，以及组件销毁时的正确销毁方法。

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

<script setup>
import '@wangeditor/editor/dist/css/style.css' // 引入 css

import { onBeforeUnmount, ref, shallowRef, onMounted } from 'vue'
import { Editor, Toolbar } from '@wangeditor/editor-for-vue'

// 定义模式
const mode = 'default'// 或 'simple'
// 编辑器实例，必须用 shallowRef
const editorRef = shallowRef()

// 内容 HTML
const valueHtml = ref()

// 模拟 ajax 异步获取内容
onMounted(() => {
    // setTimeout(() => {
    //     valueHtml.value = '<p>模拟 Ajax 异步设置内容</p>'
    // }, 1500)
})
// 自定义工具栏
const toolbarConfig = {
    //    toolbarKeys: [
    //     "headerSelect",  //正文
    //     "|", //分隔线
    //     "blockquote", //引号
    //     "|", //分隔线
    //     "bold",  //加粗
    //     "|", //分隔线
    //     "underline",  //下划线
    //     "|", //分隔线
    
    //  ]
}
// 初始化默认配置
const editorConfig = {
     placeholder: '请输入内容...' ,
     MENU_CONF: {}
    }
    editorConfig.MENU_CONF['uploadImage'] = {
        // 接口地址
    server:'/api/upload',
    // 上传名字和后端upload接口的file字段对应
    fieldName: 'file',
    headers: {
        Authorization: 'Bearer ' + sessionStorage.getItem("token"),
    },
    // 上传之前触发
    onBeforeUpload(file) { // TS 语法
        // onBeforeUpload(file) {    // JS 语法
        // file 选中的文件，格式如 { key: file }
        return file
        // 可以 return
        // 1. return file 或者 new 一个 file ，接下来将上传
        // 2. return false ，不上传这个 file
    },
    // 上传进度的回调函数
    onProgress(progress) {  // TS 语法
        // onProgress(progress) {       // JS 语法
        // progress 是 0-100 的数字
        console.log('progress', progress)
    },
    // 自定义插入图片
    customInsert(res, insertFn) {  // TS 语法
        // customInsert(res, insertFn) {                  // JS 语法
        // res 即服务端的返回结果
        let { url } = res
        // 从 res 中找到 url alt href ，然后插入图片
        insertFn(url)
    }
}
// 组件销毁时，也及时销毁编辑器
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()
})
// 用来处理逻辑
const handleCreated = (editor) => {
    editorRef.value = editor // 记录 editor 实例，重要！
    //   工具栏设置在menu-con
    console.log(editor.getConfig());
}





</script>   

<template>
    <div class="">
        <div style="border: 1px solid #ccc">
            <Toolbar style="border-bottom: 1px solid #ccc" :editor="editorRef" :defaultConfig="toolbarConfig"
                :mode="mode" />
            <Editor style="height: 500px; 
            overflow-y: hidden;" v-model="valueHtml" :defaultConfig="editorConfig" :mode="mode"
                @onCreated="handleCreated" />
        </div>
    </div>
</template>
<style lang="scss" scoped></style>

哪用放到那个组件中