您的位置:首页 > Web前端 > BootStrap

基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 summernote插件实现HTML文档的编辑和图片插入操作

2017-09-02 15:50 1721 查看
在很多场合,我们需要在线编辑HTML内容,然后在页面上或者其他终端上(如小程序、APP应用等)显示,编辑HTML内容的插件有很多,本篇介绍基于Bootstrap的 summernote插件实现HTML文档的编辑和图片插入操作,这个控件的使用非常方便,并且用户群也很大。

Summernote 是一个简单灵活,所见即所得(WYSIWYG)的编辑器,Summernote是一个轻量级、灵活基于Bootstrap和jQuery的HTML文本编辑器,拥有强大的API配置功能,多国语言支持支持Bootstrap2.x和3.0,支持视频和图片上传以及代码的高亮显示,多种
后台语言版本示例以及多主体支持,在浏览器兼容方面,支持IE9+以及现代的浏览器Chrome,Firefox,Safari等,在移动端应该有不错的表现,还是很不错的,值得使用。

该插件是开源的,官网地址:http://summernote.org/,GitHub地址:https://github.com/summernote/summernote/、安装调整都很方便。

1、Summernote的简单使用

使用方法:
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.7/summernote.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.7/summernote.js"></script>


基于MVC的Asp.net应用程序中,我们一般在BundleConfig.cs里面初始化我们的引入JS文件,如下所示。

//添加对bootstrap-summernote的支持
css_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/summernote.css");
js_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/summernote.min.js");
js_metronic.Include("~/Content/metronic/assets/global/plugins/bootstrap-summernote/lang/summernote-zh-CN.min.js");


bundles.Add(css_metronic);
bundles.Add(js_metronic);


2)、编写HTML内容

在HTML页面代码增加下面的标记。

<div id="summernote">Hello Summernote</div>


3)、初始化调用

简单的初始化代码如下所示。

$(document).ready(function() {
$('#summernote').summernote();
});


如果增加控件高度的定义,则如下所示。

$('#summernote').summernote({
height: 300,
focus: true
});


而详细的初始化界面,一般还包括语言国际化、图片上传等处理代码,如下所示

function initEditor() {
$('#Note').summernote({
lang: 'zh-CN',       // default: 'en-US'
height: 600,         // set editor height
minHeight: null,    // set minimum height of editor
maxHeight: null,    // set maximum height of editor
focus: true,         // set focus to editable area after initializing summe
callbacks: {
onImageUpload: function (files) { //the onImageUpload API
img = sendFile(files[0]);
}
}
});
}


4)、获取内容

var markupStr = $('#summernote').summernote('code');


5)、设置内容

设置内容和获取内容类似,在code后面增加需要写入的HTML内容即可。

var markupStr = 'hello world';
$('#summernote').summernote('code', markupStr);


2、 summernote插件在实际项目中的使用

上面介绍了常规 summernote插件的使用过程,一般情况下,我们使用它除了编辑HTML内容外,还需要对图片上传进行处理,以确保我们可以直接把文件上传到后台文件系统里面去,而不是把它们转换为Base64的编码放在页面内。

一般的初始化代码如下所示。

        function initEditor() {
$('#Note').summernote({
lang: 'zh-CN',       // default: 'en-US'
height: 600,         // set editor height
minHeight: null,    // set minimum height of editor
maxHeight: null,    // set maximum height of editor
focus: true,         // set focus to editable area after initializing summe
callbacks: {
onImageUpload: function (files) { //the onImageUpload API
img = sendFile(files[0]);
}
}
});
}


其中的sendFile的函数如下所示,主要是调用附件管理模块进行文件的存储。

//提交文件到服务器处理
function sendFile(file) {
data = new FormData();
data.append("file", file);
//增加额外的参数
data.append("folder", '商品信息');
data.append("guid", $("#ID").val());

$.ajax({
data: data,
type: "POST",
url: "/FileUpload/Upload",
cache: false,
contentType: false,
processData: false,
success: function (json) {
var data = $.parseJSON(json);
var url = data.urls[0];
$("#Note").summernote('insertImage', url, 'image name'); // the insertImage API
}
});
}


一般来说,我们的文件为了在多个应用之间共享处理,一般建议以FTP方式进行处理,这方面可以参考随笔《在附件管理模块中增加对FTP 上传和预览的支持》,FTP上传文件可以使用FluentFTP这个组件(GitHub地址:https://github.com/hgupta9/FluentFTP ),这个是一个应用很广,功能很强大的FTP组件。

上传附件到服务器上的后台控制器代码如下所示,主要是构建文件信息,上传后返回对应的URL,然后就可以在 summernote插件上显示图片了。

/// <summary>
/// 上传附件到服务器上
/// </summary>
/// <param name="fileData">附件信息</param>
/// <param name="guid">附件组GUID</param>
/// <param name="folder">指定的上传目录</param>
/// <returns></returns>
[AcceptVerbs(HttpVerbs.Post)]
public ActionResult Upload(string guid, string folder)
{
//如果需要修改字段显示,则参考下面代码处理
dynamic obj = new ExpandoObject();
List<string> urls = new List<string>();
var result = new CommonResult();

HttpFileCollectionBase files = HttpContext.Request.Files;
if (files != null)
{
foreach (string key in files.Keys)
{
try
{
#region MyRegion
HttpPostedFileBase fileData = files[key];
if (fileData != null)
{
HttpContext.Request.ContentEncoding = Encoding.GetEncoding("UTF-8");
HttpContext.Response.ContentEncoding = Encoding.GetEncoding("UTF-8");
HttpContext.Response.Charset = "UTF-8";

string fileName = Path.GetFileName(fileData.FileName);      //原始文件名称
string fileExtension = Path.GetExtension(fileName);         //文件扩展名

FileUploadInfo info = new FileUploadInfo();
info.FileData = ReadFileBytes(fileData);
if (info.FileData != null)
{
info.FileSize = info.FileData.Length;
}
info.Category = folder;
info.FileName = fileName;
info.FileExtend = fileExtension;
info.AttachmentGUID = guid;

info.AddTime = DateTime.Now;
info.Editor = CurrentUser.Name;//登录人
//info.Owner_ID = OwerId;//所属主表记录ID

result = BLLFactory<FileUpload>.Instance.Upload(info);
if (!result.Success)
{
LogTextHelper.Error("上传文件失败:" + result.ErrorMessage);
}
else
{
//返回具体路径地址
string serverRealPath = info.BasePath.UriCombine(info.SavePath);
if (!Path.IsPathRooted(info.BasePath) &&
!info.BasePath.StartsWith("http://") &&
!info.BasePath.StartsWith("https://"))
{
//如果是相对目录,加上当前程序的目录才能定位文件地址
var url = HttpContext.Request.Url;
var baseurl = url.AbsoluteUri.Replace(url.PathAndQuery, "");
serverRealPath = baseurl.UriCombine(serverRealPath).Replace('\\', '/');
}
urls.Add(serverRealPath);
}
}
#endregion
}
catch (Exception ex)
{
result.ErrorMessage = ex.Message;
LogTextHelper.Error(ex);
}
}
obj.urls = urls;
}
else
{
result.ErrorMessage = "fileData对象为空";
}

var newResult = new { Success = result.Success, ErrorMessage = result.ErrorMessage, urls = urls };
return ToJsonContent(newResult);
}


界面效果如我在随笔介绍的一样《微信小程序结合后台数据管理实现商品数据的动态展示、维护》。

案例对商品的详细信息的富文本进行编辑,来进行图片文字的编辑处理,如下界面所示。



当我们插入图片的时候,弹出一个对话框界面,选择文件上传后返回URL显示在SummerNote插件上。



上传文件成功后,通过下面的代码插入一个图片,如下代码。

$.ajax({
data: data,
type: "POST",
url: "/FileUpload/Upload",
cache: false,
contentType: false,
processData: false,
success: function (json) {
var data = $.parseJSON(json);
var url = data.urls[0];
$("#Note").summernote('insertImage', url, 'image name'); // the insertImage API
}
});


以上就是我在实际的Bootstrap框架项目中使用 summernote插件实现HTML文档的编辑和图片插入操作,整体性还是比较容易上手的,经验供大家借鉴。

其他相关随笔可以参考阅读下:

结合bootstrap fileinput插件和Bootstrap-table表格插件,实现文件上传、预览、提交的导入Excel数据操作流程

基于Metronic的Bootstrap开发框架经验总结(16)-- 使用插件bootstrap-table实现表格记录的查询、分页、排序等处理

基于Metronic的Bootstrap开发框架经验总结(15)-- 更新使用Metronic 4.75版本

从开发框架提高开发效率说起

基于Metronic的Bootstrap开发框架经验总结(14)--条码和二维码的生成及打印处理

基于Metronic的Bootstrap开发框架经验总结(13)--页面链接收藏夹功能的实现2

基于Metronic的Bootstrap开发框架经验总结(12)--页面链接收藏夹功能的实现

基于Metronic的Bootstrap开发框架经验总结(11)--页面菜单的几种呈现方式

基于Metronic的Bootstrap开发框架经验总结(10)--优化Bootstrap图标管理

在MVC控制器里面使用dynamic和ExpandoObject,实现数据转义的输出

基于Metronic的Bootstrap开发框架经验总结(9)--实现Web页面内容的打印预览和保存操作

基于Metronic的Bootstrap开发框架经验总结(8)--框架功能总体界面介绍

基于Metronic的Bootstrap开发框架经验总结(7)--数据的导入、导出及附件的查看处理

基于Metronic的Bootstrap开发框架经验总结(6)--对话框及提示框的处理和优化

基于Metronic的Bootstrap开发框架经验总结(5)--Bootstrap文件上传插件File Input的使用

基于Metronic的Bootstrap开发框架经验总结(4)--Bootstrap图标的提取和利用

基于Metronic的Bootstrap开发框架经验总结(3)--下拉列表Select2插件的使用

基于Metronic的Bootstrap开发框架经验总结(2)--列表分页处理和插件JSTree的使用

基于Metronic的Bootstrap开发框架经验总结(1)-框架总览及菜单模块的处理
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: 
相关文章推荐