Let freetextbox (an HTML editor) Support uploading local images and inserting them into the editor

If you do not quite understand the principles of the HTML editor, please take a look at the simple example I wrote specifically to demonstrate how to convert an IFRAME into an HTML editor and let the editor load data, insert the specified HTML data at the cursor of the editor.

Insert the specified HTML data at the cursor of the editor? You may immediately think that we can use this feature when uploading images and insert an HTML file in the editor. The editor can be WYSIWYG, when you insert an HTML () to display the image, you can immediately see the image in the editor!

Now that the problem of dynamically inserting images is solved, only the uploaded images are left. The uploaded images become so easy in Asp.net. The solution is as follows: upload a local image to the server --> return path SRC --> Insert the HTML (IMG src = 'src') of the displayed Image Based on the returned SRC ').

Specific implementation:

First, add an image upload button to freetextbox.
Public class uploadimg: toolbarbutton
{
Public uploadimg (): Base ("uploadimg", "ftb_uploadimg", "insertimage ")
{
Scriptblock = @ "function ftb_uploadimg () {uploadimg ()}"; // Method for clicking the event button
}
}

Then, write several client scripts, one for the corresponding upload image button click event -- a window for uploading images is displayed.

Function uploadimg ()
{
Window. Open ('upload _ IMG. aspx ',' _ uploadimg ', "width = 481 Height = 190 ");
}

// Insert the specified HTML data to the cursor position of the Editor
Function inserttext (texttoinsert ){
Ftb_inserttext ("", texttoinsert );
. Focus ();
}

Finally, in the pop-up window, upload the local image to the specified directory on the server and return the path (for example, uploadimgs/myphoto.gif) after the image is uploaded to the server ), call the inserttext ('') method to insert the uploaded image and close the upload window.

Private void saveimage ()
{
String filename = uploadfile (); // obtain the uploaded image path
Response. Write (@"

");
Response. End ();
}

Note: This method will produce a lot of junk images.

Code download