《一步步搭建自己的博客》演示地址：群内共享源码

　　《一步步搭建自己的博客》演示地址：群内共享源码

　　前言

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

　　第一：兼容各种终端，尤其是手机。

　　第二：那会用到很多html5，眼花缭乱。

　　第三：导入并归类博客园文章的精华。 （别挡我）

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

　　所以我打算写一个部门：“一步一步建立自己的博客”

　　演示地址：群内共享源码：469075305

　　博客的基本功能已经大致完成。注册、登录、发布、评论、博客迁移都应该在那里。这段时间，几乎是一周的一个功能。说是一周，其实只是周末两天而已。鬼在黎明前醒来，辗转反侧，两天一动不动。说实话，我真的很累。不过好在基本功能已经出来了。

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

　　要发布，您必须首先拥有富文本编辑器。我还没有了解其他编辑器。听说百度的不错，就查了一下。

　　百度编辑器

　　官网：下载地址：

　　这里使用的是开发版

　　

　　在自己的项目中使用还是很简单的，但是这里有几点需要注意。以下是问题记录。

　　1.问题：

　　首先我用.net4.5，直接把UBuilder放在项目里，运行时报错。没仔细看报纸。

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

　　2.问题：

　　从官网的demo地址可以看到如下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.问题：

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

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

　　

　　

　　基本上，我是这样做的。这里还有一个问题：就是如果我们在U​​Builder里面复制过去的代码，它会自动帮我去掉div和style。所以，像我直接迁移的博客园文章内容，如果用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 与博客相关联。

　　我们在前台做一个小动作来拆分文本框中的所有标签。如果下面有可选标签，则为旧标签，否则为新标签。当我们将它传递到后台时，我们首先对其进行分类。这使我们免于在后台处理。 （我的原则是非安全问题可以前台处理，前台处理。）

　　//选择的标签

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 + ",";

}

});

　　文章Classification

　　文章Classification 我们不像标签那样灵活。标签可以随意贴。但是分类一般是先固定的。就像分类：我们都是中国人。标签：我们是程序员，明天可能是测试员，后天又可以做美工，没办法，所以标签需要更灵活。

　　

　　逻辑不复杂，操作当然要简单。不就是改变一个值吗？为什么这么复杂？一些实现需要几个页面来跳转。我的实现是点击修改类别直接变成可编辑状态。编辑完成后，用光标单击任意位置即可完成修改。不是更方便吗？

　　首先，当我们点击编辑时，将原来的a标签替换为一个输入文本控件，并传递值。当文字失去交点时，会直接保存在后台。并恢复到标签状态。

　　这里，你需要注意。重复单击编辑，您无法再次替换它。需要判断。

　　

　　

<p>//新增类型

function addnewtype(obj) {

var strhtml = "";

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

if (chi.find(".newtype").length