富文本编辑器summernote的使用

        summernote是一款轻巧、友好、易于集成、使用方便的富文本编辑器&＃xff0c;,基于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

     2.初始化富文本框

   js代码

var preview &＃61; function(params){layer.open({title:"预览",content: $(".note-editable").html(),area: [&＃39;900px&＃39;, &＃39;500px&＃39;],});}var previewCallback &＃61; function(params){//console.info(params);}var previewButton &＃61; function (context) {var ui &＃61; $.summernote.ui;// create buttonvar button &＃61; ui.button({contents: &＃39;&＃39;, //按钮样式tooltip: &＃39;预览&＃39;,click: function (params) {preview(params);// 这里是我自己的点出时触发的事件},callback:function(params){previewCallback(params);// 这里的回调函数会在加载页面的时候直接执行}});return button.render();//按钮渲染}$(&＃39;.summernote&＃39;).summernote({fontNames: [&＃39;Arial&＃39;, &＃39;Arial Black&＃39;, &＃39;Comic Sans MS&＃39;, &＃39;Courier New&＃39;, &＃39;Georgia&＃39;, &＃39;Georgia2&＃39;, &＃39;Merriweather&＃39;],fontNamesIgnoreCheck:[&＃39;Georgia&＃39;],height : 400,lang : &＃39;zh-CN&＃39;,callbacks: {onImageUpload: function (files) {sendFile(files[0], this);}},toolbar: [[&＃39;style&＃39;, [&＃39;style&＃39;]],[&＃39;font&＃39;, [&＃39;bold&＃39;, &＃39;italic&＃39;, &＃39;underline&＃39;, &＃39;clear&＃39;, &＃39;strikethrough&＃39;, &＃39;subscript&＃39;, &＃39;superscript&＃39;]],[&＃39;fontsize&＃39;,[&＃39;fontsize&＃39;]],[&＃39;fontname&＃39;, [&＃39;fontname&＃39;]],[&＃39;color&＃39;, [&＃39;color&＃39;]],[&＃39;para&＃39;, [&＃39;ul&＃39;, &＃39;ol&＃39;, &＃39;paragraph&＃39;]],[&＃39;height&＃39;, [&＃39;height&＃39;]],[&＃39;insert&＃39;, [&＃39;table&＃39;, &＃39;link&＃39;, &＃39;picture&＃39;, &＃39;video&＃39;, &＃39;hr&＃39;]],[&＃39;view&＃39;, [&＃39;fullscreen&＃39;, &＃39;codeview&＃39;, &＃39;help&＃39;, &＃39;preview&＃39;]],],buttons: {preview: previewButton//自已定义的按钮函数},});$(&＃39;.note-editable&＃39;).css(&＃39;font-family&＃39;,&＃39;Georgia2&＃39;);

上传文件js代码

//上传文件
function sendFile(file, obj) {var data &＃61; new FormData();var ctx &＃61; [[&＃64;{/}]] &＃43; "summernote/content";data.append("file", file);$.ajax({type: "POST",url: ctx &＃43; "/file/upload",data: data,cache: false,contentType: false,processData: false,dataType: &＃39;json&＃39;,success: function(result) {if (result.code &＃61;&＃61; web_status.SUCCESS) {$(obj).summernote(&＃39;editor.insertImage&＃39;, result.fileName, result.fileName);} else {$.modal.alertError(result.msg);}},error: function(error) {$.modal.alertWarning("图片上传失败。");}});
}

3.获取富文本编辑器里的值

var markupHTML &＃61; $(&＃39;.summernote&＃39;).summernote(&＃39;code&＃39;);

效果图