Let FretextBox support upload local images and inserted into the editor

zhaozj2021-02-16  52

If you don't quite understand the principle of the HTML editor, please see this simple example of I specifically, demonstrate the IFRAME to the HTML editor, let the editor load data, insert the specified HTML data in the editor's cursor .

Insert the specified HTML data at the cursor of the editor? Maybe you immediately thought that we can use this when we upload the picture, insert a section of HTML directly in the editor, the editor can be what you have obtained, when you insert a section to display the picture of the picture (< IMG SRC = 'Image Path'>), you can see the picture immediately in the editor!

Since the problem of moving into the picture is solved, then only upload it, uploading so easy in Asp.net, ok, the program has: Upload local pictures to the server -> return path src -> The HTML (IMG SRC = 'SRC') of the display image is inserted according to the returned SRC.

Implementation:

First, add an uploaded image for FreeTextbox. public class UploadImg: ToolbarButton {public UploadImg (): base ( "UploadImg", "FTB_UploadImg", "insertimage") {ScriptBlock = @ "function FTB_UploadImg () {UploadImg ()}"; // button click event corresponding method}}

Then, write a few client scripts, one to upload the image button to click the event - pop up a window to upload the picture.

Function uploadimg () {WINDOW.Open ('UPLOAD_IMG.ASPX', '_ UPLOADIMG', "Width = 481 Height = 190");}

// insert data into the designated HTML editor cursor position function InsertText (textToInsert) {FTB_InsertText ( "<% = PostBodyRichText.ClientID%>", textToInsert); <% = PostBodyRichText.ClientID "_Editor"%> focus ().; }

Finally, in the pop-up window, the present picture is uploaded in the server specified directory, return to the image to the server (such as UPLOADIMGS / MYPHOTO.GIF), call INSERTTEXT (' ") method Insert the uploaded picture and turn off the upload window.

Private void saveimage () {string filename = UPLOADFILE (); // get uploaded image path response.write (@ "