Step by step to develop your own blog. NET version (4, article publishing function) Baidu Editor

Objective

The main features or features of this blog development:
First: can be compatible with each terminal, especially the mobile phone side.
Second: The time will use a lot of HTML5, dazzle ah.
Third: Import Blog The essence of the garden article, and do classification. (Don't seal me)
IV: Make a plugin, any technical articles on the site can be forwarded to the blog collection.

So I'm going to write a series: "Step by step, build your own blog."

One or one steps to develop your own blog. NET version (1, page layout, blog migration, data loading)

Two or one steps to develop your own blog. NET version (2, comment function)

Three or one steps to develop your own blog. NET version (3, sign-in function)

Four or one steps to develop your own blog. NET version (4, article publishing feature)

Five or one steps to develop your own blog. NET version (5, search function)

Six or one steps to develop your own blog. NET version (6, mobile-compatible)

Demo Address: http://blog.haojima.net/group within the shared Source: 469075305

Blog to do the basic functions here have been rough finished. Sign up, sign in, post, comment, blog migration. During this time, it was almost a function of one weeks. Say one weeks, in fact, two days on weekends. Ghosts don't get up before dawn and toss, do it is two days do not move. To tell the truth, really tired. However, it is gratifying that the basic functions have come out.

Today records the implementation of the article release function.

To publish, you have to have a rich text editor first. I don't know any of the other editors. I heard that Baidu is also good, a little research under.

Baidu Editor

Official website: http://ueditor.baidu.com/website/: http://ueditor.baidu.com/website/download.html

I'm using the development version here.

It's very simple to use in your own project, but here are a few things to keep in mind. The following is a question record.

1. Question:

First I used the. NET 4.5, put the Ubuilder directly inside the project, run an error. Didn't look at what was wrong with the newspaper.

Workaround: I deleted the directory Net->bin folder directly. (may be a version issue)

2. Question:

We can see the following APIs from our demo address on the http://ueditor.baidu.com/website/umeditor.html website.

We have no problem getting the HTML content in Ubuilder via getallhtml (). The prompt editor is empty when loading content through setcontent.

Workaround: Assign a value when the page load is complete.

//when the page load is complete$(function () {        varHTML = $ (". Hidden_data")). Val (); //Custom Editor configuration item, where the configuration item defined here overrides the configuration with the same name in Editor_config.js        varEditoroption ={autoclearinitialcontent:true, elementpathenabled:true        }; varEditor_a =NewBaidu.editor.ui.Editor (editoroption); Editor_a.render (' Editor '); Editor_a.ready (function() {editor_a.setcontent (HTML,false);//assign a value to Ueditor        }); });

3. Question:

The published code style is not highlighted.

Workaround: Page loading is done by executing the highlight plugin.

$ (function () {        syntaxhighlighter.highlight ();    });

4. Question:

Image upload display failed. (because the path was changed)

Workaround: Directory Net->config.json open the configuration file. "Imageurlprefix": "/ueditor/net/",/* Image access Path prefix * /change to Ubuilder to the absolute path of the project as mine is placed in the folder plug "Imageurlprefix": " /plug/ueditor/net/",/* Picture access Path prefix * /

5. Question:

This is not a problem, is that we are not professional video site, generally do not allow the screen.

WORKAROUND: You can configure the format and size of the upload file.

Basically I did the processing. Here's another problem: the code that we copied in the Ubuilder will automatically remove the div and the style. So, like I directly migrated Blog Park article content, if the Ubuilder open in the save code will not have a highlight format and chaos. (this point is more pit).

Label

When we publish articles, we often need tags and classifications. Here the most basic functions can not be saved.

Take the diagram as an example. There are two ways to enter a label. First: Enter the comma-delimited text box directly. The second type: tick the check box.

Seemingly simple function, in fact, not simple.

First we can select the label by ticking the checkbox, then we can delete the selected label by canceling the check box. How does that make it?

When selected, first determine whether the best character in the text box is not, if we do not select the first time to add a comma and then accumulate our selected check box amount value.

When deselected, we first divide the string in the text box with a comma, and then delete it if there are any tags we want to cancel.

That's a lot of code, actually. There are not many implementations.

//When you click the tag tagfunctionClik_tag (obj) {if($ (obj). Is (": Checked")) {//If you select        varTextTag = $ (". Text_tag"); if(Texttag.val (). length > 1 && texttag.val () [Texttag.val (). length-1]! = ",") {Texttag.val (Texttag.val ()+ ","); }        varText_tag = Texttag.val () +$ (obj). val (); Texttag.val (Text_tag+ ","); }    Else{//If you uncheck        varText_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 + ",");    }); }}

This is just the display of the front page. We also have to judge in the background. If this tag already exists this direct query to the tag ID if it does not exist first create the label then go to tag ID and blog Association.

We do a little action at the front desk, split all the tags in the text box, if there is an optional tag, then the old tag is the new label. We classify the background in the first place. This frees us from working in the background. (My principle is that non-security issues can be handled at the foreground in front of the foreground.) ）

//the selected labelvarOldtag = "", Newtag = "";varText_taglist = $ (". Text_tag"). Val (). Split (",");varChk_taglsit =NewArray (); $ (". 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 + ","; }});

Article categories

Article categories we're not as flexible as labels. Labels can be posted on the go. But the classification is usually fixed first. Just like the classification: we are all Chinese. Tags: we are programmers, tomorrow may be a tester and the next day can be art, and no way so stickers will be more flexible.

Logic is not a complex operation, of course, it should be simple. It's just a change of the value, why it's so complicated. Some implementations require several pages to jump and jump. My implementation is to click to modify the classification directly into an editable state. After editing the cursor click anywhere you can modify the completion. It's not much more convenient.

First, we click Edit to replace the original a tag with a text control of input and pass the value over. The text is stored directly in the background when it loses its intersection. and revert to the A-label state.

It is important to note that repeated click edits cannot be replaced again. Need to be judged.

//New TypefunctionAddnewtype (obj) {varstrhtml = "<div class= ' Newtype ' ><input type= ' text ' class= ' text_newtype ' onblur= ' Newtype_onblur (this); ' /></div> "; varChi = $ (obj). Parents (". Divtitle_chi"); if(Chi.find (". Newtype"). Length <= 0) {chi.append (strhtml). Find (". Text_newtype"). focus (); }}functionNewtype_onblur (obj) {varValue =$ (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)) {}}); varnewhtml = "<a>" + value + "</a>"; $ (obj). Parents (". Newtype"). Removeclass ("Newtype"). AddClass ("Divtitle_chi").). HTML (newhtml);}//Modify Article TypefunctionEditType (obj) {$ (obj). Parents (". Divtitle_chi"). Find (". Text_newtype"). Unbind ("Blur").); if(!$ (obj). Next (). Hasclass ("Newtype")) {        varValue = $ (obj). Next (). html (). Trim ();//get the article type name        vartypeID = $ (obj). Find (". Hid_typeid"). Val ();//get the article type ID onblur= ' Edittype_onblur (this); '        varstrhtml = "<div style= ' float:left ' class= ' Newtype ' ><input type= ' text ' class= ' text_newtype ' value= '" + Value + "' Keyvalue= "+ value +" ' keyid= ' "+ typeid +" '/></div> "; $ (obj). Next (). CSS ("Display", "none");//hide the previously displayed article type$ (obj). After (strHTML). Next (). Find (". Text_newtype"). focus (). Bind ("Blur",function() {Edittype_onblur (obj). Parents (". Divtitle_chi"). Find (". Text_newtype")));  }); //Add the modified text element and get the focus    }    Else{edittype_onblur (obj). After (strHTML). Next (). Find (". Text_newtype")); }}//move the mouse over the targetfunctioneditover (obj) {$ (obj). Parents (". Divtitle_chi"). Find (". Text_newtype"). Unbind ("Blur").); //$ (". Testmess"). HTML ("unbind");}//The mouse moves above the targetfunctionEditmove (obj) {$ (obj). Parents (". Divtitle_chi"). Find (". Text_newtype"). Unbind ("Blur").);}//move the mouse over the targetfunctioneditout (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")); });}functionEdittype_onblur (obj) {varValue = $ (obj). val (). Trim ();//new type of article    vartypeID = $ (obj). attr ("keyID"). Trim ();//type ID    varOldValue = $ (obj). attr ("KeyValue"). Trim ();//the old article type    if(!value | |!typeid | | value = = oldvalue) {//1. If the value is null 2. If the type ID is null 3. If there is no modification, return directly$ (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 (); varnewhtml = "<a>" + value + "</a>"; varNewtype = $ (obj). Parents (". Newtype") Newtype.after (newhtml);        Newtype.remove (); }        Else{$ (obj). Parents (". Newtype"). Next (). CSS ("Display", "" "); $ (obj). Parents (". Newtype"). Remove (); }    });

View Code

Finally look at:

Summarize

In fact, there are not many things to say about publishing. Just write the content with a rich text editor and update to the database. Then you need to fill in the tags and select categories when updating.

Here's another point that needs to be major. ASP. NET default is not to allow the submission of label text to the server. So we need to turn off the default security verification here.

1. The property label of [ValidateInput (false)] is played on the action method of the background access.

2. In profile configuration (I use MVC is 4.0 seems to have to be configured in configuration file)

<><requestvalidationmode= "2.0"  > </  >

Demo Address: HTTP://BLOG.HAOJIMA.NET/ADMIN/RELEASE/7 (requires sign-in status to publish)

If you are interested in this article, then trouble you to a praise, your encouragement will be my motivation. Of course you can also join QQ group: discussion.

If you have a better way of dealing with it, hope not to be stingy.

This article link: http://www.cnblogs.com/zhaopei/p/4770340.html

To develop your own blog. NET version (4, article publishing function) Baidu Editor