MyException - 我的异常网
当前位置:我的异常网» HTML/CSS » 基于Metronic的Bootstrap开发框架经验总结(17)-

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

www.MyException.Cn  网友分享于:2013-09-12  浏览:0次
基于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等,在移动端应该有不错的表现,还是很不错的,值得使用。

该插件是开源的,官网地址: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)-框架总览及菜单模块的处理 

文章评论

要嫁就嫁程序猿—钱多话少死的早
要嫁就嫁程序猿—钱多话少死的早
2013年美国开发者薪资调查报告
2013年美国开发者薪资调查报告
Web开发人员为什么越来越懒了?
Web开发人员为什么越来越懒了?
我跳槽是因为他们的显示器更大
我跳槽是因为他们的显示器更大
10个帮程序员减压放松的网站
10个帮程序员减压放松的网站
什么才是优秀的用户界面设计
什么才是优秀的用户界面设计
一个程序员的时间管理
一个程序员的时间管理
2013年中国软件开发者薪资调查报告
2013年中国软件开发者薪资调查报告
如何区分一个程序员是“老手“还是“新手“?
如何区分一个程序员是“老手“还是“新手“?
编程语言是女人
编程语言是女人
聊聊HTTPS和SSL/TLS协议
聊聊HTTPS和SSL/TLS协议
老程序员的下场
老程序员的下场
程序员的鄙视链
程序员的鄙视链
Java 与 .NET 的平台发展之争
Java 与 .NET 的平台发展之争
 程序员的样子
程序员的样子
如何成为一名黑客
如何成为一名黑客
Web开发者需具备的8个好习惯
Web开发者需具备的8个好习惯
10个调试和排错的小建议
10个调试和排错的小建议
十大编程算法助程序员走上高手之路
十大编程算法助程序员走上高手之路
程序员必看的十大电影
程序员必看的十大电影
鲜为人知的编程真相
鲜为人知的编程真相
程序员和编码员之间的区别
程序员和编码员之间的区别
每天工作4小时的程序员
每天工作4小时的程序员
那些性感的让人尖叫的程序员
那些性感的让人尖叫的程序员
那些争议最大的编程观点
那些争议最大的编程观点
写给自己也写给你 自己到底该何去何从
写给自己也写给你 自己到底该何去何从
我的丈夫是个程序员
我的丈夫是个程序员
程序员最害怕的5件事 你中招了吗?
程序员最害怕的5件事 你中招了吗?
程序员眼里IE浏览器是什么样的
程序员眼里IE浏览器是什么样的
亲爱的项目经理,我恨你
亲爱的项目经理,我恨你
Java程序员必看电影
Java程序员必看电影
当下全球最炙手可热的八位少年创业者
当下全球最炙手可热的八位少年创业者
程序员都该阅读的书
程序员都该阅读的书
Google伦敦新总部 犹如星级庄园
Google伦敦新总部 犹如星级庄园
“懒”出效率是程序员的美德
“懒”出效率是程序员的美德
漫画:程序员的工作
漫画:程序员的工作
做程序猿的老婆应该注意的一些事情
做程序猿的老婆应该注意的一些事情
初级 vs 高级开发者 哪个性价比更高?
初级 vs 高级开发者 哪个性价比更高?
程序员周末都喜欢做什么?
程序员周末都喜欢做什么?
中美印日四国程序员比较
中美印日四国程序员比较
为啥Android手机总会越用越慢?
为啥Android手机总会越用越慢?
科技史上最臭名昭著的13大罪犯
科技史上最臭名昭著的13大罪犯
5款最佳正则表达式编辑调试器
5款最佳正则表达式编辑调试器
团队中“技术大拿”并非越多越好
团队中“技术大拿”并非越多越好
总结2014中国互联网十大段子
总结2014中国互联网十大段子
“肮脏的”IT工作排行榜
“肮脏的”IT工作排行榜
60个开发者不容错过的免费资源库
60个开发者不容错过的免费资源库
代码女神横空出世
代码女神横空出世
老美怎么看待阿里赴美上市
老美怎么看待阿里赴美上市
软件开发程序错误异常ExceptionCopyright © 2009-2015 MyException 版权所有