Thanks wow I didn't expect to get such a good answer so quickly !! - could u send the other bits to ajpb@linuxconsultant.co.uk
Thanks.
AJPB
Main Topics
Browse All Topics
Loading Advertisement...
Question
Javascript/Java/ActiveX wysiwyg editor control
Hi Folks,
Does anyone know of a free, or 'non restrictively licensed' replacement for a TEXTAREA on a form, which would allow rich HTML editing (i.e. looking a bit like WordPad). We have several PHP/MySQL based content management systems in operation and are keen to allow 'rich' editing to clients who do not want to edit HTML code directly.
The reason this is in the javascript topic area is that we've seen similar ideas before, and they mostly appear to have been written in Javascript or Jscript.
Any resource pointers or even code snippets would be greatly appreciated. Something that kind of seems to do the job can be seen at :
http://standardbrains.edit
Although it seems to have bugs.. And it doesn't directly do everything we want. We need something that can save down to a PHP script (presumably by a form submission).. Our ideal solution would have clickable buttons for BOLD, UNDERLINE etc and possibly even some handling for bullets and numbering etc.
PS. I have now looked back through EE's archives and found several similar questions to this .. Does anyone have anything new? 'Cos all those are either restricted (license wise) or clunky or nasty.. New fresh ideas required :)) Thanks
AJ.
This Question has been solved and asker verified All Experts Exchange premium technology solutions are available to subscription members.
Subscribe now for full access to Experts Exchange and get
Instant Access to this Solution
- Plus...
- 30 Day FREE access, no risk, no obligation
- Collaborate with the world's top tech experts
- Unlimited access to our exclusive solution database
- Never be left without tech help again
Trusted by hundreds of thousands everyday for fast, accurate and reliable tech support.
- "The time we save is the biggest benefit of Experts Exchange to Warner Bros. What could take multiple guys 2 hours or more each to find is accessed in around 15 minutes on Experts Exchange." Mike Kapnisakis, Warner Bros.
- "Our team likes having a resource that is more secure than just using Google and most experts using this service really know their stuff. It's nice to look here first versus using Google." Dayna Sellner, Lockheed Martin
- "Anytime that I've been stumped with a problem, 9 out of 10 times Experts Exchange has either the accepted solution or an open discussion of the potential solution to the problem." Kenny Red, eBay Inc.
See what Experts Exchange can do for you.
Got a question?
We've got the answer.
Experts Exchange has been collecting answers to technology questions since 1996…3 million and counting! If you have a question, chances are we already have your answer.
Need individual assistance?
Our experts are ready to help.
If you can't find the exact answer you're looking for, ask our exclusive community of 50,000 experts. You’ll get a personalized answer from a trusted professional.
Want to learn from the best?
Read articles from industry experts.
Thousands of free tech tips, tricks, how-to’s and tutorials are available in our peer reviewed articles section. See for yourself how smart our experts are, no login required.
Working on a long term project?
Store your work and research.
Save solutions to your questions, answers you’ve discovered through searching plus helpful articles in your personal knowledgebase for easy future access.
Access the answers to your technology questions today.
30-day free trial. Register in 60 seconds.
What Makes Experts Exchange Unique?
Members of the expert community talk about why the experience at Experts Exchange is different than what you will find anywhere else.
Trusted by the world's most respected brands.
Faithfully serving IT professionals since 1996.
Try it out and discover for yourself.
30-day free trial. Register in 60 seconds.
Free Tech Articles
-
WARNING: 5 Reasons why you should NEVER fix a computer for free.
It is in our nature to love the puzzle. We are obsessed. The lot of us. We love puzzles. We love the challenge. We thrive on finding the answer. We hate disarray. It bothers us deep in our soul. W...
-
SCCM OSD Basic troubleshooting
SCCM 2007 OSD is a fantastic way to deploy operating systems, however, like most things SCCM issues can sometimes be difficult to resolve due to the sheer volume of logs to sift through and the dispe...
-
Migrate Small Business Server 2003 to Exchange 2010 and Windows 2008 R2
This guide is intended to provide step by step instructions on how to migrate from Small Business Server 2003 to Windows 2008 R2 with Exchange 2010. For this migration to work you will need the fo...
-
Create a Win7 Gadget
This article shows you how to create a simple "Gadget" -- a sort of mini-application supported by Windows 7 and Vista. Gadgets can be dropped anywhere on the desktop to provide instant information, ...
-
Outlook continually prompting for username and password
There have been a lot of questions recently regarding Outlook prompting for a username and password whilst using Exchange 2007. There are a few reasons why this would happen and I will try to cover t...
-
Backup Exchange 2010 Information Store using Windows Backup
There seems to be quite a lot of confusion around the ability to backup Exchange 2010 using the built in Windows Backup feature. This stems from the omission of this feature prior to Exchange 2007 s...
Cloud Class Webinars
- Avoiding Bugs in Microsoft Access
Alison Balter takes and in-depth look at avoiding bugs in Access. In this webinar you will learn about using the immediate window to debug your applications, invoking the debugger, using breakpoints to troubleshoot, stepping through code, setting the next statement to execute, ...
- Top 10 Best New Features in Visio 2010
Scott Helmers gives live demonstrations of the top 10 new features in Visio 2010. This webinar will teach you how to create compelling diagrams by adding shapes to the page with a single click, linking the shapes in a diagram to data in Excel (or SQL Server, or SharePoint), ...
- IT Consultant Business Secrets Revealed
Michael Munger, Experts Exchange tech pro and IT consultant, pulls back the curtain on his very successful businesses and answers question on every IT consultant and business owner should know about. He shares secrets on what he did to solve the 5 most common problems in IT, ...
- Disaster Recovery and Business Continuity
Quest CTO, Mike Billon, gives an overview of the steps involved in building a dunamic disaster recovery plan. Through case studies and an examination of software/hardware tooles for monitoring and testing, you'll gain a better understandin of where you are, where you want ...
- Organize Your Visio Diagrams with Containers and Lists
Scott Helmers uses cross functional flowcharts, wireframe diagrams, data graphic legends and seating charts to teach you: how to ustilize all three new structured diagram components in Visio 2010, the best practices for organizeing shapes in previous version of Visio, how to organize ...
- How to Us Objects, Properties, Events and Methods in Microsoft Access
Alison Dalter gives an in-depbth look at objects, properties, events and methods in Microsoft Access. In this webinar you will learn about using the object browser, referring to objects, working with properties and methods, working with object variables, understanding the ...
Join the Community
Give a Little. Get a Lot.
Join the community of experts here and help other tech pros by answering question in your area of expertise. You can earn FREE access to all Experts Exchange's premium features and resources.
Answers
Medalan: Sure I can do that. Just tell me your email address.
No, the javascript it self does not write the data into a Mysql database. However, it takes the content from the editor and puts it into a textarea before submitting the form. Writing it to the database should be as easy as reading from the form post variables and writing the data into the database. Very simple.
Very nice, seen this done before but this is a far more elegant example.
Never come across iframes before so need a way of populating the frames html source with a form variable onload and also getting that info out as a form variable on submission. I seem to be having an existence prob when using the body onLoad() event to do this.
But i am a bit stupid so thats not surprising, any help would be lovely
trev@ladybee.co.uk
Thanks mate
Trev
Hi,
Since a lot of people have been emailing me and asking if I could send them the images and the extra information I sent to the original asker of this question, I decided to upload this to my server ....
So, please check this out before asking me ;) I'm really busy and can't really reply to everybody's emails ....
http://www.mmedia.is/~hagu
http://www.mmedia.is/~hagu
Regards,
Hagur
That's easy. Just read the data from the database and put it into a hidden textarea, or a javascript string variable.
Then create a javascript function that executes on the onLoad event of the body tag.
The purpose of this function is to take the contents from the hidden textarea (or the javascript text variable) and put it inside the editor.
Example of the function that should be executed at the onLoad event:
function fncLoadContents() {
document.frames('editor').
}
In this example, the editor is in an iframe on the page. The name of the iframe is "editor" and the hidden textarea is called "hiddenTextarea".
This should give you an idea how it's done ....
3 Ways to Join
Business Accounts
- Perfect for organizations
- Multiple users
- Save over 36%
- Create a Business Account
Answer for Membership
- Earn free access
- Showcase your knowledge
- No credit card required
- Sign Up to Answer
Loading Advertisement...
by: hagurPosted on 2002-09-18 at 12:03:57ID: 7289322
This is really easy to do ..... just add the attribute CONTENTEDITABLE to a DIV tag or an IFRAME to make it's content editable.
Anyways, here is something I've used many times:
editor.html:
--------------
<html>
<head>
<title>Editor</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#FFFFFF" text="#000000" topmargin="0" leftmargin="0" bottommargin="0" rightmargin="0">
<STYLE TYPE="text/css">
TABLE#tblCoolbar {background-color:threedfa
.cbtn {height:15;width:15;BORDER
.txtbtn {font-family:tahoma; font-size:70%; color:menutext;}
</STYLE>
<script language="javascript" src="modal_dialog.js"></sc
<table width="100%" cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td colspan="2" valign="top" height="20">
<table id="tblCoolbar" width="100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td width="100">
<select onchange="cmdExec('fontnam
<option selected>Leturgerp</option
<option value="Arial">Arial</optio
<option value="Arial Black">Arial Black</option>
<option value="Arial Narrow">Arial Narrow</option>
<option value="Comic Sans MS">Comic Sans MS</option>
<option value="Courier New">Courier New</option>
<option value="System">System</opt
<option value="Tahoma">Tahoma</opt
<option value="Times New Roman">Times New Roman</option>
<option value="Verdana">Verdana</o
<option value="Wingdings">Wingding
</select>
</td>
<td width="20">
<select onchange="cmdExec('fontsiz
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
<option value="5">5</option>
<option value="6">6</option>
<option value="7">7</option>
<option value="8">8</option>
<option value="10">10</option>
<option value="12">12</option>
<option value="14">14</option>
</select>
</td>
<td>
<input type="checkbox" onclick="setMode(this.chec
</td>
</tr>
</table>
</td>
</tr>
<tr valign="middle">
<td valign="top">
<iframe width="100%" id="idContent" height="100%" style="border-style:solid;
</td>
<td valign="top" width="40">
<table id="tblCoolbar" cellpadding="0" cellspacing="0" border="0" height="100%">
<tr>
<td valign="top">
<table id="tblCoolbar" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<div class="cbtn" onClick="cmdExec('cut')" onmouseover="button_over(t
<img hspace="1" vspace=1 align=absmiddle src="images/Cut.gif" alt="Cut">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('copy')" onmouseover="button_over(t
<img hspace="1" vspace=1 align=absmiddle src="images/Copy.gif" alt="Copy">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('paste')"
<img hspace="1" vspace=1 align=absmiddle src="images/Paste.gif" alt="Paste">
</div>
</td>
</tr>
<tr>
<td>
<div class="cbtn" onClick="cmdExec('bold')" onmouseover="button_over(t
<img hspace="1" vspace=1 align=absmiddle src="images/Bold.gif" alt="Bold">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('italic')
<img hspace="1" vspace=1 align=absmiddle src="images/Italic.gif" alt="Italic">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('underlin
<img hspace="1" vspace=1 align=absmiddle src="images/Under.gif" alt="Underline">
</div>
</td>
</tr>
<tr>
<td>
<div class="cbtn" onClick="cmdExec('justifyl
<img hspace="1" vspace=1 align=absmiddle src="images/Left.gif" alt="Justify Left">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('justifyc
<img hspace="1" vspace=1 align=absmiddle src="images/Center.gif" alt="Center">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('justifyr
<img hspace="1" vspace=1 align=absmiddle src="images/Right.gif" alt="Justify Right">
</div>
</td>
</tr>
<tr>
<td>
<div class="cbtn" onClick="cmdExec('insertor
<img hspace="2" vspace=1 align=absmiddle src="images/numlist.gif" alt="Ordered List">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('insertun
<img hspace="2" vspace=1 align=absmiddle src="images/bullist.gif" alt="Unordered List">
</div>
</td>
<td>
<div class="cbtn" onClick="cmdExec('outdent'
<img hspace="2" vspace=1 align=absmiddle src="images/deindent.gif" alt="Decrease Indent">
</div>
</td>
</tr>
<tr>
<td>
<div class="cbtn" onClick="cmdExec('indent')
<img hspace="2" vspace=1 align=absmiddle src="images/inindent.gif" alt="Increase Indent">
</div>
</td>
<!--<td>
<div class="cbtn" onClick="foreColor()" onmouseover="button_over(t
<img hspace="2" vspace=1 align=absmiddle src="images/fgcolor.gif" alt="Forecolor">
</div>
</td>-->
<td>
<div class="cbtn" onClick="cmdExec('createLi
<img hspace="2" vspace=1 align=absmiddle src="images/Link.gif" alt="Link">
</div>
</td>
</tr>
<tr>
<td height="50"></td>
</tr>
</table>
</td>
<tr>
</table>
</td>
</tr>
</table>
</body>
</html>
---------------------
end of editor.html
Another file, modal_dialog.js must be placed in the same folder as editor.html
modal_dialog.js:
---------------------
function button_over(eButton)
{
eButton.style.backgroundCo
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_out(eButton)
{
eButton.style.backgroundCo
eButton.style.borderColor = "threedface";
}
function button_down(eButton)
{
eButton.style.backgroundCo
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
}
function button_up(eButton)
{
eButton.style.backgroundCo
eButton.style.borderColor = "darkblue darkblue darkblue darkblue";
eButton = null;
}
var isHTMLMode=false
function document.onreadystatechang
{
idContent.document.designM
}
function cmdExec(cmd,opt)
{
if (isHTMLMode){alert("Please
idContent.document.execCom
}
function setMode(bMode)
{
var sTmp;
isHTMLMode = bMode;
if (isHTMLMode){sTmp=idConten
else {sTmp=idContent.document.b
idContent.focus();
}
function createLink()
{
if (isHTMLMode){alert("Please
cmdExec("CreateLink");
}
function foreColor()
{
var arr = showModalDialog("selcolor.
if (arr != null) cmdExec("ForeColor",arr);
}
----------------------
End of modal_dialog.js
There are also a lot of images which have to be put in a folder called Images. If you leave your e-mail address, I can send them to you.
Of course this only works with IE, and it works rather well. You can edit the HTML-source aswell as using a WYSISWG mode.
All it takes to post this into database is a little javascript. I can also send that to you if you'd like.
Let me know what you want to do.