富文本编辑器summernote的使用

summernote是一款轻巧、友好、易于集成、使用方便的富文本编辑器，,基于jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。

官网

Summernote 中文网 | Summernote 是一个简单灵活的所见即所得的 HTML 在线编辑器,基于 jQuery 和 Bootstrap 构建,支持快捷键操作,提供大量可定制的选项。https://www.summernote.cn/

github地址

GitHub - summernote/summernote: Super simple WYSIWYG editorSuper simple WYSIWYG editor. Contribute to summernote/summernote development by creating an account on GitHub.https://github.com/summernote/summernote

使用

1.引入js、css

  <link th:href="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.12/summernote.css" rel="stylesheet"><script th:src="http://cdnjs.cloudflare.com/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 buttonvar 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的使用相关推荐

BootStrap富文本编辑器Summernote
BootStrap富文本编辑器Summernote https://blog.csdn.net/qq_40205116/article/details/94287053
基于jQuery的富文本编辑器summernote插件的使用教程
基于jQuery的富文本编辑器summernote插件的使用教程基于jQuery的富文本编辑器summernote插件的使用教程一:最近项目中遇到使用富文本编辑器的功能, JQuery的富文本编辑 ...
富文本编辑器summernote
版权声明本文原创作者:谷哥的小弟作者博客地址:http://blog.csdn.net/lfdfhl summernote概述 summernote是一款轻巧.友好.易于集成.使用方便的富文本编辑 ...
ODOO10 富文本编辑器SummerNote输入联想短句，输入快捷短语
odoo10富文本编辑器是在web_editor模块中,使用的第三方编辑器summernote,其版本较老,应该是0.6版本的. 老版本summernote需要加载扩展js才有[输入联想]的功能,新版 ...
富文本编辑器summernote的基本使用
summernote比较突出的优点就是能保持复制过来的东西的原有样式,并且比较流畅. 官方文档地址:https://summernote.org/getting-started 我是用到cdn引入 & ...
spring boot2.0整合富文本编辑器summernote
summernote对上传图片,以及对图片大小细节,删除图片移除服务器资源等处理的比较完美. 整合过程,summernote的官网https://summernote.org/getting-star ...
summernote 编辑html,富文本编辑器summernote使用
先看看summernote是个什么东西! 它有什么好处? 1.界面优雅:基于bootstrap的样式,个人感觉比ckeditor要好看: 2.插入图片方便:可以通过Ctrl+V的方式插入粘贴板中的图片 ...
基于bootstrap的富文本编辑器summernote的用法
初次用到这个工具,在取值这步就掉坑里了,很多文章写的取值是 var content = $('#summernote').summernote('code');我只能说我是半天取不了值,还以为是取到的 ...
【实践】简洁大方的summernote 富文本编辑器插件的用发——导入篇
首先在这里吐槽一下,网上不少教程实在太坑人,错误的代码也敢发上来真的是误人子弟,这篇文章是我踩了无数个坑写上来的,可能也会有不足之处所以自己以后可能也会进行更正. 好吧,先说说最近的情况,忙着学校的期 ...
编辑器图片上传 linux,summernote 富文本编辑器上传本地图片
jQuery version: 1.12.4 Bootstrap version: 3.3.7 summernote 是基于jQuery 和 Bootstrap 的轻量级富文本编辑器所以在使用sum ...

富文本编辑器summernote的使用

官网

github地址

使用

1.引入js、css

2.初始化富文本框

效果图

富文本编辑器summernote的使用相关推荐

最新文章

热门文章