editorEd 编辑器 基础搭建 以及图片上传 以及回显

editorEd 编辑器 基础搭建 以及图片上传 以及回显

基础搭建

https://pandao.github.io/editor.md/ 去这个网址下载最新版的版本。

下载下来之后 之后就是

这个样子 。把这所有的文件夹 放在 你的项目中

这个时候 你就完成了 第一步
第二部 引入相应的js

主要引入这两个文件 js 和 css
然后再要引入的页面加上js

$(function() {
    var editor = editormd("Editor", {
        width: "100%",
        height: 640,
        emoji:true,
        syncScrolling: "single",
        saveHTMLToTextarea : true,
        path: ctx+"../../editor/lib/",
        /**上传图片相关配置如下*/
        imageUpload : true,  //开启图片上传
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL :"http://127.0.0.1/filePath/sigleUploadFile", //上传的路径，就是mvc的controller路径
        onload: function () {
            console.log('onload', this);
        },
    });
});

然后再html 页面上 加上

 <div id="Editor">
                        <textarea name="remark"></textarea>
                    </div>

这上面的id 要和 上面js 中的要一致。
这样就引入基本的操作
如果遇到错误 比如说

这样 不要慌 看见那个 “jquery.validata.min.js” 没 把他更换掉 更换成最新版本的js （我找了两天 ）就行了 。

上传图片

  /**上传图片相关配置如下*/
        imageUpload : true,  //开启图片上传
        imageFormats : ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
        imageUploadURL :"http://127.0.0.1/filePath/sigleUploadFile", //上传的路径，就是mvc的controller路径
        onload: function () {
            console.log('onload', this);
        },

前台页面 这个地方就行 上传图片的 包括 上传接口的路径 以及反馈的信息。后台 返回 要更换成
valueMap.put(“success”, 1);
valueMap.put(“message”, “上传成功”);
valueMap.put(“url”, relativePath);
第一个 状态 第二个反馈信息 第三个 文件的路径。这三个缺一不可 ，。加上去就行了
返回成json格式 JSONObject.parseObject(JSONArray.toJSONString(valueMap)); 比如说这样。
就可以 。想要demo的 留言 我可以整理一下给你。（暂时没写）
哈哈哈哈 就这样。