【TinyMCE】TinyMCE编辑器的⼊门，提交⽂字，粘贴图⽚到
后台
最近参考博客园写博客的编辑器（TinyMCE），⾃⼰也捣⿎了⼀下TinyMCE。
⼀篇博客储存在数据中，储存的是HTML代码<p>test</p><img src="img/1.jpg"/>这样的形式，图⽚上传到另外的⽂件夹，⽽不是存⼊数据库。
在TinyMCE中，有强⼤的paste插件。配置好后台之后，粘贴图⽚到编辑器，图⽚就会⾃动上传（参考博客园的粘贴图⽚）。
参考的链接：
前端
我使⽤的TinyMCE4，已经有TinyMCE5了，但是注册⼀系列的有点⿇烦。
⽰例代码（属性介绍）：
在下⾯的代码中，tinymce.init为初始化编辑器。
lector:‘textarea’ 为将页⾯中的<textarea></textarea>变为编辑区域
width和height 为编辑器的宽度和⾼度于丹讲座
plugins 为编辑器使⽤的插件，image为图⽚插件-⽀持添加外部图⽚的链接，link为⽀持添加超链接，code为⽀持添加代码块，paste为⽀持粘贴图⽚等，lists为添加列表，table为添加表格
custom_undo_redo_levels 能撤销的次数，不限制可能会消耗过多的内存
paste_data_image 启⽤粘贴图⽚功能
convert_urls：fal 禁⽤⾃动转化URL，启⽤的话，保存到数据库的时候，会⾃动将⽂件路径处理
paste_preprocess() 函数为粘贴图⽚时，执⾏的处理⽅法（将该图⽚替换为⼀个有ID的元素，元素使⽤全局计数器，并使⽤异步⽅法上传到指定的路径，本例中为/uploadimg。上传之后会返回⼀个访问图⽚的路径，替换原先的src属性）
<!DOCTYPE html>
<html lang="en">
<head>
<meta chart="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
喜欢下<title>编辑博客页⾯</title>
</head>
<body>
<script src="/4/tinymce.min.js"></script>
<script src="js/jquery.min.js"></script>
<script>
globalcounter = 1;家庭经济情况
tinymce.init({
lector: 'textarea',
width: 1000,
height: 450,
plugins: 'image link code paste lists table',
屈打成招的意思custom_undo_redo_levels: 10,
paste_data_images: true,
天灵灵paste_preprocess: function(plugin, args) {
console.t);
var xhr = new XMLHttpRequest();
if (adyState == 4 && this.status == 200){
spon);
}
};
xhr.open('GET', t.split('"')[3]);
xhr.nd();
function upload(BlobFile){
var x = new XMLHttpRequest();
if( adyState == 4 && this.status == 200 ){
/* 返回的访问链接 */
data = sponText;
console.log('respon data: ' + data);
id = parInt(globalcounter++);
/* 此处为获取ID为mce_1_ifr的iframe，再获取其下ID为pastes_image_x 的图⽚，然后更改图⽚的链接。不同版本下iframe的ID可能会不同，注意观察 */
}
};
/
* 使⽤post⽅法，上传的API为localhost:8080/uploadimg */
眉相
x.open('POST', '/uploadimg');
x.nd(BlobFile);
}
}
});
</script>
<form method="post" action="/uploadblog">
<textarea id="blog-content" name="blog-content" placeholder="在此处输⼊..."></textarea>
<button id="blog-save-button">保存</button>
</form>
</body>
</html>
后端
粘贴完了图⽚之后，提交博客到后台。在form中添加⼀个button，给textarea⼀个name，点击button就会⾃动提交。后台的接收：
挚友是指什么的朋友@RequestMapping(value = "/uploadblog", method = RequestMethod.POST)
public String uploadblog(@RequestParam("blog-content") String blogContent) {
logger.info("博客的内容为："+ blogContent);
// 调⽤Service
// 存⼊数据库
中国古代名人// 回显
// uploadService.uploadblog(blog);
return "index";
}
源代码参考：
