您的位置:9159金沙官网 > 金沙澳门9159官网 > 基于Metronic的Bootstrap开发框架经验总结(17)-- 使

基于Metronic的Bootstrap开发框架经验总结(17)-- 使

发布时间:2019-11-13 19:10编辑:金沙澳门9159官网浏览(185)

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

    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地址: ),这个是一个应用很广,功能很强大的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);
            }
    

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

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

    图片 1

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

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

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

        $.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  
            }
        });
    

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

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

    基于Metronic的Bootstrap开发框架经验总结(17)-- 使用 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)-框架总览及菜单模块的处理 

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

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

    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);
    

     

    本文由9159金沙官网发布于金沙澳门9159官网,转载请注明出处:基于Metronic的Bootstrap开发框架经验总结(17)-- 使

    关键词: