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

时间:2022-07-06 22:17:35

前言

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

第一:可以兼容各终端,特别是手机端。

第二:到时会用到大量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、文章发布功能)百度编辑器

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

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

标签

我们在发布文章的时候,经常是需要 标签和分类的。所在 这里最基本的功能  不能省。 一步步开发自己的博客  .NET版(4、文章发布功能)百度编辑器

以图为例。输入标签有两种方式。第一:直接在文本框内输入 以逗号 分割。第二种:勾选 复选框。

看似简单的功能,其实不简单。

首先 我们可以通过 勾选 复选框 来选择 标签,那么 我们就可以通过 取消 复选框 来 删除 已经选好的标签。那怎么实现呢?

选中的时候,先判断 文本框内的最好一个字符是不是 , 如果不是    我们在 选中的时候 先 添加 逗号 然后 累加 我们选中的 复选框额值。

取消选中的时候,我们先 用逗号 分割 文本框 内的字符串,然后 如果有 我们要取消的 标签 则删除。

说了这么大堆  其实代码实现也不多。

//点击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版(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