MarkDownエディタを参照してください。
8454 ワード
ダウンロードプラグイン:http://pandao.github.io/editor.md/
ダウンロードしたプラグインを解凍してプロジェクトにコピーします。
ダウンロードしたプラグインを解凍してプロジェクトにコピーします。
Insert title here
$(function(){
var testEditor = editormd({
id: "test-editormd",
height: 640,
width: "100%",
placeholder : "Markdown ",
path: "${pageContext.request.contextPath}/res/editor-md-master/lib/",
toolbarIcons: function () {
// Or return editormd.toolbarModes[name]; // full, simple, mini
// Using "||" set icons align right.
return ["undo", "redo", "|", "watch", "fullscreen", "preview"]
},
//toolbar : false, //
codeFold: true,
searchReplace: true,
saveHTMLToTextarea: true, // HTML Textarea
htmlDecode: "style,script,iframe|on*", // HTML ， ，
emoji: true,
taskList: true,
tocm: true, // Using [TOCM]
tex: true, // TeX ，
//previewCodeHighlight : false, // ，
flowChart: true, // Sea.js Raphael.js ， Raphael.js ，Editor.md Sea.js ；
sequenceDiagram: true, //
//dialogLockScreen : false, // ， ， true
//dialogShowMask : false, // ， ， true
//dialogDraggable : false, // ， ， true
//dialogMaskOpacity : 0.4, // ， ， 0.1
//dialogMaskBgColor : "#000", // ， ， #fff
imageUpload: true,
imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],
imageUploadURL: "{:url('api/uploader/uploadEditorImg?pic_type=10')}",
onload: function () {
this.on('paste', function () {
console.log(1);
});
},
onpreviewing : function() {
this.watch();
console.log("onpreviewing =>", this, this.id, this.settings);
// on previewing you can custom css .editormd-preview-active
},
onpreviewed : function() {
console.log("onpreviewed =>", this, this.id, this.settings);
this.unwatch();
}
});
/**
*
*/
$("#test-editormd").on('paste', function (ev) {
var data = ev.clipboardData;
var items = (event.clipboardData || event.originalEvent.clipboardData).items;
for (var index in items) {
var item = items[index];
if (item.kind === 'file') {
var blob = item.getAsFile();
var reader = new FileReader();
reader.onload = function (event) {
var base64 = event.target.result;
console.log(base64);
//ajax
$.ajax({
url : "${pageContext.request.contextPath}/topic/uploadimg",
type : 'post',
data : {'base':base64},
async : true,
dataType: 'json',
success : function (res) {
if (res.code === 1) {
//
testEditor.insertValue("
![" + "image.png" + "](${pageContext.request.contextPath}/" + res.path + ")");
}
},
error : function(){
alert(' ');
}
});
}; // data url!
var url = reader.readAsDataURL(blob);
}
}
});
})
package com.neuedu.util;
import java.io.FileOutputStream;
import java.io.OutputStream;
import sun.misc.BASE64Decoder;
public class picEncode {
/**
* @Description: base64
* @Author:
* @CreateTime:
* @param imgStr
* base64
* @param path
* -
* @return
*/
public static boolean generateImage(String imgStr, String path) {
if (imgStr == null)
return false;
BASE64Decoder decoder = new BASE64Decoder();
try {
//
byte[] b = decoder.decodeBuffer(imgStr);
//
for (int i = 0; i < b.length; ++i) {
if (b[i] < 0) {
b[i] += 256;
}
}
OutputStream out = new FileOutputStream(path);
out.write(b);
out.flush();
out.close();
return true;
} catch (Exception e) {
return false;
}
}
}
package com.neuedu.util;
public class imgUploadBackData {
private String path;
private int code;
public int getCode() {
return code;
}
public void setCode(int code) {
this.code = code;
}
public String getPath() {
return path;
}
public void setPath(String path) {
this.path = path;
}
}
package com.neuedu.servlet;
import java.io.File;
import java.io.IOException;
import java.util.UUID;
import javax.servlet.ServletException;
import javax.servlet.annotation.MultipartConfig;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import com.neuedu.util.imgUploadBackData;
import com.neuedu.util.picEncode;
@WebServlet("/topic/uploadimg")
public class UploadImgServlet extends HttpServlet {
private static final long serialVersionUID = 1L;
protected void doGet(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
doPost(request, response);
}
protected void doPost(HttpServletRequest request, HttpServletResponse response) throws ServletException, IOException {
String strTemp = request.getParameter("base");
System.out.println(strTemp);
strTemp = strTemp.replace("data:image/png;base64,","");
// String strPath = this.getClass().getClassLoader().getResource("/../../upload").getPath();
String strPath = request.getServletContext().getRealPath(File.separator+"upload");
String strUUid = UUID.randomUUID().toString();
System.out.println(strPath);
File file = new File(strPath);
if(!file.exists())
{
file.mkdirs();
}
String strSavePath = strPath+File.separator+strUUid+".jpg";
picEncode.generateImage(strTemp,strSavePath);
imgUploadBackData iubd = new imgUploadBackData();
iubd.setPath("upload"+File.separator+strUUid+".jpg");
iubd.setCode(1);
String strJson = JSON.toJSONString(iubd);
response.getWriter().println(strJson);
}
}