hello,
I have a text area and a button, I want the text area to render as tinymce ONLY IF the button was clicked
using this dynamic loading approach, the loading time of a page will be much faster
guy, how to do this?
thanks...
Have a look at the examples in the TinyMCE wiki
the example above is not dynamic loading...just simple toggle on and off
dynamic loading means to download the javascript on demand, this can save a lot of bandwidth when most user don't want the editor
Don't know if you can add whole JS libraries at runtime to your DOM tree - maybe you could do that with AJAX (xmlhttprequest...).
My approach to such a requirement would be too offer a separate link next to your raw textarea and let the server (i.e. Ruby / PHP / ASP) decide wether to include the TinyMCE stuff or not.
For example "/editor.rhtml?tinymce=true" vs. "/editor.rhtml?tinymce=false" - instead of using GETs, this could be done with cookies / sessions variables as well.
hi guy,
i think i am almost done on the dynamic loading issue, but i need some help from expert:
pls try out the following code:
-----------------------------------
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Word example</title>
<!-- TinyMCE -->
<!-- /TinyMCE -->
</head>
<body>
<a href="example_full.htm">[Full featured example]</a> <a href="example_advanced.htm">[Advanced example]</a> <a href="example_simple.htm">[Simple example]</a> [Word example]
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<h3>Word example</h3>
This example shows you how TinyMCE can be configurated to function with Word content in the best possible way. TinyMCE is configured to auto convert/cleanup pasted Word content in this example. It's has also a custom CSS that makes paragraphs marginless as in Word.<br /><br />
<textarea id="elm1" name="elm1" rows="15" cols="80" style="width: 100%">
<p>Some paragraph</p>
<p>Some other paragraph</p>
<p>Some <b>element</b>, this is to be editor 1. <br /> This editor instance has a 100% width to it.
<p>Some paragraph. <a href="http://www.sourceforge.net">Some link</a></p>
<img src="logo.jpg"></p>
</textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
<input type="button" value="dynamic load tiny mce!" onclick="dynamicLoadTinyMCE()" />
</form>
</body>
</html>
<script type="text/javascript">
//dynamicLoadTinyMCE();
function dynamicLoadTinyMCE() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "../jscripts/tiny_mce/tiny_mce_src.js";
document.getElementsByTagName('head')[0].appendChild(script);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "../jscripts/tiny_mce/mytinymce.js"
document.getElementsByTagName('head')[0].appendChild(script);
tinyMCE.onLoad();
}
</script>
--------------------------------------------------------------------------------
when i click the button, error occur: Error: Could not find the template function: TinyMCE_advanced_getEditorTemplate...
anyone can help to solve the problem?
i think dynamic loading is cool
problem solved by modifying the source code, now the tinymce can work in real-dynamic mode!
@peter: could we know what you did to make your code run?
Other question: When loading a new page, the dynamically downloaded JS code remains in the browser chache as it would with static JS includes?
Would like to get a working demo for this...
regards,
kris
Peter, Krisu.... Is there a working demo? I need very similar functionality, and am interested in looking over anything you might have in regards to dynamically loading TinyMCE only when I need it!
Thanks, Druman
dammit!!
peteryip PLEASE share your solution with us!! I need much this!!! I want inser in my ajax system...
Thanks
*bump*
I think most people don't understand what a lot of us are trying to do. This quick post area is NOT the example we need. The wiki example of setting a textarea as the editor later (the one where you can turn it on or off) is NOT an example either.
Currently I have a tinymce editor textarea on my page. When I click save it tosses the contents to the db via ajax. Ajax then replaces the div the tinymce editor is sitting inside creating a new textarea with the new content.
At this point the textarea is just that a textarea, there is NO tinymce editor loaded in. The old tinymce textarea has been replaced with new content bought in by ajax. I have a callback on the ajax function that then runs this:
tinyMCE.execCommand('mceAddControl', true, 'target_div');
The textarea succuessfully becomes the tinymce editor. HOWEVER, as soon as I try to save again or place the cursor back into the editor I get that lovely little error "this.getDoc() has no properties". This is only happening on firefox for me and IE works fine.
I have a feeling it has something to do with the textarea getting wacked by ajax and perhaps the tinymce object, which is not reloaded by ajax, getting confused as the textarea has been replaced.
Last edited by iceboxqs (2006-04-18 01:59:11)
Hmm, I think there is a better approach in form of performance. Use the mceSetContent command when the ajax is returning new contents instead of replacing the whole div. The editor will otherwice flicker since you need to reinitialize it each time it's both ugly and a waste of CPU and bandwidth. 
Here is the command:
tinyMCE.execCommand('mceSetContent', false, ajaxHTML);
I totally agree. There is, however, more then just the text editor content being saved at that point which requires the whole area rebuilt.
Thanks for the tip though, I will see if I can work that in somehow.
Further Testing:
Perhaps there is something more, or something else I am missing.
The app I am working on allows you to view a set of records. If you choose to edit a record ajax replaces the contents of that listing of records with the edit view for the record. The old list view html is blown away and replaced with the edit view code. Tinymce in gecko works fine at this point.
I close the record and switch back to the list view of all the records. If I go back to editing a record I get the same error of this.getDoc().
I am only using tinyMCE.init once and that is when the main index loads. When the view is changed to edit mode I have to call tinyMCE.execCommand(\'mceAddControl\', true, \'npContent\'); to change the text area.
If this has been done more then once in gecko, I get the error. IE does not have a problem. I have tried calling tinyMCE.init again but I still get the same error.
My only guess is that tinymce sets up some reference to the iframe. Since tinymce is initalized at the index this reference is not changed when ajax changes the content for the different views in my app. That reference is broken when ajax removes the iframe the first time. IE doesn't seem to care, perhaps because the ID of the iframe is unchanged. Gecko on the other hand breaks.
Am I barking up the wrong tree here?
Last edited by iceboxqs (2006-04-18 18:25:10)
Figured it out.
Because I load the tinyMCE javascript file only once I was running into instance problems.
Problem:
- User is at list view of records.
- User edits a record.
- TinyMCE loads fine, instance is at 0.
- User edits and saves the record and heads back to listing view
- Because the listing view and edit view are changed by ajax that instance is still at 0
- User edits another record, instance is now moved to 1.
- In gecko this causes the getDoc error.
Why this causes an error I am not totally sure. I was checking the TinyMCE_Control contentWindow when it was set and then later when getDoc tried to use it. When it was set contentWindow.document was good. When getDoc called it later contentWindow.document was null.
There may be some relation between the TinyMCE_Engine and TinyMCE_Control I am not aware and part of the tool may be pointing at instance 1 while the other half is looking for instance 0.
The Fix:
For my app I just set the tinyMCE.idCounter to zero before I call mceAddControl.
tinyMCE.idCounter=0;
tinyMCE.execCommand(\'mceAddControl\', true, \'npContent\');
The example of the wiki toggle might work as well, I haven't tried it. One would have to add tinyMCE.execCommand("mceRemoveControl", false, sEditorID); whenever the user leaves the editing view.
I get the feeling that tinyMCE was not ment to be used in this fashion or is there a bug with gecko? Or is IE doing some voodoo is shouldn't by not having a problem with the instances?
Last edited by iceboxqs (2006-04-18 21:07:56)
dammit!!
peteryip PLEASE share your solution with us!! I need much this!!! I want inser in my ajax system...
Thanks
I just found this thread today and was looking for the same functionality. The document.writes are causing the problem. They should append the script to the DOM a better way.
Around line 362:
document.write('<sc'+'ript language="javascript" type="text/javascript" src="' + url + '"></script>');
-----^^^^^^^^^^^^^^
Changing the previous line to the following fixes the problem.
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = url;
document.getElementsByTagName('head')[0].appendChild(script);
But, line 390 has a document.write for CSS stuff that needs to be changed to something similar as well. Shall I report it as a bug?
cjhpsu,
is that something not solved by strict_loading_mode? i'm not sure but i thought it did something like what you just mentioned.
anyone?
Does anyone have a working example of this. I've tried the techniques suggested on this board, but keep getting errors that tinyMCE is not defined...
Hi,
I've been plugging away with tinyMCE trying to get it to play well with a radical new AJAX framework I've been playing around with called Freja (http://www.csscripting.com/freja).
Up until now it's been a nightmare getting tinyMCE to load properly or at all for that matter. After a few hours plugging about I finally got it to work in my testing environment (whether it works in production is yet to be seen).
To do this, I added the following to the head of the main html file:
<script type="text/javascript">
tinyMCE.init({
mode : "exact",
theme : "simple",
auto_reset_designmode : true
});
</script>Certain options seem to throw a this.getDoc() has no properties error in Firefox but the ones above seem to still work fine.
Then, I have 2 functions called by the Freja/AJAX code to create and destroy the tinyMCE instances:
// initilialises the editor, setting the internal id counter to zero which seems to take care of multiple instances
function initEditor(){
tinyMCE.idCounter=0;
tinyMCE.execCommand( 'mceAddControl', true, 'result/record/contents' );
}
// Destroys the instance - very important otherwise you get all sorts of nasty errors
function killEditor() {
tinyMCE.execCommand( 'mceRemoveControl', true, 'result/record/contents' );
}Finally, don't forget to call tinyMCE.triggerSave() before submitting the form.
Caveat: this is working just nicely for me using Freja, I can't say how well it would work using other AJAX frameworks and I don't know if this is going to cause some big nasty memory leak that will end up killing the browser. I did a cursory check using Windows Task Manager and it seems to behave relatively well in both IE and Firefox (any memory used is freed up) but I can't be sure 'cos I'm not a very good Javascript programmer.
Hope this helps anyone pulling their hair out.
Cheers
Chris D
Alright, I don't have a demo here, but I just registered so I could post some results that borrow very heavily from El Bizarro here (thanks btw ). (I wanted this functionality so you could click on a link and have a tinyMCE textbox appear next to it.) I just made these two functions here:
function tinyMCEInit(id){
tinyMCE.execCommand( 'mceAddControl', true, id);
}
function tinyMCEDeinit(id){
tinyMCE.execCommand( 'mceRemoveControl', true, id);
}Simple as that. I didn't even need the tinyMCE.idCounter = 0 line, but your results may vary with that. I also never have more than two editors existing at once, so that might have something to do with it...those two work fine though. Hell, just looking at the "Toggle TinyMCE" link at the bottom of this reply window you can see they did the same thing:
function toggleTinyMCE() {
if (tinyMCE_on == true) {
// if mce is on, we toggle it off and convert to BBCode
tinyMCE.execCommand("mceRemoveControl", false, "req_message");
document.forms[0].req_message.value = convertFromMCEToBBCode(document.forms[0].req_message.value);
tinyMCE_on = false;
return;
} else {
// if mce is off, we toggle it on and convert to HTML code
document.forms[0].req_message.value = convertFromBBCodeToMCE(document.forms[0].req_message.value);
tinyMCE.execCommand("mceAddControl", false, "req_message");
tinyMCE_on = true;
return;
}
}As for fabrizim, make sure that everything is configured correctly so that you can load the tinyMCE editor statically before dynamically...
Lastly, taking a look at my tinyMCE.init() call, I have nothing fancy in there, just the usual "mode: textareas, theme: advanced" stuff.
Good luck guys.
i already made this work long time ago using an eariler version of tinymce, but not the latest version
this is the reason why i ask the developer in this post:
http://tinymce.moxiecode.com/punbb/view … hp?id=3268
Last edited by tszming (2006-07-13 11:50:24)
Okay, the famous AJAX bug is solved. But is there any way that i can change the theme dinamically? From basic to advanced and vice versa? The problem is that I need to have a TinyMCE init function in the <head> tag, and afterwards I make an AJAX Remote Procedure Call which returns the <textarea> and then I reset the counter and add the control again. But before adding the control, can I change the theme somehow?
Or maybe I should use the dynamic TinyMCE load havin 2-3 different init() files for the different themes and call it like that?
Last edited by maahacka (2006-10-06 11:18:38)
What about iframe, you can allways set up your editor in external page and insert iframe with this page as a source in your primary page. That should work and without tons of fixes...
TinyMCE works in an iframe by default.. Moreover the editor is in a somehow external page (I mean it's being called by means of XMLHTTPRequest). The problem is that the whole website is a little bit complicated (its a WYSIWYG CMS for managing thousands of different websites) and it's all being made by means of RPC's. One way to change the theme is to load two inits of TinyMCE, working on different textarea id's, but that's not that intelligent and ellegant. I would prefer to perform a dynamic TinyMCE init, calling a different init function after loading the tiny_mce_src.js... Unfortunatelly the DOM script provide above appears to have some strange behaviour after clicking on the link. Seems like the TinyMCE Object is not initialized..
Last edited by maahacka (2006-10-06 13:00:15)
I accidentally happened to fix it. The function goes like this:
function dynamicLoadTinyMCE() {
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "../jscripts/tiny_mce/tiny_mce_src.js";
document.getElementsByTagName('head')[0].appendChild(script);
var script = document.createElement('script');
script.type = 'text/javascript';
script.src = "../jscripts/tiny_mce/mytinymce.js"
document.getElementsByTagName('head')[0].appendChild(script);
}
and I moved the TinyMCE.onLoad() in the onComplete section of the AJAX.Updater call.
did you modified the source code?
You are not logged in. Please login or register.