编制HTML内容的插件有众多365体育网投,编辑HTML内容的插件有那多少个

在诸多场地,大家需求在线编辑HTML内容,然后在页面上照旧别的终端上(如小程序、APP应用等)突显,编辑HTML内容的插件有许多,本篇介绍基于Bootstrap的 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/、安装调整都很有利。

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

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

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)-框架总览及菜单模块的拍卖

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

界面效果如本人在随笔介绍的同一《微信小程序结合后台数据管理落到实处货物数量的动态体现、维护》。

案例对货物的详细音讯的富文本举办编制,来展开图片文字的编制处理,如下界面所示。

365体育网投 1

当大家插入图片的时候,弹出一个会话框界面,拔取文件上传后重回URL突显在SummerNote插件上。

 365体育网投 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  
        }
    });

 以上就是自个儿在骨子里的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)-框架总览及菜单模块的拍卖