前言

这次开发的博客主要功能或特点：

第一：可以兼容各终端，特别是手机端。

第二：到时会用到大量html5，炫啊。

第三：导入博客园的精华文章，并做分类。（不要封我）

第四：做个插件，任何网站上的技术文章都可以转发收藏到本博客。

演示地址：http://blog.haojima.net/ 群内共享源码：469075305

博客做到这里基本功能已经粗糙的完成了。注册、登录、发布、评论、博客迁移该有的都有了。这段时间内，差不多都是一个功能一个星期。说是一个星期，其实就周末两天而已。鬼还没天亮就起来折腾，一做就是两天不动。说实话，真心累。不过欣慰的是，基本功能都出来了。

今天记录下文章发布功能的实现过程。

发布，首先得有个富文本编辑器。其它的编辑器我没了解过。听说百度的还不错，就稍微的研究了下。

百度编辑器

官网：http://ueditor.baidu.com/website/ 下载地址：http://ueditor.baidu.com/website/download.html

我这里用的是开发版一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

使用到自己的项目里面还是非常的简单，不过这里需要注意的几点。以下是问题记录。

1.问题：

首先我用的.net 4.5，把UBuilder直接放项目里面，运行报错。没细看报的什么错。

解决方法：我直接把目录net->Bin文件夹删了。（可能是版本问题）

2.问题：

我们从http://ueditor.baidu.com/website/umeditor.html 官网演示地址可以看到有如下 API。

一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

我们通过 getContent()获得 UBuilder 里的html内容毫无问题。通过setContent 加载内容时提示编辑器为空。

解决方法：当页面加载完成时赋值。

//页面加载完成时

    $(function () {

        var html = $(".hidden_data").val();

        // 自定义的编辑器配置项,此处定义的配置项将覆盖editor_config.js中的同名配置

        var editorOption = {

            autoClearinitialContent: true,

            elementPathEnabled: true

        };

        var editor_a = new baidu.editor.ui.Editor(editorOption);

        editor_a.render('editor');

        editor_a.ready(function () {

            editor_a.setContent(html,false);  //赋值给UEditor

        });

    });

3.问题：

发布后的代码样式无高亮。

解决方法：页面加载完成是执行高亮插件。

 $(function () {

        SyntaxHighlighter.highlight();

    });

4.问题：

图片上传显示失败。（原因是改变了路径）

解决方法：目录net->config.json 打开配置文件。 "imageUrlPrefix": "/ueditor/net/", /* 图片访问路径前缀 */ 改为UBuilder 放到项目的绝对路径如我的是放到了文件夹Plug下 "imageUrlPrefix": "/Plug/ueditor/net/", /* 图片访问路径前缀 */

5.问题：

这也不算问题，就是我们不是专业的视频网站，一般不允许传视屏。

解决方法：可以配置上传文件的格式和大小。

一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

基本上我就做了这些处理。这里还有个存在的问题：就是我们在UBuilder 里面复制过去的代码会自动给我去除div和样式。所以，像我直接迁移的博客园文章内容，如果用UBuilder 打开在保存的话代码就没有了高亮格式和乱了。（这点比较坑）。

//点击tag标签时

function clik_tag(obj) {

    if ($(obj).is(":checked")) { //如果选中

        var texttag = $(".text_tag");

        if (texttag.val().length > 1 && texttag.val()[texttag.val().length - 1] != ",") {

            texttag.val(texttag.val() + ",");

        }

        var text_tag = texttag.val() + $(obj).val();

        texttag.val(text_tag + ",");

    }

    else { //如果取消选中

        var text_taglist = $(".text_tag").val().split(",");

        $(".text_tag").val("");

        text_taglist.forEach(function (value, index) {

            if ($(obj).val() != value && value)

                $(".text_tag").val($(".text_tag").val() + value + ",");

        });

    }

}

这里还仅仅只是前台页面的显示。我们在后台也要判断。如果这个标签已经存在这直接查询到标签id 如果不存在先创建标签然后去标签id 和blog 关联。

我们在前台做点小的动作，分割文本框内的所有标签，如果存在下面的可选标签则为旧的标签否则是新的标签。我们在传入后台的时候先进行下分类。这样就免去了我们在后台处理。（我的原则是，非安全性问题，能在前台处理就在前台处理。）

//选择的标签

var oldtag = "", newtag = "";

var text_taglist = $(".text_tag").val().split(",");

var chk_taglsit = new Array();

$(".chk_tag").each(function () {

    chk_taglsit[chk_taglsit.length] = $(this).val();

});

text_taglist.forEach(function (value, index) {

    if ($.inArray(value, chk_taglsit) >= 0) {

        oldtag += value + ",";

    }

    else {

        newtag += value + ",";

    }

});

文章分类

文章分类我们就没有做标签那么灵活了。标签可以随意贴上去。但是分类一般都是先固定好。就像分类：我们都是中国人。标签：我们是程序员，明天可能又是测试员大后天又能是美工、、没办法所以贴标签就要灵活多了。

一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

逻辑不复杂操作当然也要简单。不就是修改个值嘛，干嘛搞的那么复杂。有的实现方式需要几个页面跳来跳去的。我的实现是点击修改分类直接变成可编辑状态。编辑完成后光标点击任意地方就可以修改完成。这样是不是方便多了。

首先，我们点击编辑的时候用一个 input 的 text 控件替换原来的 a标签，并把值也传过来。当 text 失去交点时直接后台保存。并还原为 a 标签状态。

这里需要注意重复点击编辑不能让再次替换。需要判断下。

//新增类型

function addnewtype(obj) {

    var strhtml = "<div class='newtype'><input type='text' class='text_newtype' onblur='newtype_onblur(this);'/></div>";

    var chi = $(obj).parents(".divtitle_chi");

    if (chi.find(".newtype").length <= 0) {

        chi.append(strhtml).find(".text_newtype").focus();

    }

}

function newtype_onblur(obj) {

    var value = $(obj).val();

    if (!value) {

        $(obj).parents(".newtype").remove();

        return;

    }

    $.post("@Url.RouteUrl("ControllerAction", new { controller = "Admin", action = "NewAddType" })",

        { "newtypename": value }, function (data) {

            if (ShowAjaxResult(data)) {

            }

        });

    var newhtml = "<a>" + value + "</a>";

    $(obj).parents(".newtype").removeClass("newtype").addClass("divtitle_chi").html(newhtml);

}

//修改 文章 类型

function edittype(obj) {

    $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur");

    if (!$(obj).next().hasClass("newtype")) {

        var value = $(obj).next().html().trim();//取得 文章类型 名称

        var typeid = $(obj).find(".hid_typeid").val();  //取得 文章类型id  onblur='edittype_onblur(this);'

        var strhtml = "<div style='float:left' class='newtype'><input type='text' class='text_newtype' value='" + value + "' keyvalue='" + value + "' keyid='" + typeid + "' /></div>";

        $(obj).next().css("display", "none"); // 隐藏原来显示的文章类型

        $(obj).after(strhtml).next().find(".text_newtype").focus().bind("blur", function () {

            edittype_onblur($(obj).parents(".divtitle_chi").find(".text_newtype"));

        });  //把 修改的文本元素添加 并获得焦点

    }

    else {

        edittype_onblur($(obj).after(strhtml).next().find(".text_newtype"));

    }

}

//鼠标移到目标的上方

function editover(obj) {

    $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur");

    //$(".testmess").html("unbind");

}

//鼠标在目标的上方移动

function editmove(obj) {

    $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur");

}

//鼠标移出目标的上方

function editout(obj) {

    //$(".testmess").html("bind");

    $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur");

    $(obj).parents(".divtitle_chi").find(".text_newtype").bind("blur", function () {

        // $(".testmess").html("bind");

        edittype_onblur($(obj).parents(".divtitle_chi").find(".text_newtype"));

    });

}

function edittype_onblur(obj) {

    var value = $(obj).val().trim(); //新的文章类型

    var typeid = $(obj).attr("keyid").trim();//类型ID

    var oldvalue = $(obj).attr("keyvalue").trim();//旧的文章类型

    if (!value || !typeid || value == oldvalue) { //1.如果值为空 2.如果类型id为空 3.如果没有修改 则直接返回

        $(obj).parents(".newtype").next().css("display", "");

        $(obj).parents(".newtype").remove();

        return;

    }

    $.post("@Url.RouteUrl("ControllerAction", new { controller = "Admin", action = "EditType" })",

    { "typename": value, "typeid": typeid }, function (data) {

        if (ShowAjaxResult(data)) {

            $(obj).parents(".newtype").next().remove();

            var newhtml = "<a>" + value + "</a>";

            var newtype = $(obj).parents(".newtype")

            newtype.after(newhtml);

            newtype.remove();

        }

        else {

            $(obj).parents(".newtype").next().css("display", "");

            $(obj).parents(".newtype").remove();

        }

    });

最后看看效果图：

一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

总结

关于发布，其实要说的东西也不多。无非就是用个富文本编辑器编写好内容然后更新到数据库。然后在更新的时候需要填写标签和选择分类。

这里还有一点需要主要。asp.net 默认是不允许提交标签文本到服务器的。所以我们这里需要关闭默认的安全验证。

1.后台访问的 action 方法上打上 [ValidateInput(false)] 的特性标签。

2.在配置文件配置（我用的是MVC是4.0 貌似必须要在配置文件配置）

<system.web >

<httpRuntime requestValidationMode="2.0" / >

</system.web >

演示地址：http://blog.haojima.net/Admin/Release/7 (需要登录状态才能发布)

如果您对本篇文章感兴趣，那就麻烦您点个赞，您的鼓励将是我的动力。当然您还可以加入QQ群:讨论。

如果您有更好的处理方式，希望不要吝啬赐教。

一步步开发自己的博客 .NET版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/

本文链接：http://www.cnblogs.com/zhaopei/p/4783814.html

开源地址：http://git.oschina.net/zhaopeiym/Hi-Blogs

秒客网

一步步开发自己的博客 .NET版（4、文章发布功能）百度编辑器

前言

百度编辑器

1.问题：

2.问题：

3.问题：

4.问题：

5.问题：

标签

文章分类

总结

相关文章