Category / Section
How to Copy/Paste images in RTE?
1 min read
You can copy or paste images in Rich Text Editor. In general, the local path is obtained by pasting images from local document. To display images, you can call the OnClientTextChange () function of RTE when you paste content from local documents. Using GetHtml () function, you can obtain the pasted content and extract the URL of the image, which is the local path referring the location in your drive. Send the URL to server side using Ajax post. In code behind, get the image from local reference and convert it to BMP image and store them in website location. On Ajax post success, get the image file names from post action and replace the existing URL with new location. This displays the images on copy paste to RTE.
ASPX
<syncfusion:RichTextEditor ID="RichTextEditor" ClientObjectId="RTEditor" runat="server"
Height="420" UploadImagesPath="Images/Uploaded_Images" UploadImageExtension=".png,.jpg" InsertImagesPath="Images/Uploaded_Images" Width="620" OnClientTextChange="TextChanged(this)"></syncfusion:RichTextEditor>
<script type="text/javascript">
function TextChanged(sender, args) {
var geturl = new Array(); var localurls = new Array(); var newfnames = new Array();
var FilePath = new Array(); var fname = new Array();
var fnlength, rtecont, fpath;
var sHTML = RTEditor.GetHTML();
var len = sHTML.split("file:///").length;
var content = sHTML.split("file:///");
var regex = /\\/g;
if (content != null) {
for (var i = 0, j = 0; i < len; i++) {
if (content[i].substr(0, content[i].indexOf(".png")) != "") geturl[i] = content[i].substr(0, content[i].indexOf(".png")) + ".png";
else if (content[i].substr(0, content[i].indexOf(".jpg")) != "") geturl[i] = content[i].substr(0, content[i].indexOf(".jpg")) + ".jpg";
else if (content[i].substr(0, content[i].indexOf(".bmp")) != "") geturl[i] = content[i].substr(0, content[i].indexOf(".bmp")) + ".bmp";
else if (content[i].substr(0, content[i].indexOf(".emz")) != "") geturl[i] = content[i].substr(0, content[i].indexOf(".emz")) + ".emz";
if (geturl[i] != undefined) {
if ((geturl[i].replace("\"", "").trim().endsWith("jpg")) || (geturl[i].replace("\"", "").trim().endsWith("png")) || (geturl[i].replace("\"", "").trim().endsWith("bmp")) || (geturl[i].replace("\"", "").trim().endsWith("emz"))) {
localurls[j] = geturl[i].replace("\"", "").trim();
FilePath[j] = localurls[j].replace(regex, "\\\\");
if ((window.navigator.userAgent.indexOf("Chrome") >= -1)) {
fname[j] = FilePath[j].split("/"); fnlength = FilePath[j].split("/").length;
fname[j] = (fname[j][fnlength - 1]);
if (fname[j] != "") {
fname[j] = FilePath[j].split("\\"); fnlength = FilePath[j].split("\\").length;
fname[j] = (fname[j][fnlength - 1]);
}
}
else if (window.navigator.userAgent.indexOf("MSIE") > -1) {
fname[j] = FilePath[j].split("/"); fnlength = FilePath[j].split("/").length;
fname[j] = (fname[j][fnlength - 1]);
if (fname[j] != "") {
fname[j] = FilePath[j].split("\\"); fnlength = FilePath[j].split("\\").length;
fname[j] = (fname[j][fnlength - 1]);
}
}
else {
fname[j] = FilePath[j].split("\\"); fnlength = FilePath[j].split("\\").length;
fname[j] = (fname[j][fnlength - 1]);
if (fname[j] != "") {
fname[j] = FilePath[j].split("/"); fnlength = FilePath[j].split("/").length;
fname[j] = (fname[j][fnlength - 1]);
}
}
}
j++;
}
}
if (content != null) {
$.ajax({
type: "POST",
url: "Default.aspx/ImageUpload",
data: '{ "URLs" : "' + FilePath + '","Filename":"' + fname + '" }',
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (response) {
newfnames = response.d;
rtecont = sHTML.split("src="); len = sHTML.split("src=").length; var j = 0; var localpath = new Array();
for (var i = 0; i < len; i++)
if (rtecont[i].startsWith("\"file:")) {
if (rtecont[i].substr(0, rtecont[i].indexOf(".png")) != "") fpath = rtecont[i].substr(0, rtecont[i].indexOf(".png")) + ".png";
else if (rtecont[i].substr(0, rtecont[i].indexOf(".jpg")) != "") fpath = rtecont[i].substr(0, rtecont[i].indexOf(".jpg")) + ".jpg";
else if (rtecont[i].substr(0, rtecont[i].indexOf(".bmp")) != "") fpath = rtecont[i].substr(0, rtecont[i].indexOf(".bmp")) + ".bmp";
else if (rtecont[i].substr(0, rtecont[i].indexOf(".emz")) != "") fpath = rtecont[i].substr(0, rtecont[i].indexOf(".emz")) + ".emz";
if (fpath != "") {
localpath[j] = 'Images/Uploaded_Images/' + newfnames[j] + '.BMP';
RTEditor.SetHTML(sHTML.replace(fpath + '\"', localpath[j]));
sHTML = RTEditor.GetHTML();
j++;
}
}
},
failure: function (response) {
alert(response.d);
}
});
}
}
}
</script>
C#
[System.Web.Services.WebMethod]
public static String[] ImageUpload(String URLs, string Filename)
{
String[] newURL=new String[10];
if(URLs!="")
newURL=GetBytesFromUrl(URLs.ToString(), Filename);
return (newURL);
}
static public String[] GetBytesFromUrl(string url, string fname)
{
int filecount, namecount; String saveImagePath = "";
filecount = url.Split(',').Length; namecount = fname.Split(',').Length;
String[] filepaths, filenames, replacepath = new String[100]; String[] filename = new String[100];
filepaths=url.Split(','); filenames=fname.Split(',');
for(int i=0;i<filecount;i++){
System.Drawing.Image img = System.Drawing.Image.FromFile(filepaths[i].ToString());
int length = ((filenames[i].ToString()).LastIndexOf("/") >=-1) ? (filenames[i].ToString()).LastIndexOf("/"):(filenames[i].ToString()).LastIndexOf("\\");
filename[i] = ((filenames[i].ToString()).Substring(length + 1)).Split('.')[0].ToString();
byte[] bytes;
using (MemoryStream ms = new MemoryStream())
{
img.Save(ms, System.Drawing.Imaging.ImageFormat.Bmp);
bytes = ms.ToArray();
}
saveImagePath = HttpContext.Current.Server.MapPath("~/Images/Uploaded_Images/" + filename[i] + ".BMP");
replacepath[i] = HttpContext.Current.Server.MapPath("~/Images/Uploaded_Images/" + filename[i] + ".BMP").ToString();
using (MemoryStream mss = new MemoryStream(bytes))
{
System.Drawing.Image returnImage = System.Drawing.Image.FromStream(mss);
{
returnImage.Save(mss, System.Drawing.Imaging.ImageFormat.Bmp);
returnImage.Save(saveImagePath);
}
}
}
return (filename);
}
