CKEditor Custom button insert server image, ckeditor Server

CKEditor Custom button insert server image, ckeditor Server

CKEditor Rich Text Editor is easy to use and has powerful functions. It is more convenient to add CKFinder that supports server-side Image Upload,

Recently, CKFinder has found many problems. For example, when uploading images, Images cannot be sorted in descending order of time. In addition, CKFinder charges fees, so I want to implement a simple function similar to CKFinder,

This section only describes how to insert a server image plug-in CKEditor.

CKEditor version # CKEditor 4.4.4

 

1. Define plug-ins

1. In the ckeditor \ plugins folder, create a new serverimg folder,

2. Create a plugin. js file under serverimg,

CKEDITOR. plugins. add ("serverimg", {requires: ["dialog"], lang: ["en"], init: function (editor) {editor. addCommand ("serverimg", new CKEDITOR. dialogCommand ("serverimg"); editor. ui. addButton ("serverimg", {label: "insert server image", command: "serverimg", icon: this. path + "images/pic.png", toolbar: 'insert'}); CKEDITOR. dialog. add ("serverimg", this. path + "dialogs/code. js ");}});

　　

3.create an image under serverimgand Save the image pic.png used by the image icon.

 

 

2. Define the dialog box content in the plug-in

1. Create a dialogs folder in serverimg,

2. In the dialogs file, create code. js (the js code example and picpreview.html used for executing the pop-up dialog box (used to browse server images) respectively)

3. The code. js code is as follows:

 

CKEDITOR. dialog. add ("serverimg", function (editor) {var timestamp = Math. round (new Date (). getTime ()/1000); var ckeditorPage = '.. /.. /ImgMgr/ImgBrowser. aspx? From = ckeditor & timestamp = '+ timestamp; return {title: "insert code", minWidth: 800, minHeight: 600, contents: [{id: "tab1", label: "", title: "", expand: true, padding: 0, elements: [{type: "html", html: "<iframe id = 'img _ browser 'name = 'img _ browser 'src = '" + ckeditorPage + "'> </iframe>", style: "width: 100%; height: 600px; padding: 0; "// style = 'width: 800px; height: 600px '}], onOk: function () {// insert Rich Text Encoding Editor content window. frames ["img_browser" cmd.doc ument. getElementById ("hf_imgsrc"); // var hf = cmdument. getElementById ("hf_imgsrc"); if (hf! = Null) {var imgSrc = hf. value; editor. insertHtml ("
4. note: Because I inserted an iframe in the pop-up dialog box, src is a page where I made a Browser Server image. After the image is selected, click OK in the dialog box, you can get the image path,
It is finally packaged as an img and inserted into the Rich Text Editor. Of course you can do better. You can set the width and height of the image. I will not talk about it here.
 
Third, configure the plug-in
After the above plug-in is developed, the page does not show the plug-in we developed. You also need to configure config. js
Find config. js under the ckeditor file to open
Add
Config. extraPlugins = 'serverimg ';
Fourth, Final Results