Ckeditor3.6.2 copy word and WPS Image Upload

 

This function has been studied for a long time. It is easy to use ActiveX plug-ins written in C #. The server can also directly write data to folders, however, the client must install the framework, which is unrealistic for the customer.

Later, I studied how to use C ++ to implement ActiveX, upload post files to the server URL, and then accept post files. I was not familiar with C ++ for a long time, maybe I still don't use C ++, but Google and Baidu haven't found the correct solution.

Finally, the ActiveX implemented with dephi is implemented in a very simple way. Less than 20 lines of code are written by colleagues, so we respect dephi and the client does not have to install the environment, then, sign the OCX plug-in and test its normal use.

I. Development Background

This feature is based on ckeditor version 3.6.2. When you copy and paste an image (in JPG, GIF, PNG, BMP, and jepg formats) to the ckeditor control from the word or Wps of the browser client, the image displayed in the text box is only in the Temporary Folder of drive C of windows. When you click Save text, the image in the text is not transmitted to the server. If you want to upload the image, only one image can be uploaded. This is because IE and ckeditor cannot directly upload unreviewed files to the server for website security considerations.

This plug-in is developed for users to copy and upload the edited content and images in word or Wps to the server without having to send a single copy.

Ii. Plug-in implementation principle

1. The page has the built-in upload image plug-in uploadimgactivex. ocx. After the client is installed, you can read the local image in the text editor and upload it to the server's acceptance page in post mode.

2. The server accepts the page and uploads the image stream page. The server accepts the file stream of the plug-in post and saves it to the folder.

3. There is only one method to implement uploadimgactivex. ocx: the parameter is two (the destination URL for uploading and the client file path for uploading)

Uploadimgactivex. uploadtoserver ("http: // 192.168.0.20.: 3011/imgupload. ashx? Newfilename = "+ newimagename, clientimgpath );

Iii. Specific configuration process

1. Add the object and ckeditor in HTML or dynamic pages (Asp, aspx, JSP, PHP:

<Object ID = "objuploadimgactivex" classid = "CLSID: C1A70DED-FB71-4494-B18C-AD9755FAD693"

Codebase = "ActiveX/uploadimgactivex. ocx"

Width = "100"

Height = "100" style = "display: none;"> </Object>

<Textarea id = "editor1" name = "editor1"> </textarea>

<SCRIPT type = "text/JavaScript">

// <! [CDATA [

Ckeditor. Replace ('editor1 ',

{

Fullpage: True,

Extraplugins:
'Uploadimg, docprops'

});

//]>

</SCRIPT>

Note: In extraplugins, add uploadimg to add the plug-in.

 

2. Add the button function in ckeditor and implement it using the plug-in:

Configure ckeditor/config. js to include the plug-in uploadimg:

Config. toolbar_full =

[

{Name: 'document', items: ['uploadimg ', 'source','-', 'save', 'newpage', 'docprops', 'preview ', 'print ','-', 'templates']},

{Name: 'clipboard', items: ['cut ', 'copy', 'paste', 'pastetext ', 'pastefromword','-', 'undo ', 'redo ']},

{Name: 'editing', items: ['Find ', 'replace', '-', 'selectall', '-', 'spellchecker ', 'scayt']},

{Name: 'form', items: ['form', 'checkbox', 'Radio ', 'textfield', 'texta', 'select', 'button ', 'imagebutton ', 'dendenfield']

},

'/',

{Name: 'basicstyles ', items: ['bold', 'italic ', 'underline', 'strike', 'subscript', 'superscript ','-', 'removeformat']},

{Name: 'paragraph', items: ['numberedlist', 'bulletedlist', '-', 'outdent ', 'indent', '-', 'blockquote ', 'creatediv ','-', 'justifyleft', 'justifycenter', 'justifyright', 'justifyblock','-', 'bidiltr', 'bidirtl']},

{Name: 'link', items: ['link', 'unlink', 'anchor ']},

{Name: 'insert', items: ['image', 'flash', 'table', 'horizontalrule', 'smiley ', 'specialchar', 'pagebreak ', 'iframe']},

'/',

{Name: 'styles ', items: ['styles', 'format', 'font', 'fontsize']},

{Name: 'colors ', items: ['textcolor', 'bgcolor']},

{Name: 'tool', items: ['maximize', 'showbuckets', '-', 'about']}

];

 

 

3. In file \ ckeditor \ plugins \ uploadimg \ plugin. JS, configure the file storage path after the upload server and the page on which the server accepts the file stream uploaded by the plug-in:

Exec: function (editor ){

// Alert ("this is a custom button, Image Upload ");

// Absolute path for storing uploaded images server storage directory serverimgpath client image path clientimgpath

VaR serverimgpath = "http: // 192.168.0.20.: 3011/uploadimg /";

VaR oeditor = ckeditor. Instances. editor1;

VaR text = oeditor. getdata ();

// Select an image using a regular expression

VaR regulartext =/file: \/(\ s + )(\. JPG | \. JPEG | \. PNG | \. BMP | \. GIF) {1}/GI;

VaR arrdata = text. Match (regulartext );

If (null! = Arrdata ){

For (VAR I = 0; I <arrdata. length; I ++ ){

VaR clientimgpath = arrdata [I]. substr (8 );

VaR newimagename = getfilename () + I. tostring () + clientimgpath. substr (clientimgpath. lastindexof ("."));

// Search plug-in for Image Upload using the plug-in

VaR A = Document. getelementbyid ("objuploadimgactivex ");

// Accept the post data of the plug-in. newfilename is the name of the new file, and clientimgpath is the image path uploaded locally (C:/test.jpg)

VaR result = A. uploadtoserver ("http: // 192.168.0.20.: 3011/imgupload. ashx? Newfilename = "+ newimagename, clientimgpath );

TEXT = text. Replace (arrdata [I], serverimgpath + newimagename );

}

Alert ("image uploaded, total uploaded" + arrdata. Length + "picture! ");

Oeditor. setdata (text );

}

Else {

Alert ("no picture to upload! ");

}

}

4. The server accepts and saves the file stream (The following is the file stream code used in Asp.net to receive files using ashx ):

Public class imgupload: ihttphandler

{

 

Public void processrequest (httpcontext context)

{

// Context. response. contenttype = "text/plain ";

// Context. response. Write ("Hello World ");

// App. log. Info (context. Request. url. tostring ());

// Obtain the uploaded data stream

String filenamestr = datetime. Now. tostring ("yyyy-mm-ddhhmmssfff"); // context. Request. querystring ["FILENAME"];

Stream sr = context. Request. inputstream;

String newfilename = context. Request. querystring ["newfilename"];

 

Try

{

String filename = filenamestr;

Byte [] buffer = new byte [4096];

Int bytesread = 0;

// Write the current data stream to the client folder clientbin.

String targetpath = context. server. mappath ("~ /Uploadimg/"+ newfilename );

Using (filstream FS = file. Create (targetpath, 4096 ))

{

While (bytesread = Sr. Read (buffer, 0, buffer. Length)> 0)

{

// Write information to the file

FS. Write (buffer, 0, bytesread );

}

}

Context. response. contenttype = "text/plain ";

Context. response. Write ("uploaded successfully" + newfilename );

}

Catch (exception E)

{

Context. response. contenttype = "text/plain ";

Context. response. Write ("Upload Failed, error message:" + E. Message );

// App. log. Info (E. Message );

}

Finally

{

Sr. Dispose ();

}

}

5. After the configuration is complete, paste the word or Wps content for testing:

 

Click Upload to upload the image to the server:

 

Note:

1. The plug-in can only be used in IE browsers, including IE6, IE7, IE8, ie9, or IE kernel browsers.

2. When the client accesses an HTML or dynamic page, a message is displayed as follows:

Click "install this add-on for all users on this computer ".

 

3. If the installation fails, click "Tools"-"Internet Options"-"security"-"custom settings" in the browser ":

In the unsigned ActiveX Control (Insecure), select enable (Insecure)

 

 

[Code = Delphi] // upimage. CPP: Implementation of cactivexupimgapp and DLL registration. # include "stdafx. H "# include" activexupimg. H "# include" upimage. H "# include" string "# include" iostream "# include" stdio. H "# include" wininet. H "# pragma comment (Lib," wininet. lib ") # define buf_size 1024 using namespace STD; //////////////////////////////////////// /// // stdmethodimp upimage:: Interfacesupportserrorinfo (refiid riid) {static const IID * arr [] = {& iid_iupimage,}; For (INT I = 0; I <sizeof (ARR) /sizeof (ARR [0]); I ++) {If (inlineisequalguid (* arr [I], riid) return s_ OK;} return s_false;} stdmethodimp upmp image :: uploadimg2server (long a, long B) {// todo: add your implementation code herechar * IP = "192.168.0.20."; int Port = 3011; char * upfile =" C: /kinectsensor.jpg "; hinternet hsession = NULL, hconnect = N Ull, hrequest = NULL; hsession = internetopen ("test", internet_open_type_direct, null, null, 0); hconnect = internetconnect (hsession, IP, port, // internet_default_http_port, null, null, internet_service_http, bytes, null); internet_buffers Bufferin = {0}; DWORD dwbytesread; DWORD dwbyteswritten; byte pbuffer [1024]; // read from file in 1 K chunks bool bread, bret; Bufferin. dwstru Ctsize = sizeof (internet_buffers); hrequest = httpopenrequest (hconnect, "Post", "xml_convert", null, 0, 0); // xml_convert request entity if (! Hrequest) {printf ("failed to open request handle: % lu \ n", getlasterror (); Return false;} Handle hfile = createfile (upfile, generic_read, file_cmd_read, null, open_existing, file_attribute_normal, null); If (hfile = invalid_handle_value) {printf ("\ nfailed to open local file % S. ", upfile); Return false;} Bufferin. dwbuffertotal = getfilesize (hfile, null); printf ("file size is % d \ n", Bufferin. Dwbuffertotal); If (! Httpsendrequestex (hrequest, & Bufferin, null, hsr_initiate, 0) {printf ("error on httpsendrequestex % lu \ n", getlasterror (); Return false ;} DWORD sum = 0; do {If (! (Bread = readfile (hfile, pbuffer, sizeof (pbuffer), & dwbytesread, null) {printf ("\ nreadfile failed on buffer % lu. ", getlasterror (); break;} If (! (Bret = internetwritefile (hrequest, pbuffer, dwbytesread, & dwbyteswritten) {printf ("\ ninternetwritefile failed % lu", getlasterror (); break ;} sum + = dwbyteswritten;} while (dwbytesread = sizeof (pbuffer); closehandle (hfile); printf ("actual written Bytes: % d \ n", sum ); if (! Httpendrequest (hrequest, null, 0, 0) {printf ("error on httpendrequest % lu \ n", getlasterror (); Return false;} int contextlengthid = http_query_content_length; int statuscodeid = Hangzhou; int statustextid = http_query_status_text; char szbuf [buf_size] = {0}; DWORD dwsize = buf_size; char pcbuffer [buf_size]; DWORD dwbyteread; // printf ("\ n server returns the following: \ n"); do {dwbytesread = 0; If (internetreadfile (hrequest, pcbuffer, buf_size-1, & dwbyteread )) {pcbuffer [dwbyteread] = 0x00; // null-terminate bufferprintf ("% s", pcbuffer); memset (pcbuffer, 0, buf_size );} else {printf ("internetreadfile failed \ n") ;}}while (dwbyteread> 0);/* If (httpqueryinfo (hrequest, statustextid, szbuf, & dwsize, 0 )) {szbuf [dwsize] = 0; printf ("status text: [% s] \ n", szbuf );} * /// cout <"uploaded successfully" <Endl; return true; return s_ OK;} [/Code]