Summernote使用入门

Create.cshtml

@model SN.Models.ProductModel@{ViewBag.Title = "产品立项";Layout = "../Shared/_LayoutAdminLTE.cshtml";
}<head><!--summernote--><link href="~/Content/summernote/summernote.css" rel="stylesheet" /><script src="~/Content/summernote/summernote.js"></script><script src="~/Content/summernote/summernote-zh-CN.js"></script>
</head>@using (Html.BeginForm())
{@Html.AntiForgeryToken()@Html.ValidationSummary(true, "", new { @class = "text-danger" })<!-- 内容标题 --><section class="content-header"><h1>创建新产品<small>产品管理</small></h1><!--  导航地图  --><ol class="breadcrumb"><li><a href="../Product/Index"><i class="fa fa-dashboard"></i> Home</a></li><li class="active">产品管理</li></ol></section><!-- 内容Panel --><section class="content"><!-- Default box --><div class="box">@*<div class="box-header with-border"><h3 class="box-title">创建新产品</h3></div>*@<div class="box-body"><!--  这是写入要展示的内容  --><div class="form-group">@Html.EditorFor(model => model.ProductName, new { htmlAttributes = new { @class = "form-control", placeholder = "请输入产品名称" } })@Html.ValidationMessageFor(model => model.ProductName, "", new { @class = "text-danger" })</div>@Html.HiddenFor(model => model.Productlogic)@*定义一个隐藏表用单于接收summernote数据*@<div class="form-group"><div id="summernote" placeholder="请输入产品逻辑说明"></div>@Html.ValidationMessageFor(model => model.Productlogic, "", new { @class = "text-danger" })</div><div class="form-group">@Html.EditorFor(model => model.Interactive, new { htmlAttributes = new { @class = "form-control", placeholder = "请输入交互需求" } })@Html.ValidationMessageFor(model => model.Interactive, "", new { @class = "text-danger" })</div><div class="form-group">@Html.EditorFor(model => model.DateRep, new { htmlAttributes = new { @class = "form-control", placeholder = "请输入数据需求" } })@Html.ValidationMessageFor(model => model.DateRep, "", new { @class = "text-danger" })</div><div class="form-group">@Html.EditorFor(model => model.OtherRep, new { htmlAttributes = new { @class = "form-control", placeholder = "请输入非功能需求" } })@Html.ValidationMessageFor(model => model.OtherRep, "", new { @class = "text-danger" })</div><div class="btn-group pull-right"><button type="submit" class="btn btn-primary" id="btnLogin">保存</button><button type="button" class="btn btn-default" id="btnRegister">取消</button></div><!--  这是写入要展示的内容  --></div><!-- /.box-body --></div><!-- /.box --></section>}@section scripts{<!-- 内部javascript --><script>$(document).ready(function () {var placeholder = $("#summernote").attr("placeholder") || '';//设置输入提示var url = $("#summernote").attr("action") || '';//设置上传图片的url$("#summernote").summernote({lang: 'zh-CN',placeholder: placeholder,minHeight: 300,maxHeight: 800,dialogsFade: true,// 设置滑动效果Add fade effect on dialogsdialogsInBody: true,// 设置窗口显示位置Dialogs can be placed in body, not indisableDragAndDrop: false,//设置拖拽callbacks: {onImageUpload: function (files) {$(files).each(function () {var file = this;var data = new FormData();data.append("file", file);//ajax上传图片$.ajax({url: url,type: "post",data: data,dataType: "json",cache: false,contentType: false,processData: false,success: function (response) {var jsonObj = JSON.parse(response);  // JSON.parse(); 方法var jsonObj = JSON.parse(response);  // JSON.parse(); 方法var imgNode = document.createElement('img');imgNode.setAttribute('src', jsonObj.result);$("#summernote").summernote('insertNode', imgNode);},error: function (response) {}});});}}});//初始化summernote的值var encodevalue = $("#Productlogic").val();//var decodevalue = htmlDecode(encodevalue);$('#summernote').summernote('code', encodevalue);});//设置表单数值$("form").submit(function (e) {var makrup = $("#summernote").summernote('code');//将文档编辑器的内容赋给要存储的属性（如Productlogic）$("#Productlogic").val(makrup);});</script>
}

summernote-zh-CN.js

(function ($) {$.extend($.summernote.lang, {'zh-CN': {font: {bold: '粗体',italic: '斜体',underline: '下划线',clear: '清除格式',height: '行高',name: '字体',strikethrough: '删除线',subscript: '下标',superscript: '上标',size: '字号'},image: {image: '图片',insert: '插入图片',resizeFull: '缩放至 100%',resizeHalf: '缩放至 50%',resizeQuarter: '缩放至 25%',floatLeft: '靠左浮动',floatRight: '靠右浮动',floatNone: '取消浮动',shapeRounded: '形状: 圆角',shapeCircle: '形状: 圆',shapeThumbnail: '形状: 缩略图',shapeNone: '形状: 无',dragImageHere: '将图片拖拽至此处',selectFromFiles: '从本地上传',maximumFileSize: '文件大小最大值',maximumFileSizeError: '文件大小超出最大值。',url: '图片地址',remove: '移除图片'},video: {video: '视频',videoLink: '视频链接',insert: '插入视频',url: '视频地址',providers: '(优酷, Instagram, DailyMotion, Youtube等)'},link: {link: '链接',insert: '插入链接',unlink: '去除链接',edit: '编辑链接',textToDisplay: '显示文本',url: '链接地址',openInNewWindow: '在新窗口打开'},table: {table: '表格'},hr: {insert: '水平线'},style: {style: '样式',p: '普通',blockquote: '引用',pre: '代码',h1: '标题 1',h2: '标题 2',h3: '标题 3',h4: '标题 4',h5: '标题 5',h6: '标题 6'},lists: {unordered: '无序列表',ordered: '有序列表'},options: {help: '帮助',fullscreen: '全屏',codeview: '源代码'},paragraph: {paragraph: '段落',outdent: '减少缩进',indent: '增加缩进',left: '左对齐',center: '居中对齐',right: '右对齐',justify: '两端对齐'},color: {recent: '最近使用',more: '更多',background: '背景',foreground: '前景',transparent: '透明',setTransparent: '透明',reset: '重置',resetToDefault: '默认'},shortcut: {shortcuts: '快捷键',close: '关闭',textFormatting: '文本格式',action: '动作',paragraphFormatting: '段落格式',documentStyle: '文档样式',extraKeys: '额外按键'},history: {undo: '撤销',redo: '重做'},help: {insertParagraph: '插入段落',undo: '撤销',redo: '重做',tab: '增加缩进',untab: '减少缩进',bold: '粗体',italic: '斜体',underline: '下划线',strikethrough: '删除线',removeFormat: '清除格式',justifyLeft: '左对齐',justifyCenter: '居中对齐',justifyRight: '右对齐',justifyFull: '两端对齐',insertUnorderedList: '无序列表',insertOrderedList: '有序列表',outdent: '减少缩进',indent: '增加缩进',formatPara: '设置选中内容样式为 普通',formatH1: '设置选中内容样式为 标题1',formatH2: '设置选中内容样式为 标题2',formatH3: '设置选中内容样式为 标题3',formatH4: '设置选中内容样式为 标题4',formatH5: '设置选中内容样式为 标题5',formatH6: '设置选中内容样式为 标题6',insertHorizontalRule: '插入水平线','linkDialog.show': '显示链接对话框'}}});
})(jQuery);

如图

summernote.js

插入图片，默认会生成base64数据

   /*** insertImages* @param {File[]} files*/this.insertImages = function (files) {$.each(files, function (idx, file) {var filename = file.name;if (options.maximumImageFileSize && options.maximumImageFileSize < file.size) {context.triggerEvent('image.upload.error', lang.image.maximumFileSizeError);} else {async.readFileAsDataURL(file).then(function (dataURL) {return self.insertImage(dataURL, filename);}).fail(function () {context.triggerEvent('image.upload.error');});}});};//插入视频相关this.createVideoNode = function (url) {// video url patterns(youtube, instagram, vimeo, dailymotion, youku, mp4, ogg, webm)var ytRegExp = /^(?:https?:\/\/)?(?:www\.)?(?:youtu\.be\/|youtube\.com\/(?:embed\/|v\/|watch\?v=|watch\?.+&v=))((\w|-){11})(?:\S+)?$/;var ytMatch = url.match(ytRegExp);var igRegExp = /(?:www\.|\/\/)instagram\.com\/p\/(.[a-zA-Z0-9_-]*)/;var igMatch = url.match(igRegExp);var vRegExp = /\/\/vine\.co\/v\/([a-zA-Z0-9]+)/;var vMatch = url.match(vRegExp);var vimRegExp = /\/\/(player\.)?vimeo\.com\/([a-z]*\/)*([0-9]{6,11})[?]?.*/;var vimMatch = url.match(vimRegExp);var dmRegExp = /.+dailymotion.com\/(video|hub)\/([^_]+)[^#]*(#video=([^_&]+))?/;var dmMatch = url.match(dmRegExp);var youkuRegExp = /\/\/v\.youku\.com\/v_show\/id_(\w+)=*\.html/;var youkuMatch = url.match(youkuRegExp);var mp4RegExp = /^.+.(mp4|m4v)$/;var mp4Match = url.match(mp4RegExp);var oggRegExp = /^.+.(ogg|ogv)$/;var oggMatch = url.match(oggRegExp);var webmRegExp = /^.+.(webm)$/;var webmMatch = url.match(webmRegExp);var $video;if (ytMatch && ytMatch[1].length === 11) {var youtubeId = ytMatch[1];$video = $('<iframe>').attr('frameborder', 0).attr('src', '//www.youtube.com/embed/' + youtubeId).attr('width', '640').attr('height', '360');} else if (igMatch && igMatch[0].length) {$video = $('<iframe>').attr('frameborder', 0).attr('src', 'https://instagram.com/p/' + igMatch[1] + '/embed/').attr('width', '612').attr('height', '710').attr('scrolling', 'no').attr('allowtransparency', 'true');} else if (vMatch && vMatch[0].length) {$video = $('<iframe>').attr('frameborder', 0).attr('src', vMatch[0] + '/embed/simple').attr('width', '600').attr('height', '600').attr('class', 'vine-embed');} else if (vimMatch && vimMatch[3].length) {$video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>').attr('frameborder', 0).attr('src', '//player.vimeo.com/video/' + vimMatch[3]).attr('width', '640').attr('height', '360');} else if (dmMatch && dmMatch[2].length) {$video = $('<iframe>').attr('frameborder', 0).attr('src', '//www.dailymotion.com/embed/video/' + dmMatch[2]).attr('width', '640').attr('height', '360');} else if (youkuMatch && youkuMatch[1].length) {$video = $('<iframe webkitallowfullscreen mozallowfullscreen allowfullscreen>').attr('frameborder', 0).attr('height', '498').attr('width', '510').attr('src', '//player.youku.com/embed/' + youkuMatch[1]);} else if (mp4Match || oggMatch || webmMatch) {$video = $('<video controls>').attr('src', url).attr('width', '640').attr('height', '360');} else {// this is not a known video link. Now what, Cat? Now what?return false;}$video.addClass('note-video-clip');return $video[0];};this.show = function () {var text = context.invoke('editor.getSelectedText');context.invoke('editor.saveRange');this.showVideoDialog(text).then(function (url) {// [workaround] hide dialog before restore range for IE range focusui.hideDialog(self.$dialog);context.invoke('editor.restoreRange');// build nodevar $node = self.createVideoNode(url);if ($node) {// insert video nodecontext.invoke('editor.insertNode', $node);}}).fail(function () {context.invoke('editor.restoreRange');});};

Summernote.cshtml

@model RepDetailedModel@{ViewBag.Title = "Summernote";
}<div id="summernote">这是Summernote富文本框</div>@*<script type="text/javascript">//加载编辑器$(document).ready(function () {$("#summernote").summernote({height: 400,minHeight: 300,maxHeight: 500,focus: true,lang: "zh-CN",//重写图片上传onImageUpload: function (files, editor, $editable) {sendFile(files[0], editor, $editable);}});});//图片上传function sendFile(file, editor, $editable) {var filename = false;try{filename=false['name'];} catch (e) {filename = false;}if (!filename) {$(".note-alarm").remove();}//以上防止在编辑器内拖拽引发第二次上传导致的提示错误data = new FormData();data.append("file", "file");data.append("key", "filename");//唯一性参数$.ajax({data: data,type: "POST",url: "",cache: false,contentType: false,success: function (url) {if (url == '200') {alert("上传失败！")return;} else {alert("上传成功！")}//alert(url);editor.insertImage($editable, url)//setTimeout(funtion(){$(".note-alarm").remove();},3000);},error: function () {alert("上传失败！");return;//setTimeout(funtion(){$(".note-alarm").remove();},3000);}});}//var encodevalue = $("#RepDescribe").val();var decodevalue = htmlDecode(encodevalue);//$("#summernote").summernote('code', encodevalue);给编辑器赋值//var makrup = $('#summernote').summernote('code');var encodevalue = htmlEncode(makrup);//$("#RepDescribe").val(makrup);</script>*@@*<script>$(document).ready(function () {$('.summernote').summernote();})</script>*@<script type="text/javascript">$(document).ready(function () {/* function sendFile(file, editor,welEditable) {console.log("file="+file);console.log("editor="+editor);console.log("welEditable="+welEditable);data = new FormData();data.append("blog_image[image]", file);$.ajax({url: 'blog_images.jsp',data: data,cache: false,contentType: false,processData: false,type: 'POST',success: function(data){editor.insertImage(welEditable, data.url);}});}*/$('#summernote').summernote({height: 300, /*高さを指定*/lang: 'zh-CN', // default: 'en-US'focus: true,toolbar: [['style', ['bold', 'italic', 'underline', 'clear']],['fontsize', ['fontsize']],['color', ['color']],['para', ['ul', 'ol', 'paragraph']],['height', ['height']],['insert', ['picture', 'video']]],/* image: {selectFromFiles: '选择文件'}, *//*onImageUpload: function(files, editor, welEditable) {sendFile(files[0], editor,welEditable);}*/onImageUpload: function (files, editor, $editable) {sendFile(files[0], editor, $editable);}});});function sendFile(file, editor, $editable) {$(".note-toolbar.btn-toolbar").append('正在上传图片');var filename = false;try {filename = file['name'];alert(filename);} catch (e) { filename = false; }if (!filename) { $(".note-alarm").remove(); }//以上防止在图片在编辑器内拖拽引发第二次上传导致的提示错误var ext = filename.substr(filename.lastIndexOf("."));ext = ext.toUpperCase();var timestamp = new Date().getTime();var name = timestamp + "_" + $("#summernote").attr('aid') + ext;//name是文件名，自己随意定义，aid是我自己增加的属性用于区分文件用户data = new FormData();data.append("file", file);data.append("key", name);data.append("token", $("#summernote").attr('token'));$.ajax({data: data,type: "POST",url: "/summernote/fileupload", //图片上传出来的url，返回的是图片上传后的路径，http格式contentType: "json",cache: false,processData: false,success: function (data) {//data是返回的hash,key之类的值，key是定义的文件名alert(data);//把图片放到编辑框中。editor.insertImage 是参数，写死。后面的http是网上的图片资源路径。//网上很多就是这一步出错。$('#summernote').summernote('editor.insertImage', "http://res.cloudinary.com/demo/image/upload/butterfly.jpg");$(".note-alarm").html("上传成功,请等待加载");setTimeout(function () { $(".note-alarm").remove(); }, 3000);},error: function () {$(".note-alarm").html("上传失败");setTimeout(function () { $(".note-alarm").remove(); }, 3000);}});}</script><script>var HelloButton = function (context) {var ui = $.summernote.ui;// create buttonvar button = ui.button({contents: '<i class="fa fa-child" /> Hello',tooltip: 'hello',click: function () {// invoke insertText method with 'hello' on editor module.context.invoke('editor.insertText', 'hello');}});return button.render();   // return button as jquery object}</script>

如图

Summernote使用入门相关推荐

【若依(ruoyi)】summernote富文本编辑器的使用
前言 ruoyi 4.6 介绍官网: https://summernote.org/ 中文站: https://www.summernote.cn/ 源码: https://github.com/s ...
summernote html标签,summernote文本编辑内容在前端的显示
1.summernote文本的编辑与文件的上传 2.summernote编辑内容在前端的显示 summernote编辑器编辑的内容保存的时候是带有html标签的,那么小编在这里总结了两种方法,把这些内 ...
用Construct 2制作入门小游戏~
今天在软导课上了解到了Construct 2这个神器,本零基础菜鸟决定尝试做一个简单的小游戏(实际上是入门的教程啊= = 首先呢,肯定是到官网下载软件啊,点击我下载~ 等安装完毕后我便按照新手教程开始 ...
Docker入门六部曲——Swarm
原文链接:http://www.dubby.cn/detail.html?id=8738 准备工作安装Docker(版本最低1.13). 安装好Docker Compose,上一篇文章介绍过的. 安 ...
Docker入门六部曲——Stack
原文链接:http://www.dubby.cn/detail.html?id=8739 准备知识安装Docker(版本最低1.13). 阅读完Docker入门六部曲--Swarm,并且完成其中介绍 ...
Docker入门六部曲——服务
原文链接:http://www.dubby.cn/detail.html?id=8735 准备已经安装好Docker 1.13或者以上的版本. 安装好Docker Compose.如果你是用的是Do ...
【springboot】入门
简介: springBoot是spring团队为了整合spring全家桶中的系列框架做研究出来的一个轻量级框架.随着spring4.0推出而推出,springBoot可以説是J2SEE的一站式解决方案 ...
SpringBoot (一) ：入门篇 Hello World
什么是SpringBoot Spring Boot是由Pivotal团队提供的全新框架,其设计目的是用来简化新Spring应用的初始搭建以及开发过程.该框架使用了特定的方式来进行配置,从而使开发人员不 ...
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集-深度学习问题
入门指南目录页 -PaddlePaddle 飞桨入门指南 FAQ合集 GT_Zhang关注 0.1012019.08.01 18:43:34字数 1,874阅读 795 Hi,欢迎各位来自Paddl ...

Summernote使用入门

Create.cshtml

summernote-zh-CN.js

如图

summernote.js

Summernote.cshtml

如图

Summernote使用入门相关推荐

最新文章

热门文章