小巧强大的Web富文本编辑器summernote使用分享

summernote是一款小巧强大的web富文本编辑器,支持代码高亮、图片上传、视频插入等功能。

之前一直使用的是百度的UEditor,这是一款非常强大的富文本编辑器,不过也相对比较臃肿,自从发现了summernote之后,小巧不失强大,简直爱不释手。

在我博客的搭建的过程中使用了summernote,搭配上另一款同样小巧强大的Markdown编辑器mditor,满足博客文章内容编辑的基本需求。

所以我将这款web富文本编辑器 summernote分享给大家。

summernote和mditor的下载地址:

summernote官网地址:https://summernote.org

summernote Github地址:https://github.com/summernote/summernote/

mditor官网地址:http://mditor.com/

mditor Github地址:https://github.com/Houfeng/mditor

使用步骤:

1.根据官方使用文档,引入如下的js 和 css文件:

<!-- include libraries(jQuery, bootstrap) -->
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>

<!-- include summernote css/js-->
<link href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.9/summernote.js"></script>


2.summernote初始化配置代码如下:

html中加上容器:

<div class="summernote">

</div>

js中初始化summernote插件:

DATA.htmlEditor = $('.summernote').summernote({
lang: 'zh-CN',
height: 340,
placeholder: '写点儿什么吧...',
//上传图片的接口
callbacks:{
onImageUpload: function(files) {
var data=new FormData();
data.append('file',files[0]);
App.blockUI();
$.ajax({
url: '/file/upload', //上传图片请求的路径
method: 'POST', //方法
data:data, //数据
processData: false, //告诉jQuery不要加工数据
dataType:'json',
contentType: false, //<code class="javascript comments"> 告诉jQuery,在request head里不要设置Content-Type
success: function(result) {
App.unblockUI();
if(result && result.code == '0000'){
var url = result.data;
console.log('url =>' + url);
DATA.htmlEditor.summernote('insertImage', url);
} else {
layer.alert(result.message || '图片上传失败');
}
}
});
}
}
});

通过callbacks中的onImageUpload配置图片上传按钮点击后的响应事件,然后写上调用后台图片上传接口的ajax请求,就可以通过简单的代码实现图片上传插入功能了。

至于summernote视频插入则不需要额外的配置,点击初始化后的视频上传按钮,输入视频网站播放页面的url就可以将播放器内嵌到富文本内容中。

summernote支持如下的视频网站:YouTube, Vimeo, Vine, Instagram, DailyMotion or Youku。


3. summernote初始化后的页面如下:

后记:

第一次写博客系统,很多地方没有优化好,比较灾难性的是没有加上文章本地草稿功能,在写本文的时候不小心返回到上一页导致内容丢失。

同时在写文章的时候也发现图片上传后无法管理的问题。

因此写完这篇分享后,也有了后期加上本地localstorage存储文章草稿,管理上传附件的两个功能想法。

虽然博客系统问题多多,不过我相信可以通过不断改进博客系统,不断撰写有价值的文章,来完善我的nest小窝^_^。