当前位置：首页 > news >正文

前端添加富文本/Web 富文本编辑器wangeditor

news 2025/8/22 5:01:06

官网wangEditor

需要引入两个文件

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

前端代码：

<div id="editor—wrapper"><div id="toolbar-container"><!-- 工具栏 --></div><div id="editor-container" style="height: 300px;"><!-- 编辑器 --></div>
</div>

JQ代码

    // 富文本const {createEditor,createToolbar} = window.wangEditorconst editorConfig = {MENU_CONF: {},placeholder: '请输入',onChange(editor) {// 富文本输入的内容const html = editor.getHtml();console.log(html, '内容');},}editorConfig.MENU_CONF['uploadImage'] = {server: 'http://xxxxxxx.cn/gzh/uploadFile',maxFileSize: 10 * 1024 * 1024, // 10MfieldName: 'img',// 选择文件时的类型限制，默认为 ['image/*'] 。如不想限制，则设置为 []allowedFileTypes: ['image/*'],// 自定义上传参数，例如传递验证的 token 等。参数会被添加到 formData 中，一起上传到服务端。meta: {image_class_id: '2',file_type: '1'},// 自定义增加 http  header// headers: {//     Accept: 'text/x-json',//     otherKey: 'xxx'// },// 上传进度的回调函数onProgress(progress) { // JS 语法// progress 是 0-100 的数字console.log('progress', progress)},// // 单个文件上传成功之后// onSuccess(file, res) { // JS 语法//     console.log(`${file.name} 上传成功`, res)// },// 单个文件上传失败onFailed(file, res) { // JS 语法console.log(`${file.name} 上传失败`, res)},// 上传错误，或者触发 timeout 超时onError(file, err, res) { // JS 语法console.log(`${file.name} 上传出错`, err, res)},// 自定义插入图片customInsert(res, insertFn) { // JS 语法// res 即服务端的返回结果let url = res.data.urllet alt = res.data.namelet href = res.data.url// 从 res 中找到 url alt href ，然后插入图片insertFn(url, alt, href)},}const editor = createEditor({selector: '#editor-container',html: '<p><br></p>',config: editorConfig,mode: 'default', // or 'simple'})const toolbarConfig = {}toolbarConfig.excludeKeys = ['codeBlock','group-video' // 排除菜单组，写菜单组 key 的值即可]const toolbar = createToolbar({editor,selector: '#toolbar-container',config: toolbarConfig,mode: 'default', // or 'simple'})// 富文本 end

效果：