Asp. NET Integrated Baidu editor Ueditor

This article explains how to integrate Baidu Editor in ASP.net Ueditor method and specific step, very detailed, there is a need for small partners to refer to.

0.ueditor Introduction

Ueditor is developed by Baidu Web front-end Research and Development Department of the WYSIWYG Open source Rich text editor, with lightweight, customizable, excellent user experience and so on. Open source based on the BSD protocol, all source code can be freely modified and used within the scope of the agreement.

Ueditor Official website: http://ueditor.baidu.com/website/index.html

Ueditor Official document Address: http://fex.baidu.com/ueditor/

1. Import the Ueditor package into the project

Unpack the development packages downloaded from the official web and include them in the project

(Note: The latest code needs to be based on. NETFramework4 above)

After extracting the contents of the file below:

Index.html is a sample file that can be deleted, Ueditor.config.js is a set of rich-text editors, do not recommend changes, can be referenced in the page settings, if all pages need to be set can be written in a JS file, dialogs is in the text box to click the button to use some pop-up box effect, Lang folder is the language-related settings, At present only in Chinese and English, themes folder is some style, Third-party folder is some Third-party plug-ins, there are code highlighting, screenshots and so on

I created a new ueditorhelper.js file in my project, defined some Ueditor common methods in the file, and some settings for Ueditor

In the net directory, we only retain controller.ashx and Config.json, while copying the code in App_Code into the project's App_Code. Add a reference to the Json.NET assembly in the bin directory, Config.json file defines settings, some requirements for uploading files, and paths to upload to the server, and you can see in Web.config files that the project framework should be at least 4.0

2. Add a JS reference to the page, refer to the page

Add Zh-cn.js file is to set the language to prevent automatic recognition of language errors resulting in language adaptation errors, Ueditorhelper.js file is a number of common methods and editor settings of the package, view the index.html source code, in which there is a section of JS code

Some methods are used in the custom ueditorhelper.js file, and the first line of code is modified to make the Ueditor Rich Text editor settings

3. Page initialization

Add the following code where you want the rich text editor to be added:

　　

4. When editing content, the page is loaded (Ajax loading content)

Because the rich text editor just generates a piece of HTML code, we need to use AJAX dynamic loading content, compared to CKEditor, this is a more troublesome place, using CKEditor can directly use packaged server-side controls, Of course, you can use AJAX to dynamically load content without using server-side controls.

First in the page load to get the news ID, and then the AJAX query, query news encapsulated in a handler, to this handler to launch an AJAX request, request parameters for the news ID, get the news, get the news, the content set to the Ueditor

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 The

//Instantiate editor//It is recommended that you use the factory method Geteditor to create and reference an editor instance, and if you reference the editor under a closure, call Ue.geteditor (' editor ') directly to get the relevant instance var UE = Ue.geteditor (' Editor ', {autoheightenabled:false}); function Isfocus (e) {alert (Ue.geteditor (' Editor '). Isfocus ()); UE.dom.domUtils.preventDefault (e)} function Setblur (e) {ue.geteditor (' editor '). blur (); UE.dom.domUtils.preventDefault (e)} function inserthtml () {var value = prompt (' Insert HTML code ', '); Ue.geteditor (' editor '). ExecCommand (' inserthtml ', Value)} function Createeditor () {ue.geteditor (' Editor ');} function Getallhtml () {return ue.geteditor (' editor '). getallhtml (), function getcontent () {return ue.geteditor (' editor '). GetContent (); function Getplaintxt () {return ue.geteditor (' editor '). Getplaintxt ();} function SetcoNtent (isappendto) {ue.geteditor (' editor '). SetContent (', isappendto);} function GetText () {//the editing area has lost focus when you click the button, If you use GetText directly, you will not get the content, so select it back and get the content var range = ue.geteditor (' editor '). Selection.getrange (); Range.Select (); return Ue.geteditor (' editor '). Selection.gettext (); function Getcontenttxt () {return ue.geteditor (' editor '). Getcontenttxt ();} function Hascontent () {return ue.geteditor (' editor '). Hascontents (); function SetFocus () {ue.geteditor (' editor '). focus ();} function Deleteeditor () {ue.geteditor (' editor '). Destroy ();} f Unction Getlocaldata () {Alert (Ue.geteditor (' Editor '). ExecCommand ("Getlocaldata"));} function Clearlocaldata () { Ue.geteditor (' editor '). ExecCommand ("Clearlocaldata"); Alert ("Empty draft box")}

The above is the entire contents of this article, I hope you can enjoy.