Ueditor Basic Use

Thank you for the help of my rookie, this is the first time I use. NET to do Web sites. Here to recommend to everyone a Baidu free text editor Ueditor, is the. NET version of the http://ueditor.baidu.com/website/index.html can be downloaded. The official web site also has a simple tutorial, watching the pain of a painful egg.

Then I spent a lot of time studying the usage of it in Data control, the Masters do not laughed at Ah, it is my own experiment: the following:

Deployment notes:

1, copy the source package dialogs, themes, net, Third-party, Editor_all.js and Editor_config.js to the Ueditor folder.

2. Set the absolute path in the Editor_config.js in the Ueditor folder:
Put
URL = window. ueditor_home_url| | Tmp.substr (0,tmp.lastindexof ("/") +1). Replace ("_examples/", "" "). Replace (" website/"," "");
Change into
Url= window. ueditor_home_url| | " /ueditor/";


3, add the file head, pay attention to the order of the wrong:
<script type= "Text/javascript" src= "/ueditor/editor_config.js" ></script>
<script type= "Text/javascript" src= "/ueditor/editor_all.js" ></script>
<link rel= "stylesheet" href= "/ueditor/themes/default/ueditor.css" >


4, join the entity, where Div or textarea is an instance, script is a reference statement.
<div id= "Myeditor" style= "width:800px;" ></div>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render ("Myeditor");
</script>

You can add the Name property to the DIV or textarea to change the value of the variable name, overriding the default variable name, and referencing multiple instances on one page, as follows:

<textarea id= "Myeditor" style= "width:800px;" Name= "mycontent" ></textarea>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render ("Myeditor");
</script>


5. Pass the value to the database:
The default value variable is Editorvalue, which can be changed in the Editor_config.js file textarea: later.

If not placed in the control: the backend can be obtained with request.form["Editorvalue", this value can only be extracted by a button with the Submit function.

To implement the Insert function with the FormView control:
① in <InsertItemTemplate> <asp:textbox text= ' <%# Bind ("newscontent")%> ' ... What is replaced by:
<textarea id= "Myeditor" style= "width:800px;" ></textarea>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render ("Myeditor");
</script>

② at the bottom of <InsertItemTemplate>, be sure to put <asp:linkbutton ... The Submit button is replaced with <asp:button id= "Insertbutton" runat= "Server" Commandname= "Insert" text= "OK new"/>

③ in the <InsertParameters> in the data source <asp:sqldatasource of the FormView:
Change <asp:parameter name= "newscontent" type= "String"/> to <asp:formparameter formfield= "Editorvalue" Name= " Newscontent "type=" String "/>

To implement the Insert function with the ListView control:
① in <InsertItemTemplate> <asp:textbox text= ' <%# Bind ("newscontent")%> ' ... What is replaced by:
<textarea id= "MyEditor1" name= "Inserteditorvalue" style= "width:800px;" ></textarea>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render ("MyEditor1");
</script>
Key points: TextArea be sure to add the name attribute to prevent collisions with the value-passing parameter in the Edit module;
The ID of the textarea also differs from the edit module, but is consistent with the ID of render (".

② in the <InsertParameters> in the data source <asp:sqldatasource in this listview:
Change <asp:parameter name= "newscontent" type= "String"/> to <asp:formparameter formfield= "Inserteditorvalue" Name = "Newscontent" type= "String"/>

Use the ListView control to implement editing features:
① first to open the Ueditor directory under the Editor_config.js file, settings, autoclearinitialcontent:false or a little mouse content disappears.

② in <EditItemTemplate> <asp:textbox text= ' <%# Bind ("newscontent")%> ' ... What is replaced by:
<textarea id= "MyEditor2" name= "Editeditorvalue" style= "width:800px;" ><asp:label id= "Label1" runat= "server" text= ' <%# Eval ("newscontent")%> ' ></asp:label></ Textarea>
<script type= "Text/javascript" >
var editor = new Baidu.editor.ui.Editor ();
Editor.render ("MyEditor2");
</script>

③ in the <UpdateParameters> in the data source <asp:sqldatasource in this listview:
Change <asp:parameter name= "newscontent" type= "String"/> to <asp:formparameter formfield= "Editeditorvalue" Name= " Newscontent "type=" String "/>



6, common problems to solve:
Image upload not successful?
Since the latest. NET 1.2.1.0 version that is currently available is the. NET Framework 4.0, so if in your project it is the. NET Framework 3.5
Please make the following changes:
Delete the official. Net/web.config, (only with the VS auto-generated web. config)
There's no problem with that.
or modify your website. NET version: Right-click the Web site root folder of Solution Explorer, select "Property Pages", and change the "Build" tab.

Ueditor Base Use