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

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

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

该插件是开源的，官网地址:，GitHub地址：、安装调整都很方便。

1、Summernote的简单使用

使用方法：

1）、加载JS和CSS

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

添加对bootstrap-summernote的支持 css_metronic.Include();

2）、编写HTML内容

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

Hello Summernote

3）、初始化调用

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

$(document).ready('#summernote'

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

$('#summernote'300

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

'#Note''zh-CN', height: 600, minHeight: , maxHeight: , focus: , (files) { img = sendFile(files[0

4）、获取内容

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

5）、设置内容

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

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

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

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

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

'#Note''zh-CN', height: 600, minHeight: , maxHeight: , focus: , (files) { img = sendFile(files[0

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

文件到服务器处理 = "file"增加额外的参数 data.append("folder",'商品信息'"guid",$("#ID"

        $.ajax({
            data: data,type: </span>"POST"<span style="color: #000000;"&gt;,url: </span>"/FileUpload/Upload"<span style="color: #000000;"&gt;,cache: </span><span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;,contentType: </span><span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;,processData: </span><span style="color: #0000ff;"&gt;false</span><span style="color: #000000;"&gt;,success: </span><span style="color: #0000ff;"&gt;function</span><span style="color: #000000;"&gt; (json) {
                </span><span style="color: #0000ff;"&gt;var</span> data =<span style="color: #000000;"&gt; $.parseJSON(json);
                </span><span style="color: #0000ff;"&gt;var</span> url = data.urls[0<span style="color: #000000;"&gt;];
                $(</span>"#Note").summernote('insertImage',url,'image name'); <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt; the insertImage API  </span>

}
});
}

一般来说，我们的文件为了在多个应用之间共享处理，一般建议以FTP方式进行处理，这方面可以参考随笔《》，FTP上传文件可以使用FluentFTP这个组件（GitHub地址：），这个是一个应用很广，功能很强大的FTP组件。

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

上传附件到服务器上上传目录 ActionResult Upload( guid,修改字段显示，则参考下面代码处理 obj = <> urls = List<> result =

        HttpFileCollectionBase files </span>=<span style="color: #000000;"&gt; HttpContext.Request.Files;
        </span><span style="color: #0000ff;"&gt;if</span> (files != <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;)
        {
            </span><span style="color: #0000ff;"&gt;foreach</span> (<span style="color: #0000ff;"&gt;string</span> key <span style="color: #0000ff;"&gt;in</span><span style="color: #000000;"&gt; files.Keys)
            {
                </span><span style="color: #0000ff;"&gt;try</span><span style="color: #000000;"&gt;
                {
                    </span><span style="color: #0000ff;"&gt;#region</span> MyRegion<span style="color: #000000;"&gt;
                    HttpPostedFileBase fileData </span>=<span style="color: #000000;"&gt; files[key];
                    </span><span style="color: #0000ff;"&gt;if</span> (fileData != <span style="color: #0000ff;"&gt;null</span><span style="color: #000000;"&gt;)
                    {
                        HttpContext.Request.ContentEncoding </span>= Encoding.GetEncoding(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;UTF-8</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;);
                        HttpContext.Response.ContentEncoding </span>= Encoding.GetEncoding(<span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;UTF-8</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;);
                        HttpContext.Response.Charset </span>= <span style="color: #800000;"&gt;"</span><span style="color: #800000;"&gt;UTF-8</span><span style="color: #800000;"&gt;"</span><span style="color: #000000;"&gt;;

                        </span><span style="color: #0000ff;"&gt;string</span> fileName = Path.GetFileName(fileData.FileName);      <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;原始<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a><a href="https://www.jb51.cc/tag/mingcheng/" target="_blank" class="keywords">名称</a></span>
                        <span style="color: #0000ff;"&gt;string</span> fileExtension = Path.GetExtension(fileName);         <span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/wenjian/" target="_blank" class="keywords">文件</a>扩展名</span>

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 </span>=<span style="color: #000000;"&gt; DateTime.Now;
                        info.Editor </span>= CurrentUser.Name;<span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;<a href="https://www.jb51.cc/tag/denglu/" target="_blank" class="keywords">登录</a>人
                        </span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;info.Owner_ID = OwerId;</span><span style="color: #008000;"&gt;//</span><span style="color: #008000;"&gt;所属主表记录ID</span>

result = BLLFactory.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对象为空";
}

        </span><span style="color: #0000ff;"&gt;var</span> newResult = <span style="color: #0000ff;"&gt;new</span> { Success = result.Success,ErrorMessage = result.ErrorMessage,<span style="color: #ff0000;"&gt;urls =</span><span style="color: #000000;"&gt;<span style="color: #ff0000;"&gt; urls</span> };
        </span><span style="color: #0000ff;"&gt;return</span><span style="color: #000000;"&gt; ToJsonContent(newResult);
    }</span></pre>

界面效果如我在随笔介绍的一样《》。

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

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

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

data = url = data.urls[

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

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

《》

原文链接：https://www.f2er.com/bootstrap/73638.html

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

1、Summernote的简单使用

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

猜你在找的Bootstrap相关文章