htmlArea

A directory of browser-based WYSIWYG editors

  MAIN
INDEX
SEARCH
POSTS
WHO'S
ONLINE
LOG
IN

Home: htmlArea 3 (beta): htmlArea 2 & 3 archive (read only): htmlArea v3.0 - Discussion:
loading plugin after changing html area


The htmlArea 2 & 3 editors have been discontinued.

We've made these forums available as a read-only reference and knowledge-base for people using or developing editors based on htmlArea 2 or 3.

Anyone who is interested in taking over version 2 or 3 is free to do so. All we ask is that you choose a new name that doesn't have "htmlarea" in it to avoid confusion with this site. We'll even give you a link in the directory to make it easier for people to find you. If you are developing or hosting an htmlArea based-editor under a new name, please submit it to our directory.

 


godedog
Novice

Nov 22, 2003, 7:28 AM

Post #1 of 8 (1619 views)
Shortcut
loading plugin after changing html area Can't Post

Arggg! Mad

Can someone please help...
How do I load the tble operations plugin once I have customised HTMLarea
I have been trying for days and I really need some HELP PLEASE!!!! below is my code,Thanks




Code
   
<!-- load the main htmlArea files -->
<script type="text/javascript" src="htmlarea.js"></script>
<script type="text/javascript" src="lang/en.js"></script>
<script type="text/javascript" src="dialog.js"></script>
<script type="text/javascript" src="popupwin.js"></script>
<!-- load the plugins -->
<script type="text/javascript">
HTMLArea.loadPlugin("TableOperations");
</script> <style type="text/css">
@import url(htmlarea.css);
</style>



<script type="text/javascript">
var editor = null;
function initEditor() {
// create an editor for the "ta" textbox
editor = new HTMLArea("content");
editor.registerPlugin("TableOperations");




function clickHandler(editor, buttonId) {
switch (buttonId) {
case "Save":
editor._textArea.value = editor.getHTML();
document.content_form.submit();
break;
case "BrowseFile":

var myTitle = "tse";
var fileLink = showModalDialog("popups/file/insert_file.php",
myTitle,
"resizable: no; help: no; status: no; scroll: no;dialogHeight:550px;dialogWidth:700px;center:yes ");
if (fileLink) { editor.insertHTML(unescape(fileLink));
}
break;



}
};



var config = new HTMLArea.Config();

// Register our custom buttons
config.registerButton("Save", "Save", "images/save.gif", false, clickHandler);
config.registerButton("BrowseFile", "Browse File", "images/pdf.gif", false, clickHandler);




config.toolbar = [
[ "fontname", "space",
"fontsize", "space",
"formatblock", "space",
"bold", "italic", "underline", "separator",
"strikethrough", "subscript", "superscript"],

[ "Save","justifyleft", "justifycenter", "justifyright", "justifyfull", "separator",
"insertorderedlist", "insertunorderedlist", "outdent", "indent", "separator",
"forecolor", "hilitecolor", "separator",
"inserthorizontalrule", "createlink","BrowseFile", "insertimage", "inserttable", "separator",
"separator","about", "htmlmode","separator","textindicator"]
];

//config.pageStyle ='body { background-color: yellow; color: black; font-family: verdana,sans-serif } ' + 'p { font-width: bold; } ';




HTMLArea.replace("content", config);



}
</script>



</head>
<body onload="initEditor()">



<form name="content_form" method="POST" action="index.php">
<table align="center" width="740" height="500" border="0" cellpadding="1" cellspacing="0" bgcolor="#CCCCCC">
<tr>
<td valign="top"><table width="740" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="25" background="../pics/menu_top.jpg"><p>WYSISYG - You are currently editing "<? echo $_GET['pgid'];?>"</p></td>
</tr>
</table>
<textarea name="content" style="width:740; height:500;" rows="25" id="content" w><? echo $body;?></textarea></td>
</tr>
</table>
<input type="hidden" value="<? echo $id;?>" name="id">
</form>




<script type="text/javascript">
function mySubmit() {
// document.edit.save.value = "yes";
document.edit.onsubmit(); // workaround browser bugs.
document.edit.submit();
};
</script>


ephemeros
Novice

Nov 22, 2003, 8:04 AM

Post #2 of 8 (1615 views)
Shortcut
Re: [godedog] loading plugin after changing html area [In reply to] Can't Post

Try to move your config settings to htmlarea.js! I know this isn't recommended (and less customizeable), but this is how I got htmlArea working for myself.. don't ask me whyCrazy

greetz
-eph


godedog
Novice

Nov 22, 2003, 8:35 PM

Post #3 of 8 (1599 views)
Shortcut
Re: [ephemeros] loading plugin after changing html area [In reply to] Can't Post

THanks heaps for the reply I will try it out !

Thanks Again!


godedog
Novice

Nov 22, 2003, 9:21 PM

Post #4 of 8 (1597 views)
Shortcut
Re: [godedog] loading plugin after changing html area [In reply to] Can't Post

Well that worked a treat!
But surely there has to be a way of using the custimise feature's of HTMLarea and loading plugins
at the same time!!!!!!!!!Cool

PS thanks mishoo for a great program!


mishoo
User

Nov 23, 2003, 7:48 PM

Post #5 of 8 (1587 views)
Shortcut
Re: [godedog] loading plugin after changing html area [In reply to] Can't Post

B-)

Thanks for thanks. Yes, the idea of modifying htmlarea.js itself is poor, and yes there is a better way ;-)

Your code is plain messy (no offense) and I'll try to explain below why.

1. you're creating an HTMLArea object and you correctly register the TableOperations plugin for it.

2. later you create a new Config object which you modify to suit your needs. This new Config object is totally unrelated to your previously created editor.

3. you call HTMLArea.replace which creates a _new_ editor with your config ;-) and applies it to your textarea.

So the point is that you're uselessly create 2 HTMLArea objects when you only need one; the one where you register the TableOperations plugin gets lost and is never used.

The resolution is this:

1. create a configuration object, like you do.

2. create an editor, like you do (editor = new HTMLArea...). then register the TableOperations plugin, _like you do_. ;-)

3. call editor.generate() which will actually create the HTML elements for your editor and apply it to the textarea which has been passed at new HTMLArea(..).

Hope all this is clear.. The documentation is kind of outdated--sorry--however I'm sure you could have find about this in some example file ;-) (i.e. take a look in table-operations.html from the distribution).
--
Mihai Bazon,
dynarch.com
Applied Web Standards


godedog
Novice

Nov 23, 2003, 8:16 PM

Post #6 of 8 (1584 views)
Shortcut
Re: [mishoo] loading plugin after changing html area [In reply to] Can't Post

Hi Mishoo,
Thanks for the reply!

The problem i faced is when I used the sample htmleditor with the table plugin found in the download,
and used the sample in the documentation to change the button configuration the table plugin was lost!

This was all copy past with the same results, so hence my problem of loading a plugin when you have
made configuration changes to the menu!

Unfortunatly I dont think I am the only person to find this difficult without making changes in the
.js file!

Perhaps if i ask nicley you may provide a sample that works! PLEASE!!!!

P.S the code I posted was and is messy but it is for testing only. So no offence taken....


mishoo
User

Nov 23, 2003, 8:58 PM

Post #7 of 8 (1580 views)
Shortcut
Re: [godedog] loading plugin after changing html area [In reply to] Can't Post

OK.. if you read closely my previous post you should be able to write the code, but here we go... (beware it's not tested).

1. get some objects.


Code
// create the editor 
var editor = new HTMLArea("id-of-your-textarea");
// retrieve the config object
var config = editor.config;


or


Code
// create the config object yourself 
var config = new HTMLArea.Config;
// and make an editor for it
var editor = new HTMLArea("id-of-your-textarea", config);


I would prefer the first variant.

2. add your own configuration


Code
config.toolbar = [ .. ]; // you figure what to put here ;-)


3. register the plugin(s).


Code
editor.registerPlugin("TableOperations");


If you are using a new HTMLArea (from CVS) you can omit the quotes around TableOperations in the above line.

4. generate() the editor.


Code
editor.generate();


The order in which you do all these steps isn't all that important (well, except for common sense, like, you don't use the editor object before creating it, right? ;-). But you have to be careful at some details. For instance, you could call registerPlugin _before_ you add your own configuration. However, in this case you have to be careful not to overwrite the whole toolbar. Setting the config.toolbar variable like you do overwrites its content, completely, and if you do this the TableOperations buttons will magically disappear ;-) For this reason, calling registerPlugin after changing the toolbar will ensure the buttons are there.

On the other hand, here's when you might want to first call registerPlugin. Suppose you're not interested to have _all_ the buttons in the TableOperations plugin, but only the table, row and cell properties. In this case you would call registerPlugin and _then_ modify the configuration (i.e. by removing some buttons). Such functionality was so commonly requested that it's actually available in the latest CVS code.

Hope this helps. That's all folks ;-)
--
Mihai Bazon,
dynarch.com
Applied Web Standards


godedog
Novice

Nov 24, 2003, 6:48 AM

Post #8 of 8 (1568 views)
Shortcut
Re: [mishoo] loading plugin after changing html area [In reply to] Can't Post

THANK YOU MISHOO !!!!!!

Finally it worked....... Blush

 
 
 


Search for (options)