wangEditor基本使用

最新推荐文章于 2024-08-22 11:31:46 发布

Dxl丶

最新推荐文章于 2024-08-22 11:31:46 发布

阅读量511

点赞数

分类专栏：学习记录文章标签：前端 javascript html

本文链接：https://blog.csdn.net/Dxl_001/article/details/126284080

版权

学习记录专栏收录该内容

6 篇文章 0 订阅

订阅专栏

wangEditor上传图片基本使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
    /* 生产的html标签默认不带样式，需要自己自定义，如果想要默认样式可以参考官网，如下 */
    <link rel="stylesheet" href="https://www.wangeditor.com/demo/css/view.css"> 
</head>
    <style>
        #editor—wrapper {
        border: 1px solid #ccc;
        z-index: 100; /* 按需定义 */
        }
        #toolbar-container { border-bottom: 1px solid #ccc; }
        #editor-container { height: 500px; }
    </style>
<body>
	/* 回显html标签需要用此div包裹 */
	<div id="editor-content-view" class="editor-content-view">
	<blockquote>此标签在编辑器里为 “引用”样式，原生html不能解析，需自定义样式。</blockquote>
	</div>
    <div id="editor—wrapper">
        <div id="toolbar-container"><!-- 工具栏 --></div>
        <div id="editor-container"><!-- 编辑器 --></div>
    </div>

    <script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>
    <script>

        const { createEditor, createToolbar } = window.wangEditor

        const editorConfig = {
            placeholder: '输入内容...',
            onChange(editor) {
            // 获取输入的文本转化html标签
            const html = editor.getHtml()
            },
            MENU_CONF: {
              uploadImage: {}
            }
        }  

        editorConfig.MENU_CONF['uploadImage'] = {
            fieldName: 'img',
            server: 'http://localhost/upload',
            base64LimitSize: 5 * 1024 * 1024, // 10M 以下插入 base64
            // 自定义插入图片
            async customInsert(res, insertFn) {
                // res 即服务端的返回结果
                console.log(res);
                const url = res.data.url
                // 从 res 中找到 url alt href ，然后插图图片
                insertFn(url)
          },
          // 自定义增加 http  header, 其他携带参数见官网
          headers: {
              token: 'eyJhbGciOiJIUzI1NiJ...'
          },
        }
		// 设置代码高亮
        editorConfig.MENU_CONF['codeSelectLang'] = {
        // 代码语言
        codeLangs: [
            { text: 'CSS', value: 'css' },
            { text: 'HTML', value: 'html' },
            { text: 'XML', value: 'xml' },
            { text: 'JAVA', value: 'java' },
            // 其他
        ]
    }

        const editor = createEditor({
            selector: '#editor-container',
            html: "",
            config: editorConfig,
            mode: 'default', // or 'simple'
        })

        const toolbarConfig = {}
        const toolbar = createToolbar({
            editor,
            selector: '#toolbar-container',
            config: toolbarConfig,
            mode: 'default', // or 'simple'
        })
    </script>
</body>
</html>