wangeditor编辑器内容传至后台服务器存储

目录

html代码

js代码 

后台服务器java代码 

功能测试

---

html代码

<div style="width: 1510px;height: 300px; background:white;overflow-y: scroll;">
    <div id="toolbar"></div>
    <div id="editor1"></div>
</div>

<table style=";width: 1510px;">
    <tr>
        <td>
            <button οnclick="ff()"><h4>保存</h4></button>
        </td>
        <td>
            <form action="/upData">
                <button οnclick="form_get_value"><h4>提交</h4></button>
                <input id="form_up" style="display: none;" name="editorValue" type="text">
            </form>        </td>
    </tr>
</table>

js代码 

// var E=window.wangEditor;
const {createEditor,createToolbar}=window.wangEditor;
//
var get_value;
const editorConfig={
    MENU_CONF:{},
    withCredentials:true,
    autofocus:false,
    scroll:false,
    maxLength:10000,
    minLength:0,
    placeholder:'请输入内容:',
};
editorConfig.onMaxlength=function(editor){
};
editorConfig.onChange=(editor)=>{   //获取编辑器内的内容赋值给变量
    console.log('content',editor.children);
    console.log('html',editor.getHtml());
    get_value=editor.getHtml();
};
//
editorConfig.MENU_CONF['uploadImage']={
    base64LimitSize:8*1024,
    fieldName:'image',
    server:'http://ip:8888/upImage',
    maxFileSize: 6 * 1024 * 1024, //
    maxNumberOfFiles: 200,
    allowedFileTypes: ['image/*'],
    timeout: 20 * 1000, // 5 秒
};
const toolbarConfig={
};
toolbarConfig.excludeKeys=[
    'headerSelect',
    'italic',
    'group-more-style'
];

const editor=createEditor({
    selector:"#editor1",
    config:editorConfig,
    mode:'simple',//simple
});
editor.setHtml('');//
const toolbar=createToolbar({
    editor,
    selector:"#toolbar",
    config: toolbarConfig,
    mode: 'simple'
});
function ff() {  //将内容赋值给form里input标签
    // editor.clear();
    var the_value=document.getElementById('form_up');
    the_value.value=get_value;

}
function form_get_value() {//查看input是否有内容，若没有则返回不提交表单
    var the_value=document.getElementById('form_up');
    if (the_value.value=null||the_value.value==""){
        return;
    }
}

后台服务器java代码 

@RequestMapping(value = "/upData")
public String upData(String editorValue){
    System.out.println(editorValue);
    return "/wangeditor";
}          //代码功能只是对前端传递过来的内容进行打印输出并未存入数据库

 功能测试

查看后台服务器

本章至此结束，祝各位好运！