Use ASP. net mvc + Bootstrap to build a personal blog to fix UEditor editing Bug (4) and mvcueditor

Use ASP. net mvc + Bootstrap to build a personal blog to fix UEditor editing Bug (4) and mvcueditor

My personal blog encountered some problems when I used the Baidu Rich Text Editor UEditor to modify the article (I don't know if it was a bug or I didn't configure it ). However, the solution is finally found and recorded here.

The article list on the homepage of the website is displayed as (the first 600 characters After HTML tags are removed ):

Problems:

Normally, on the article modification page, you only need to set the textarea value corresponding to UEditor to the article Content: $ ('# editor '). val ('@ Html. raw (this. model. contents )');

This is what I did at the beginning, and everything works normally. I inserted a "code" (<pre> (*** code *** </pre>) When I edited the article in the background) html format! So when you click "edit"-> "edit" in the background to jump to the editing page,

UEditor is not displayed at all !!.

Original address in http://www.zynblog.com/Archives/Index/2

The preliminary guess is that the js error caused the UEditor rendering process to fail. Okay, this is found after debugging:

The code in this article is displayed in the <pre> Format <pre> # include <stdio. h> int main () {<br> printf ("hello world! "); <Br> return 0; <br >}</pre>

Note that the line feed is the text representation of line feed \ n, so that the front-end Code is interpreted as follows:

We know that the line feed in js is the start of a new statement by default. The first line of the code above, initalContent, is assigned a js string, however, there is only one left single quotation mark ('"before <pre>), and the right quotation mark"' "is missing "'". At this time, js does not know what this is, and he does not find the separated right single quotes. So the client cannot run, and the UEditor Effect of textarea cannot be displayed.

　　Solution:

Yes, since UEditor requires a complete js string for initialization, We Will serialize the article content to json, assign another value to the sensitive UEditor (because json itself is an object of js, and do not assign it to UEditor after parsing ), in this way, there will be no problem of line breaks and no line breaks.

Of course, there is another problem: jss in C. serialize () parses a line feed into \ n, while UEditor parses both \ r and \ n into a line feed. In this way, only one line feed is changed to two line breaks. So we can use the string replacement function to solve this problem before initialization. For example:

InitialContent = initialContent. replace (// \ r \ n/g, '\ n ');

Remove repeated line breaks when serializing Article. Content:

Public ActionResult EditArchive (int id) {Article article = articleService. getEntity (id); // json parses the line feed into \ n, while UEditor parses both \ r and \ n into a line feed. // In this way, only one line feed is changed to two line breaks. // Before initializing the Baidu editor, you can replace the javascript string with JavaScriptSerializer jss = new JavaScriptSerializer (); string json = jss. serialize (article. contents. replace ("\" "," '"); // first, Replace the C # pair in the Contents content attribute '; to avoid the impact on img src = "" href = "" (double escape. // Remove the quotation marks ("") at the beginning and end of json, json = json. substring (1, json. length-2); // json encoded format <br>: \ u003cbr/\ u003eViewData ["json"] = json; * *** do other things ............}

When you assign a value to textarea UEditor:

Var editor = new baidu. editor. ui. editor ({UEDITOR_HOME_URL: '/Content_Admin/ueditor/', // configure the Editor path iframeCssUrl: '/Content_Admin/ueditor/themes/iframe.css', // The style path initialContent: 'Welcome to ueditor', // initialize the editor content autoHeightEnabled: true, // height automatically increases minFrameHeight: 500 // minimum height}); editor. render ('editor'); // render ('selector ') returns the ideditor. ready (function () {var content = '@ ViewData ["json"]'; // assign jsoncontent = content to UEditor . Replace (// \ r \ n/g, '\ n'); editor. setContent (content); // This method will cause the style, image, and other content escape with path in the editor body to "Display error; // In the background, replace \ "in the C # string. Example: style = 'width: 50px 'src = '';}); // UE. getEditor ('editor'). getContentTxt () obtain the plain text format of the editor content

In this way, click "Edit article" again and the UEditor will render it. But the problem is coming again !!! After the json file is uploaded, edit the region (body) the image/file src = "", <a href = "">, style = "", and other elements with double quotation marks are not displayed! Continue debugging. After searching for half a day, I found the problem: After the background extracts the article from the database, C # automatically escapes all "And/In the Content attribute string, and then escapes/" and // In JSON serialization, this leads to "double escaping". Therefore, all elements with "" and their attributes are incorrectly displayed. Solution: manually remove the first escape before serialization in the background:

string json = jss.Serialize(article.Contents.Replace("\"", " '")); 

The display is normal:

The above section describes the use of ASP. net mvc + Bootstrap build a personal blog fix UEditor Bug (4), hope to help you, if you have any questions, please leave a message, xiaobian will reply to you in a timely manner. Thank you very much for your support for the help House website!