layuiadmin框架集成wangedit编辑器上传图片配置

引入cssjs

在线jq引用参考

js/jquery监听键盘事件,附上jq在线引用地址

默笙

• 22年12月15日
• 喜欢：0
• 浏览：63

<link href="https://unpkg.com/@wangeditor/editor@latest/dist/css/style.css" rel="stylesheet">
<script src="__admin__/layuiadmin/jquery-3.6.0.min.js"></script>
<script src="https://unpkg.com/@wangeditor/editor@latest/dist/index.js"></script>

编辑器配置

const {createEditor,createToolbar}=window.wangEditor

        const editorConfig={
            placeholder: '在这里写内容哦',
            MENU_CONF: {},
            onChange(editor) {
                const html=editor.getHtml()
                console.log('editor content',html)
                // 也可以同步到 <textarea>
            }
        }
        console.log(editorConfig);
        editorConfig.MENU_CONF['uploadImage']={
            server: 'exitupload',//这里就是配置你上传的接口地址
        }
        const editor=createEditor({
            selector: '#editor-container',
            html: '<p><br></p>',
            config: editorConfig,
            mode: 'default', // or 'simple'
        })


        const toolbarConfig={}

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

 Thinkphp后台上传函数

public function exitupload()
    {
        $file = request()->file('wangeditor-uploaded-image');

        $info = $file->validate(['ext' => 'jpg,png,jpg,JPG,JPEG'])->move('./uploads');
        if ($info) {
            $txtpath =  '/uploads/' . date('Ymd') . '/' . $info->getFilename();

            $data = [
                "errno" => 0,
                "msg" => "",
                "data" => [
                    "url" => $txtpath,
                ]
            ];
            echo json_encode($data, true);
            die;
        } else {
            // 上传失败获取错误信息
            echo $file->getError();
        }
    }

预览