View Full Version : image upload

01-07-2012, 08:09 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?

<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>
<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>


<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">
<!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it -->
<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>
<!-- End replacing your normal textarea -->

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


function iFrameOn(){
richTextField.document.designMode = 'On';
function iBold(){
function iUnderline(){
function iItalic(){
function iFontSize(){
var size = prompt('Enter a size 1 - 7', '');
function iForeColor(){
var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', '');
function iHorizontalRule(){
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;

Philip M
01-07-2012, 08:10 PM
When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.

JavaScript is purely a client-side language, and unless used with an Ajax call has no capability to read from or write to a file (except a cookie), communicate with the server, access a database, the client's operating system or the Windows registry, or alter the default behaviour of the browser. And for security reasons JavaScript cannot access anything beyond the domain of the current page. This is known as the "same origin policy" and prevents a document or script loaded from one origin from getting or setting properties of a document from a different origin.

All advice is supplied packaged by intellectual weight, and not by volume. Contents may settle slightly in transit.

01-07-2012, 08:34 PM
okay, thanks for the reply. Since i know nothing of ajax, can i somehow make it possible for the user to upload a picture through php, and then insert the picture into a certain place in the iframe?