In the Asp.net webform era, the HTML visual editor of the web system can use the Ftb-type controls and directly introduce the toolbox for dragging. However, in the Asp.net MVC era, direct use of server-side controls does not comply with MVC standards and constraints, and such problems may occur. Ueditor seems to be a good visual editor with Baidu's background support, open source, beautiful style, easy to customize ...... So I decided to use ueditor as a visual editing tool in my system, but because ueditor supports PHP, there is no suitable Asp.net MVC application instance. So I decided to transform ueditor to meet the needs of MVC.
First, download the uediotr. We recommend that you download the full version and instances for the first time. You can study them one by one. : Http://ueditor.baidu.com/download.html
Create a file in MVC, and then include all the files in the downloaded folder.
Again, we can create a test controller in Asp.net MVC. In its view, input and reference editor_config.js and editor_ui_all_min.js to reference ueditor.css under themesat the same time. Then
Enter the location of the edit box
<textarea id="editor"></textarea> <script type="text/javascript"> var editor = new baidu.editor.ui.Editor({ UEDITOR_HOME_URL: '/Uedit/', iframeCssUrl: '/Uedit/themes/default/iframe.css', initialContent: '', minFrameHeight: 550 }); editor.render('editor'); </script>
Note: ueditor_home_url: '/uedit /',
Iframecssurl: '/uedit/themes/default/iframe.css'. The two JSS lines are the directory where the ueditorsets and iframe.css are located. Then run. You can see that the basic ueditor looks like this already exists, but there is a problem with the Image Upload part.
Finally, modify the Image Upload part. Find \ uedit \ dialogs \ image. There are two PHP files in it. You can name these two PHP files as HTML files. We need to use upload.php.to modify them to upload.html, and modify the Code as follows:
<! Doctype html public "-// W3C // dtd html 4.01 Transitional // EN" "http://www.w3.org/TR/html4/loose.dtd">We need to upload the image to "/upload/uploadimage/". Therefore, we need to first create an upload controller and then create an uploadimage action. The specific C # code is as follows:
Public class uploadcontroller: controller {// get:/upload/[httpget] public actionresult upload () {string url = request. querystring ["url"]; If (url = NULL) {url = "" ;}viewdata ["url"] = URL; return view ();} [httppost] public actionresult uploadimage (httppostedfilebase filename) {// specific save code return view ();}}The code in view is as follows:
<! Doctype HTML public "-// W3C // dtd html 4.01 transitional // en" "http://www.w3.org/TR/html4/loose.dtd"> <HTML>
After running, we found that ueditor can be used normally in Asp.net.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
