Configure CKFinder and ckeditorckfinder In the MVC Rich Text Editor.

Configure CKFinder and ckeditorckfinder In the MVC Rich Text Editor.

Use of Rich Text Editor CKEditor

Rich Text Editor CKEditor configuration CKFinder

Because the website needs to achieve mixed uploading of images and text, so I found the Rich Text Editor plug-in on the Internet and found that CKEditor is a good plug-in.

I used 4.5.1This version is really useful, but it references JsFile. The Rich Text Editor can be implemented through the above steps. However, by clicking the image upload function, only the url upload function is available, and images cannot be uploaded locally. Baidu finds that the security problem is caused. CKEditorNo upload function. Only CKFinder can be installed to implement the upload function. Ckfinder _Aspnet2.5.0.1, Reference JS files like CKEditor (as long as ckfinder. js is referenced)

     <script src="ckfinder/ckfinder.js" type="text/javascript"></script>

• Because my MVC website is based on. net4.5, there is an asp.net website instance in the official package._ SourceIn the folder, there is a sample Website Based on. net2, and the website cannot be found once it is run.System. Web. UI. DesignThis namespace error, so I excluded it from the project, and putCKFinder. dllCopy it and reference it to my own project.

Configure CKEditorTo make CKFinder reference. In the CKEditor folder, add the following code to config. js in CKEDITOR. editorConfig = function (config:

Config. filebrowserImageBrowseUrl = 'ckfinder/ckfinder.html? Type = Images '; config. filebrowserFlashBrowseUrl = 'ckfinder/ckfinder.html? Type = Flash '; config. filebrowserUploadUrl = 'ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Files '; config. filebrowserImageUploadUrl = 'ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Images '; config. filebrowserFlashUploadUrl = 'ckfinder/core/connector/aspx/connector. aspx? Command = QuickUpload & type = Flash '; config. filebrowser1_wwidth = '000000'; // set the size of config. filebrowser1_wheight = '000000' in the "Browse server" dialog box ';

Note that When configuring the Url, You need to modify it to the file path relative to the local website disk of the website, for example, your website is a http://example.com.cn, you put the ckfinder folder in the Editor folder under Admin, then all URLs should be changed to the following similar format
config.filebrowserImageBrowseUrl ='/Admin/Editor/ckfinder/ckfinder.html?Type=Images';

Otherwise, a 404 error will be reported. The last step is to modify a function so that everyone can see the files in the uploaded folder on the server. In the cofig. ascx file under the ckfinder folder, find the CheckAuthentication function and change the return value to true.

Of course, if you want to modify the address of the uploaded file, you can find the SetConfig () method in the above method, find the BaseUrl, and modify the address you want to upload,

PS: I am debugging in VS. Because VS's IIS does not allow access to the route address of the disk file during debugging, CKFinder passes Ckfinder.htmlThis html is used to upload images. However, when debugging, VS cannot access this file. Therefore, 404 error is reported. You can modify IIS to allow IIS to access disk files. The steps are as follows: if you use MVC to pass values in a form, you must add [ValidateInput (false)]Attribute. If this is not the case, the following error will be reported.

"/" Indicates a server error in the application. A potentially dangerous Request. Form value is detected from the client (content = "<p> sdfsdafwewo shdfh.