ASP. NET integrated into a hundred degree editor UEditor

ASP. NET integrated into a hundred degree editor UEditor

This article explains how to integrate the UEditor method and specific steps in ASP. NET. It is very detailed. If you need it, you can refer to it.

0. ueditor Introduction

UEditor is a WYSIWYG open-source Rich Text Editor developed by Baidu WEB Front-end R & D department. It features lightweight, customizable, and excellent user experience. Open source is based on the BSD Protocol, and all source code can be freely modified and used within the range permitted by the Protocol.

UEditor Official Website: http://ueditor.baidu.com/website/index.html

UEditor official documentation address: http://fex.baidu.com/ueditor/

1. Import the ueditor package to the Project

Decompress the Development Kit downloaded from the official website and include it in the project.

(Note: The latest code is based on. NETFramework4 or above)

After decompression, the files in the directory are as follows:

Index.html is a sample file that can be deleted, ueditor. config. in js, there are some rich text editor settings. We recommend that you do not modify them. You can set them When referencing them on the page. If you need to set all pages, you can write them in a js file, dialogs is a pop-up box that is used when you click a button in the text box. The lang folder contains language-related settings. Currently, only Chinese and English are supported. The themes folder contains some styles, the third-party folder contains third-party plug-ins, including code highlighting and screenshots.

I created a ueditorHelper. js file in my project, defined some common ueditor methods, and some ueditor settings.

In the net directory, we only keep the controller. ashx and config. json. At the same time, copy the code in App_Code to the App_Code in the project, and add the Json under the bin directory. NET Assembly reference, config. the json file defines some settings, some requirements for configuring the file to be uploaded and the path to the server for storage. in the config file, we can see that the project framework should be at least 4.0

2. Add a js reference to the page and reference it on the page.

Pipeline source code, in which there is a piece of js Code

Some methods are used in the Custom UEditorHelper. js file, and the first line of code is modified to set the ueditor Rich Text Editor.

3. Page Initialization

Add the following code to add a Rich Text Editor:

　　

4. page loading when editing content (ajax loading content)

Because the Rich Text Editor only generates a piece of html code, we need to use Ajax to dynamically load the content. Compared with CKEditor, this is a relatively troublesome issue. Using CKEditor, we can directly use encapsulated server-side controls, of course, you can use Ajax to dynamically load content without using server-side controls.

First, get the news id when loading the page, and then perform ajax query. The query news is encapsulated in a handler and an ajax request is sent to the handler. The request parameter is the news id, obtain the news. After obtaining the news, set the news content to ueditor.

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55

// Instantiate the editor // We recommend that you use the factory method getEditor to create and reference an editor instance. If you reference this editor under a closure, you can directly call UE. getEditor ('editor') to obtain 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'cmd.exe cCommand ('insertml', 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 (){ // When you click the button, the editing area has lost the focus. If you use getText directly, the content will not be obtained. Therefore, you must select it and then obtain 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 (); } Function getLocalData (){ Alert(ue.geteditor('editor'cmd.exe cCommand ("getlocaldata ")); } Function clearLocalData (){ Ue.geteditor('editor'cmd.exe cCommand ("clearlocaldata "); Alert ("draft box cleared ") }

The above is all the content of this article. I hope you will like it.