image upload

**fonis** · 01-07-2012 01:04 PM

Okay so i followed a tutorial on how to create a wysiwyg rich text editor. The script has a function that makes it possible to take an image uploaded on an another site and use it. What i want though is to let the user upload an image directly into the text editor. Is there a way to do that in javascript? and if so, can you guys please help me write it, cause i can't find anything on the web about it... ?

btw, is it possible to write a function that allows the user to show a video from youtube just by entering the url address?

[syntax=php]
<div id="content">

<body onLoad="iFrameOn();">

<h1>Create a New Guide</h1>
<form id="form1" name="form1" method="post" action="add_guide.php">
<h3>Guide Name <input name="guide" type="text" id="guide" size="50" maxlength="50" /></h3>
<p> </p>
<p> </p>
<select name="class">
<option value="0">None</option>
<option value="1">Scout</option>
<option value="2">Soldier</option>
<option value="3">Pyro</option>
<option value="4">Demoman</option>
<option value="5">Heavy</option>
<option value="6">Engineer</option>
<option value="7">Medic</option>
<option value="8">Sniper</option>
<option value="9"selected="selected">Spy</option>
</select>

<p> </p>

<div id="wysiwyg_cp" style="padding:8px; width:700px;">
<input type="button" onClick="iBold()" value="B">
<input type="button" onClick="iUnderline()" value="U">
<input type="button" onClick="iItalic()" value="I">
<input type="button" onClick="iFontSize()" value="Text Size">
<input type="button" onClick="iForeColor()" value="Text Color">
<input type="button" onClick="iHorizontalRule()" value="HR">
<input type="button" onClick="iUnorderedList()" value="UL">
<input type="button" onClick="iOrderedList()" value="OL">
<input type="button" onClick="iLink()" value="Link">
<input type="button" onClick="iUnLink()" value="UnLink">
<input type="button" onClick="iImage()" value="Image">
</div>

<textarea style="display:none" name="content" cols="50" rows="10" id="content"></textarea>
<iframe name="richTextField" id="richTextField" style="border:#000000 1px solid; width:700px; height:300px;"></iframe>


<p> </p>
<input type="submit" name="submit" value="Submit" onClick="javascript:submit_form();" />

</form>
</div>
[/syntax]

[syntax=php]function iFrameOn(){
richTextField.document.designMode = 'On';
}
function iBold(){
richTextField.document.execCommand('bold',false,null);
}
function iUnderline(){
richTextField.document.execCommand('underline',false,null);
}
function iItalic(){
richTextField.document.execCommand('italic',false,null);
}
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
richTextField.document.execCommand('FontSize',false,size);
}
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
richTextField.document.execCommand('ForeColor',false,color);
}
function iHorizontalRule(){
richTextField.document.execCommand('inserthorizontalrule',false,null);
}
function iUnorderedList(){
richTextField.document.execCommand("InsertOrderedList", false,"newOL");
}
function iOrderedList(){
richTextField.document.execCommand("InsertUnorderedList", false,"newUL");
}
function iLink(){
var linkURL = prompt("Enter the URL for this link:", "http://");
richTextField.document.execCommand("CreateLink", false, linkURL);
}
function iUnLink(){
richTextField.document.execCommand("Unlink", false, null);
}
function iImage(){
var imgSrc = prompt('Enter image location', '');
if(imgSrc != null){
richTextField.document.execCommand('insertimage', false, imgSrc);
}
}
function submit_form(){
var theForm = document.getElementById("form1");
theForm.elements["content"].value = window.frames['richTextField'].document.body.innerHTML;
theForm.submit();
}[/syntax]

**Sup3rkirby** · 01-07-2012 04:57 PM

Essentially it seems this script adds images from URLs entered by the user. In order to upload directly to your editor you would need a few things. One of them would be an upload script, which would likely be a PHP or ASP script that handles an upload form. Secondly, you would need a place to store all of the images since you are now handling the uploads yourself rather than linking to existing files on the internet. You may also need some additional scripts to handle/manage the uploaded files.

As for displaying YouTube videos from only the URL, this can be done using YouTube's new embed code and a simple JavaScript function like so:

Code:

function _EmbedVideo($url) {
  var $video = "";
  if($url.indexOf("?") > -1 ) {
    var strQueryString = $url.substr($url.indexOf("?"));
    var aQueryString = strQueryString.split("&");
    for(var iParam = 0; iParam < aQueryString.length; iParam++) {
      if(aQueryString[iParam].indexOf("v=") > -1 ) {
        var aParam = aQueryString[iParam].split("=");
        $video = aParam[1];
        break;
      }
    }
  }
alert($video);
  var $embed_code = '<iframe width="420" height="315" src="http://www.youtube.com/embed/' + $video + '" 

frameborder="0" allowfullscreen></iframe>';
  return $embed_code;
}

Though to integrate this in to your editor you will have to make some adjustments to have it output the proper code to your editor window.

**3Nex** · 01-07-2012 05:08 PM

Wait, you mean... You're writing your own wysiwyg editor from scratch? If so, and i don't mean to be a smartass, but why are you doing that?

As for uploading images, that cannot be executed without server side coding. I'm not sure if you're accidently on the wrong subforum, but you can't actually upload an image with Javascript. That's more of a PHP question. Once you upload it with ASP or PHP and you get the new image URL as a response, your problem will get real trivial real fast.

Youtube question - Yes, it is. You need to go to any Youtube video and copy the embed code. Then you need to remove the Youtube ID from it. Then you need a user to enter some video URL as you said you'd like them to. Then, you apply a regular expression to extract the video ID from that URL. And finally you insert that ID into the embed code where the ID goes and write that onto the document.

Thread: image upload

Thread Tools

Display

Hybrid View

image upload

Thread Information

Users Browsing this Thread

Tags for this Thread

Bookmarks

Bookmarks

Posting Permissions