一步步開發本身的博客 .NET版（四、文章發佈功能）百度編輯器

時間 2019-11-13

標籤步步開發本身博客文章發佈功能百度編輯器简体版

原文原文鏈接

前言

此次開發的博客主要功能或特色：css

第一：能夠兼容各終端，特別是手機端。html

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

第三：導入博客園的精華文章，並作分類。（不要封我）git

第四：作個插件，任何網站上的技術文章均可以轉發收藏到本博客。程序員

因此打算寫個系類：《一步步搭建本身的博客》web

演示地址：http://blog.haojima.net/ 羣內共享源碼：469075305 數據庫

博客作到這裏基本功能已經粗糙的完成了。註冊、登陸、發佈、評論、博客遷移該有的都有了。這段時間內，差很少都是一個功能一個星期。說是一個星期，其實就週末兩天而已。鬼還沒天亮就起來折騰，一作就是兩天不動。說實話，真心累。不過欣慰的是，基本功能都出來了。json

今天記錄下文章發佈功能的實現過程。安全

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

百度編輯器

官網：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 標籤狀態。

這裏須要注意重複點擊編輯不能讓再次替換。須要判斷下。

//新增類型
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版系列：http://www.cnblogs.com/zhaopei/tag/Hi-Blogs/

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

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。