部落格做到這裡基本功能已經粗糙的完成了。注冊、登入、釋出、評論、部落格遷移該有的都有了。這段時間内，差不多都是一個功能一個星期。說是一個星期，其實就周末兩天而已。鬼還沒天亮就起來折騰，一做就是兩天不動。說實話，真心累。不過欣慰的是，基本功能都出來了

前言

這次開發的部落客要功能或特點：

第一：可以相容各終端，特别是手機端。

第二：到時會用到大量html5，炫啊。

第三：導入部落格園的精華文章，并做分類。（不要封我）

第四：做個插件，任何網站上的技術文章都可以轉發收藏到本部落格。

是以打算寫個系類：《一步步搭建自己的部落格》

一步步開發自己的部落格 .NET版（1、頁面布局、blog遷移、資料加載）
一步步開發自己的部落格 .NET版（2、評論功能）
一步步開發自己的部落格 .NET版（3、注冊登入功能）
一步步開發自己的部落格 .NET版（4、文章釋出功能）
一步步開發自己的部落格 .NET版（5、搜尋功能）
一步步開發自己的部落格 .NET版（6、手機端的相容）

示範位址：http://blog.haojima.net/ 群内共享源碼：469075305

部落格做到這裡基本功能已經粗糙的完成了。注冊、登入、釋出、評論、部落格遷移該有的都有了。這段時間内，差不多都是一個功能一個星期。說是一個星期，其實就周末兩天而已。鬼還沒天亮就起來折騰，一做就是兩天不動。說實話，真心累。不過欣慰的是，基本功能都出來了。

今天記錄下文章釋出功能的實作過程。

釋出，首先得有個富文本編輯器。其它的編輯器我沒了解過。聽說百度的還不錯，就稍微的研究了下。

百度編輯器

官網：http://ueditor.baidu.com/website/ 下載下傳位址：http://ueditor.baidu.com/website/download.html

我這裡用的是開發版

使用到自己的項目裡面還是非常的簡單，不過這裡需要注意的幾點。以下是問題記錄。

1.問題：

首先我用的.net 4.5，把UBuilder直接放項目裡面，運作報錯。沒細看報的什麼錯。

解決方法：我直接把目錄net->Bin檔案夾删了。（可能是版本問題）

2.問題：

我們從http://ueditor.baidu.com/website/umeditor.html 官網示範位址可以看到有如下 API。

我們通過 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.問題：

這也不算問題，就是我們不是專業的視訊網站，一般不允許傳視屏。

解決方法：可以配置上傳檔案的格式和大小。

基本上我就做了這些處理。這裡還有個存在的問題：就是我們在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 + ",";
    }
});

文章分類

文章分類我們就沒有做标簽那麼靈活了。标簽可以随意貼上去。但是分類一般都是先固定好。就像分類：我們都是中國人。标簽：我們是程式員，明天可能又是測試員大後天又能是美工、、沒辦法是以貼标簽就要靈活多了。

邏輯不複雜操作當然也要簡單。不就是修改個值嘛，幹嘛搞的那麼複雜。有的實作方式需要幾個頁面跳來跳去的。我的實作是點選修改分類直接變成可編輯狀态。編輯完成後光标點選任意地方就可以修改完成。這樣是不是友善多了。

首先，我們點選編輯的時候用一個 input 的 text 控件替換原來的 a标簽，并把值也傳過來。當 text 失去交點時直接背景儲存。并還原為 a 标簽狀态。

這裡需要注意重複點選編輯不能讓再次替換。需要判斷下。

一步步開發自己的部落格 .NET版（4、文章釋出功能）百度編輯器

//新增類型
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();
        }
    });

View Code

最後看看效果圖：

總結

關于釋出，其實要說的東西也不多。無非就是用個富文本編輯器編寫好内容然後更新到資料庫。然後在更新的時候需要填寫标簽和選擇分類。

這裡還有一點需要主要。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版（4、文章釋出功能）百度編輯器

讨論。

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

一步步開發自己的部落格 .NET版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/

本文連結：http://www.cnblogs.com/zhaopei/p/4783814.html

開源位址：http://git.oschina.net/zhaopeiym/Hi-Blogs

學習本是一個不斷抄襲、模仿、練習、創新的過程。
雖然，園中已有本人無法超越的同主題博文，為什麼還是要寫。
對于自己，博文隻是總結。在總結的過程發現問題，解決問題。
對于他人，在此過程如果還能附帶幫助他人，那就再好不過了。
由于部落客能力有限，文中可能存在描述不正确，歡迎指正、補充！
感謝您的閱讀。如果文章對您有用，那麼請輕輕點個贊，以資鼓勵。
工控物聯Q群：995475200

一步步開發自己的部落格 .NET版（4、文章釋出功能）百度編輯器

前言

百度編輯器

1.問題：

2.問題：

3.問題：

4.問題：

5.問題：

标簽

文章分類

總結

繼續閱讀

用django搭建簡易部落格系統一、準備工作二、模型的搭建三、URL，視圖和模闆四、其他

基于Django架構的部落格開發(二)-搭建基本開發環境這一篇主要介紹開發環境的搭建

Quentin : 一個基于 Django 架構的個人簡易部落格系統

新部落格位址 https://zxs.io

51CTO支援Open Live Writer 寫部落格，真的很友善

jax-ws 擷取用戶端相關資訊

單一檔案的斷點續傳

SEO初級|外部連結建設方法

部落格專欄：二十三種設計模式之開篇

☆推薦的部落格或個人技術網站☆

Android NDK系列（6） — 動态注冊native方法

如何轉載部落格，很不錯的

hexo主題配置檔案系列1+hexo-NexT-theme

解決Chrome谷歌浏覽器Flash插件已被屏蔽在chrome位址欄輸入：chrome://settings/content/flash設定先詢問，如果已經設定過了，請直接忽略此步驟。重新載入網頁，按提示啟用

設計模式：單例的n種寫法

Android電視機（機頂盒）初次開發的一些經驗分享