Jump to content

Problem with online rich text editor


Recommended Posts

Hi guys,I'm trying to integrate an online rich text editor in my web site.I have found an HTML code that create an awesome rich text editor and I want to keep using it for my site, but in the tutorial, the author don't have write the code to allow the user to save the file (with the bold, underline ecc propriets) on their PC.Now, the rich text editor is in a private area, with you can access with a login written in PHP ad MySQL and I want that the file will not be saved in their PC but I want that the file will be saved in a directory (in my server) witch only the owner of the file can access the file with the login. I want also that the file must have a 'name'.I want that the saved file will be appear in a list in a page and with a click in the file's title, it will be opened in the editor page.Sorry for my bad English but I'm an Italian user :)I know that this is very difficult but i really need this rich text editor with the save option.I have posted in PHP zone because I think that the script to save the file must be written in PHP to work with MySQL. Here you can found the code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"><html> <head><style type="text/css">/*<![CDATA[*/#editor {width: auto;height: auto;}#firefoxerror {display: none;/*]]>*/</style><meta content="text/html; charset=utf-8" http-equiv="Content-Type"><title>Senza nome 1</title><style type="text/css">.auto-style1 {font-family: Tahoma;}</style></head><body onLoad="def()"><script type="text/javascript">if (navigator.userAgent.indexOf("Firefox")!=-1)document.write("L' editor non supporta Firefox. Usate Internet Explorer, Google Chrome, Safari o Opera.")</script><center><div id="editor"><div style="width:549px; text-align:left; margin-bottom:10px"><table style="width: 103%"><tr><td class="auto-style1" style="width: 209px"><a href="http://my.lightschool.it/login-home.php">← Torna indietro</a></td><td style="width: 38px"><img src="http://cdn4.iconfinder.com/data/icons/meBaze-Freebies/32/save.png" height="26" width="26"></td><td><img src="http://cdn1.iconfinder.com/data/icons/CrystalClear/32x32/actions/agt_print.png" height="26" width="26"></td></tr></table><br><input type="button" id="bold" style="height:21px; width:21px; font-weight:bold;" value="G" onClick="fontEdit('bold')" title="Grassetto"/><input type="button" id="italic" style="height:21px; width:21px; font-style:italic;" value="C" onClick="fontEdit('italic')" title="Corsivo" /><input type="button" id="underline" style="height:21px; width:21px; text-decoration:underline;" value="S" onClick="fontEdit('underline')" title="Sottolineato" /> |<input type="button" style="height:21px; width:21px;"value="S" onClick="fontEdit('justifyleft')" title="Allinea a sinistra" /><input type="button" style="height:21px; width:21px;"value="C" onClick="fontEdit('justifycenter')" title="centrato" /><input type="button" style="height:21px; width:21px;"value="D" onClick="fontEdit('justifyright')" title="Allinea a destra" /> |<select id="fonts" onChange="fontEdit('fontname',this[this.selectedIndex].value)"><option value="Arial">Arial</option><option value="Comic Sans MS">Comic Sans MS</option><option value="Courier New">Courier New</option><option value="Monotype Corsiva">Monotype</option><option value="Tahoma">Tahoma</option><option value="Times">Times</option></select><select id="size" onChange="fontEdit('fontsize',this[this.selectedIndex].value)"><option value="1">8 pt</option><option value="2">10 pt</option><option value="3">12 pt</option><option value="4">14 pt</option><option value="5">16 pt</option><option value="6">18 pt</option><option value="7">20 pt</option></select><select id="color" onChange="fontEdit('ForeColor',this[this.selectedIndex].value)"><option value="black">Nero</option><option style="color:red;" value="red">Rosso</option><option style="color:blue;" value="blue">Blu</option><option style="color:green;" value="green">Verde</option><option style="color:#FF00FF;" value="pink">Rosa</option></select> |<input type="button" style="height:21px; width:21px;"value="1" onClick="fontEdit('insertorderedlist')" title="Elenco numerato" /><input type="button" style="height:21px; width:21px;"value="●" onClick="fontEdit('insertunorderedlist')" title="Elenco puntato" /><input type="button" style="height:21px; width:21px;"value="←" onClick="fontEdit('outdent')" title="Riduci rientro" /><input type="button" style="height:21px; width:21px;"value="→" onClick="fontEdit('indent')" title="Aumenta rientro" /></div><iframe id="textEditor" style="width:807px; height:427px;"></iframe></center><script type="text/javascript"><!--textEditor.document.designMode="on";textEditor.document.open();textEditor.document.write('<head><style type="text/css">body{ font-family:arial; font-size:13px; }</style> </head>');textEditor.document.close();function def(){document.getElementById("fonts").selectedIndex=0;document.getElementById("size").selectedIndex=1;document.getElementById("color").selectedIndex=0;}function fontEdit(x,y){textEditor.document.execCommand(x,"",y);textEditor.focus();}--></script></div><div id="firefoxerror"><p>Attenzione! Stai usando Mozilla Firefox che non è supportato dall Editor. L' Editor supporta Internet Explorer, Chrome, Opera e Safari.</p></div></body></html>

Thank you, Best regards,Francesco

Edited by fsorge
Link to post
Share on other sites

A text editor that doesn't support Firefox? This developer isn't too experienced. You can search Google for TinyMCE. If you want to be able to save the file, you'll need to send the data to the server (a hidden <iframe> might work) and force a download by setting the Content-Type and Content-Disposition headers.

Link to post
Share on other sites

Thank you for your reply.I have written the FirefoxError code because if I try to use it on Firefox (I have also tried on other PCs), the rich text box became unclicable.Good, TinyMCE works fine and it is very cool... Now can you explain how I must do to make the 'Save' button as I have written in my previous post?I' am not very good with HTML and PHP because is the first time that I try to make something in PHP.

Edited by fsorge
Link to post
Share on other sites

if you want to do that dynamicaly you need to usehttp://w3schools.com/ajax else you will need a form which will submit to target page. that target page will be the php page which will handle the datahttp://w3schools.com/tags/tag_form.asp how to handle data and save it to dbhttp://w3schools.com/php/php_mysql_intro.asphttp://w3schools.com/php/php_mysql_connect.asphttp://w3schools.com/php/php_mysql_insert.asp

Link to post
Share on other sites

This is pretty advanced for someone with no experience in PHP. You may want to go through the PHP tutorials first. If you haven't done anything with ajax, that's another major component of something like this, you'll want to go through those tutorials also. Ajax is a technique using Javascript to send requests to the server without reloading the page, which is what happens when people save, download, or load a file. Saving is the easiest part, all you need to do is get the text area contents and your filename field and send the filename and text to PHP. It doesn't need to actually create a file, it can store everything in a database and associate it with the user who is logged in. If they want to download a saved file then you would get the data from the database and send headers to force a download like Ingolme said. Loading a file will involve sending the filename to the server, where it looks up a file with that name for that user in the database, and it returns the text so that Javascript can put the text into the editor. There are examples for the general parts (ajax, using PHP to work with a database) in the tutorials, so if you don't have any experience then that's where you should start. We won't write your code for you, but we're happy to help you learn how to write it yourself.

Link to post
Share on other sites

Okay, Thank you for the reply. Now I' m learning about AJAX and I will try when I will finish reading the tutorials.

We won't write your code for you, but we're happy to help you learn how to write it yourself.
you have reason, sorry :)
Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
×
×
  • Create New...