一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器
<h1 id="autoid-0-0">前言?
所以打算写个系类:《》 演示地址:??? ? 群内共享源码: 博客做到这里 基本功能已经粗糙的完成了。注册、登录、发布、评论、博客迁移该有的都有了。这段时间内,差不多都是一个功能一个星期。说是一个星期,其实就周末两天而已。鬼还没天亮 就起来折腾,一做就是两天 不动。说实话,真心累。不过欣慰的是,基本功能都出来了。 今天记录下 文章发布功能的实现过程。 发布,首先得有个富文本编辑器。其它的编辑器 我没了解过。听说 百度的还不错,就 稍微的研究了下。 百度编辑器?官网:?下载地址:? 我这里用的是 开发版? 使用到自己的项目里面还是非常的简单,不过这里需要注意的几点。以下是问题记录。 1.问题:首先 我用的.net 4.5,把UBuilder直接放项目里面,运行报错。没细看报的什么错。 解决方法:我直接把 目录net->Bin文件夹 ? 删了。(可能是版本问题) 2.问题:我们从?官网演示地址可以看到 有如下 API。 我们通过?getContent()获得?UBuilder 里的html内容 毫无问题。 通过setContent 加载内容时提示编辑器为空。 解决方法:当页面加载完成时 赋值。
$( html = $(".hidden_data"
editorOption = editor_a = 'editor');
解决方法:页面加载完成是 执行高亮插件。 4.问题:图片上传显示失败。(原因是改变了路径) 解决方法:目录net->config.json 打开配置文件。?? 改为UBuilder 放到项目的绝对路径 如我的是放到了 文件夹Plug下?? 5.问题:这也不算问题,就是 我们不是专业的视频网站,一般不允许传视屏。 解决方法:可以配置 上传文件的 格式 和大小。 ? ? ? 基本上 我就做了这些处理。 这里还有个存在的问题 :就是我们在UBuilder 里面 复制过去的代码 会自动给我去除div和样式。所以,像我直接迁移的博客园文章内容,如果用UBuilder 打开 在保存的话 ?代码就没有了高亮 格式和乱了。(这点比较坑)。 标签我们在发布文章的时候,经常是需要 标签和分类的。所在 这里最基本的功能 ?不能省。? 以图为例。输入标签有两种方式。第一:直接在文本框内输入 以逗号 分割。第二种:勾选 复选框。 看似简单的功能,其实不简单。 首先 我们可以通过 勾选 复选框 来选择 标签,那么 我们就可以通过 取消 复选框 来 删除 已经选好的标签。那怎么实现呢? 选中的时候,先判断 文本框内的最好一个字符是不是,如果不是 ? ?我们在 选中的时候 先 添加 逗号 然后 累加 我们选中的 复选框额值。 取消选中的时候,我们先 用逗号 分割 文本框 内的字符串,然后 如果有 我们要取消的 标签 则删除。 说了这么大堆 ?其实代码实现也不多。
($(obj).is(":checked")) {
texttag = $(".text_tag" (texttag.val().length > 1 && texttag.val()[texttag.val().length - 1] != ","+ "," text_tag = texttag.val() ++ "," {
text_taglist = $(".text_tag").val().split(","".text_tag").val("" ($(obj).val() != value &&".text_tag").val($(".text_tag").val() + value + ","
这里还仅仅只是 前台页面的显示。 ?我们在后台也要判断。 如果 这个标签 已经存在 这直接查询到 标签id ?如果不存在 先创建 标签 然后去标签id 和blog 关联。 我们在前台 做点小的动作,分割 文本框内的所有标签,如果存在 下面的 可选 标签 则为旧的标签 否则 是新的标签。我们在传入后台的时候 先进行下分类。这样就免去了 我们在后台处理。(我的原则是,非安全性问题,能在前台处理 就在前台处理。)? ? ?
oldtag = "",newtag = "" text_taglist = $(".text_tag").val().split(","<span style="color: #0000ff;">var chk_taglsit = <span style="color: #0000ff;">new<span style="color: #000000;"> Array();
$(".chk_tag").each(<span style="color: #0000ff;">function<span style="color: #000000;"> () { chk_taglsit[chk_taglsit.length] = $(<span style="color: #0000ff;">this<span style="color: #000000;">).val(); }); text_taglist.forEach(<span style="color: #0000ff;">function<span style="color: #000000;"> (value,index) { 文章分类? ?文章分类 我们就没有做 标签那么灵活了。标签 ?可以随意贴上去。但是 分类 一般都是先 固定好。就像 分类:我们都是中国人。标签:我们是程序员 ,明天可能又是测试员 大后天又能是美工、、没办法 所以 ?贴标签 ?就要灵活多了。 逻辑不复杂 操作当然也要简单。不就 是修改个值嘛,干嘛搞的那么 复杂。有的 ? 实现方式需要几个页面 跳来跳去的。 我的实现是 点击 修改 分类 直接变成 可编辑状态。编辑完成后 光标点击任意地方 就可以修改完成。 这样 ? 是不是 方便多了。 首先,我们点击编辑的时候 ?用一个 input 的 text 控件 替换原来的 a标签 ,并把值也传过来。当 text 失去交点时 ? 直接后台保存。并还原 为 a 标签状态。 这里 需要注意 重复点击 编辑 不能 让 再次替换。需要判断下。? ?
strhtml = "" chi = $(obj).parents(".divtitle_chi" (chi.find(".newtype").length <= 0".text_newtype" value = (!".newtype""@Url.RouteUrl("ControllerAction",new { controller = "Admin",action = "NewAddType" })""newtypename": value },
}
});
</span><span style="color: #0000ff;">var</span> newhtml = "<a>" + value + "</a>"<span style="color: #000000;">;
$(obj).parents(</span>".newtype").removeClass("newtype").addClass("divtitle_chi"<span style="color: #000000;">).html(newhtml);
} <span style="color: #008000;">//<span style="color: #008000;">修改 文章 类型<span style="color: #0000ff;">function<span style="color: #000000;"> edittype(obj) { $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur"<span style="color: #000000;">); <span style="color: #0000ff;">if (!$(obj).next().hasClass("newtype"<span style="color: #000000;">)) { <span style="color: #0000ff;">var value = $(obj).next().html().trim();<span style="color: #008000;">//<span style="color: #008000;">取得 文章类型 名称 <span style="color: #0000ff;">var typeid = $(obj).find(".hid_typeid").val(); <span style="color: #008000;">//<span style="color: #008000;">取得 文章类型id onblur='edittype_onblur(this);' <span style="color: #0000ff;">var strhtml = ""<span style="color: #000000;">; $(obj).next().css("display","none"); <span style="color: #008000;">//<span style="color: #008000;"> 隐藏原来显示的文章类型 $(obj).after(strhtml).next().find(".text_newtype").focus().bind("blur",<span style="color: #0000ff;">function<span style="color: #000000;"> () { edittype_onblur($(obj).parents(".divtitle_chi").find(".text_newtype"<span style="color: #000000;">)); }); <span style="color: #008000;">//<span style="color: #008000;">把 修改的文本元素添加 并获得焦点 <span style="color: #000000;"> } <span style="color: #0000ff;">else<span style="color: #000000;"> { edittype_onblur($(obj).after(strhtml).next().find(".text_newtype"<span style="color: #000000;">)); } } <span style="color: #008000;">//<span style="color: #008000;">鼠标移到目标的上方 <span style="color: #0000ff;">function<span style="color: #000000;"> editover(obj) { $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur"<span style="color: #000000;">); <span style="color: #008000;">//<span style="color: #008000;">$(".testmess").html("unbind"); <span style="color: #000000;">} <span style="color: #008000;">//<span style="color: #008000;">鼠标在目标的上方移动 <span style="color: #0000ff;">function<span style="color: #000000;"> editmove(obj) { $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur"<span style="color: #000000;">); } <span style="color: #008000;">//<span style="color: #008000;">鼠标移出目标的上方 <span style="color: #0000ff;">function<span style="color: #000000;"> editout(obj) { <span style="color: #008000;">//<span style="color: #008000;">$(".testmess").html("bind"); $(obj).parents(".divtitle_chi").find(".text_newtype").unbind("blur"<span style="color: #000000;">); $(obj).parents(".divtitle_chi").find(".text_newtype").bind("blur",<span style="color: #0000ff;">function<span style="color: #000000;"> () { <span style="color: #008000;">//<span style="color: #008000;"> $(".testmess").html("bind"); edittype_onblur($(obj).parents(".divtitle_chi").find(".text_newtype"<span style="color: #000000;">)); }); } <span style="color: #0000ff;">function<span style="color: #000000;"> edittype_onblur(obj) { 最后看看效果图: 总结关于发布,其实要说的东西也不多。无非就是 用个富文本编辑器 ? 编写好内容 ? 然后 更新到数据库。然后 在更新的 时候 ?需要填写 标签 ?和 选择分类。 这里还有一点 需要主要。asp.net 默认 ?是不允许 提交 标签文本到服务器的。所以 ?我们这里 ?需要关闭 默认的 安全 验证。 1.后台 访问的 action 方法上 ?打上??)]?的特性标签。 2.在配置文件 配置(我用的是MVC是4.0 貌似必须要在配置文件配置)
?? ? ? ??
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |
- asp.net-mvc – ACS安装,但MVC 4.0应用程序仍然重定向,无法
- asp.net – 有没有一种简单的方法可以向DataBound DropDown
- 如何从ASP.NET Web API方法中查找声明的内容?
- asp.net-mvc – ASP.Net MVC自定义模型绑定说明
- asp.net-mvc – 上传图片的缩略图创建
- asp.net – 按钮点击后如何启动另一个aspx网页?
- ASP.Net:货币表达式的评估格式
- asp.net – 在MVC5应用程序中使用OWIN软件包的好处
- asp.net – 为什么我的主机(softsyshosting.com)不支持Begi
- asp.net-mvc-4 – MVC 4 – 从视图中的Controller -Show返回
- ASP.NET(MVC)Outputcache和并发请求
- 用例子看ASP.NET Core Identity是什么?
- 三种属性操作性能比较:PropertyInfo + Expressi
- asp.net – 单击GridView行上的任意位置以进入编
- asp.net-mvc – 如何在mvc4的cshtml视图页面中的
- asp.net-mvc-3 – .Net Mvc 3触发器(提交按钮除外
- 在ASP.NET MVC中使用HttpContext.Current.Sessio
- asp.net – MathJax – 文件无法加载:/extensio
- asp.net-mvc – 在Html.BeginForm()中使用RouteV
- asp.net-mvc-5 – OWIN和IIS集成的内部