summernote是一款轻巧、友好、易于集成、使用方便的富文本编辑器,,基于jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。
官网
Summernote 中文网 | Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。https://www.summernote/
github地址
GitHub - summernote/summernote: Super simple WYSIWYG editorSuper simple WYSIWYG editor. Contribute to summernote/summernote development by creating an account on GitHub.https://github/summernote/summernote
使用
1.引入js、css
<link th:href="http://cdnjs.cloudflare/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet">
<script th:src="http://cdnjs.cloudflare/ajax/libs/summernote/0.8.12/summernote.js"></script>
2.初始化富文本框
<div class="summernote"></div>
js代码
var preview = function(params){
layer.open({
title:"预览",
content: $(".note-editable").html(),
area: ['900px', '500px'],
});
}
var previewCallback = function(params){
//console.info(params);
}
var previewButton = function (context) {
var ui = $.summernote.ui;
// create button
var button = ui.button({
contents: '<i class="fa fa-search"/>', //按钮样式
tooltip: '预览',
click: function (params) {
preview(params);// 这里是我自己的点出时触发的事件
},
callback:function(params){
previewCallback(params);// 这里的回调函数会在加载页面的时候直接执行
}
});
return button.render();//按钮渲染
}
$('.summernote').summernote({
fontNames: ['Arial', 'Arial Black', 'Comic Sans MS', 'Courier New', 'Georgia', 'Georgia2', 'Merriweather'],
fontNamesIgnoreCheck:['Georgia'],
height : 400,
lang : 'zh-CN',
callbacks: {
onImageUpload: function (files) {
sendFile(files[0], this);
}
},
toolbar: [
['style', ['style']],
['font', ['bold', 'italic', 'underline', 'clear', 'strikethrough', 'subscript', 'superscript']],
['fontsize',['fontsize']],
['fontname', ['fontname']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']],
['insert', ['table', 'link', 'picture', 'video', 'hr']],
['view', ['fullscreen', 'codeview', 'help', 'preview']],
],
buttons: {
preview: previewButton//自已定义的按钮函数
},
});
$('.note-editable').css('font-family','Georgia2');
上传文件js代码
//上传文件
function sendFile(file, obj) {
var data = new FormData();
var ctx = [[@{/}]] + "summernote/content";
data.append("file", file);
$.ajax({
type: "POST",
url: ctx + "/file/upload",
data: data,
cache: false,
contentType: false,
processData: false,
dataType: 'json',
success: function(result) {
if (result.code == web_status.SUCCESS) {
$(obj).summernote('editor.insertImage', result.fileName, result.fileName);
} else {
$.modal.alertError(result.msg);
}
},
error: function(error) {
$.modal.alertWarning("图片上传失败。");
}
});
}
3.获取富文本编辑器里的值
var markupHTML = $('.summernote').summernote('code');
效果图
更多推荐
富文本编辑器summernote的使用
发布评论