Using asp.net mvc+bootstrap to build personal blog repair Ueditor edit bug (iv) _ Practical skills

My personal blog station in the use of Baidu Rich Text editor Ueditor modify the article, encountered some problems, (I do not know is a bug, or I did not configure well). But finally found a solution, recorded here.

Small station first article list appears as (shows the first 600 characters after removing HTML tags): specific in www.zynblog.com

The problems encountered:

Normally, enter the article to modify the page, just ueditor corresponding textarea value set to the article content on the line: $ (' #editor '). Val (' @Html. Raw (this. model.contents) ');

I was doing it at first, everything was fine. I inserted a "code" (<pre> ***code***</pre>) format html! when I edited the article in the background. So again in the background click "Edit"-> jump to the edit page,

Ueditor is completely out of the show!!.

Original address in HTTP://WWW.ZYNBLOG.COM/ARCHIVES/INDEX/2

Initial guess is JS error, resulting in Ueditor rendering process error. Well, after debugging, I found this:

The code in the article is shown as <pre> format <pre> #include <stdio.h>int main () {<br> printf ("Hello world!"); <br> return 0;<br>}</pre>

Note that the line break inside is the text of the newline, so the foreground code is interpreted as follows:

We know that in the JS line, the default is a new statement of the beginning, the first line of code initalcontent assignment is a JS string, but only one left single quotation mark "'" (in <pre> before), missing the closing quote "'". At this time JS did not know what it is, he did not find separated the right single quotation mark. So client also can not go down, textarea ueditor effect of natural display does not come out.

　　Solution:

Yes, since Ueditor initialization requires a complete JS string, then we will serialize the content of the article into JSON, and then assign value to the sentimental Ueditor on the line (because JSON itself is a JS object, do not have to parse it and then assign value to the Ueditor), As a result, there is no line-wrapping problem.

Of course, there is another problem, is: C # JSS. Serialize () to parse a newline into \ n, and Ueditor will be \ R and \ n are parsed into a line, so that the original only one line of change into two lines. So we can solve this problem with the string substitution function before initializing. Such as:

Initialcontent=initialcontent.replace (/\\r\\n/g, ' \\n ');

To remove a repeat line when serializing Article.content:

Public ActionResult editarchive (int id)
{
Article Article = articleservice.getentity (ID);
JSON resolves the newline to \ n, and Ueditor \ R and \ n are parsed into newline.
//So the original only one line of change into two lines.
//So in the initialization of Baidu editor, with the JS string replacement can be
JavaScriptSerializer JSS = new JavaScriptSerializer ();
String json = JSS. Serialize (article.　　　　　　　Contents.replace ("\" "," "")); 
First of all, the article contents the content attribute of C # to "Escape to", so as to avoid the img src= "href=" caused (dual-escaped) effect.
//Remove the front and rear "" quotes in JSON,
JSON = json. Substring (1, JSON. LENGTH-2);
JSON encoded format <BR>: \u003cbr/\u003e
viewdata["json" = JSON;
Do the other things .....

When assigning values to textarea Ueditor:

var editor = new Baidu.editor.ui.Editor ({
ueditor_home_url: '/content_admin/ueditor/',//configuration Editor Path
Iframecssurl: '/content_admin/ueditor/themes/iframe.css ',//style path
initialcontent: ' Welcome to Ueditor ',//Initialize editor contents
autoheightenabled:true,//height automatic growth
minframeheight:500//minimum height
});
Editor.render (' editor '); Render (' selector ') Response ID
editor.ready (function () {
var content = ' @ViewData [' json '] ';//assign JSON to Ueditor
content = Content.replace (/\\r\\n/g, ' \\n ');
Editor.setcontent (content); This method will cause the style in the editor body, the picture and so on with path content escape "display error;
" After the "replace" in the C # string in the background, it is OK. Example: style= ' width:50px ' src= ';
};

So, once again, "edit the article", Ueditor is rendered out. But the problem is coming again!!! After this JSON, the edit area (body) picture/File Src= "", <a href= "" "" >, style= "", and so on the element with double quotes does not show! Continue to debug it, looking for a long time, found the problem is: After the article is taken out of the database, C # automatically escapes all "", "/" in the Content property string, and then the/",//" is escaped when it is JSON serialized, resulting in "Double escape", Therefore, all elements with "" and their properties display an error. Solution: Manually remove the first layer of escape before the background serialization:

The display is normal:

The above is a small series to introduce the use of ASP.net mvc+bootstrap build personal blog Repair Ueditor edit bug (iv), I hope to help you, if you have any questions please give me a message, small series will promptly reply to everyone. Here also thank you very much for the cloud Habitat Community website support!