Rassac
asked on
TinyMCE / FCKEditor Live Preview
Is it possible to create a live preview of what is being typed in the editors?
So for instance on one side I have a div tag / table data cell and on the other side there is an editor that onchange / on key up the div tag will be populated.
I know FCKEditor has a preview but could this preview be done live?
Maybe some other editors can be of help as well, so I'm not really fussy with which editor has to be used.
Let me know if anything is not clear enough.
Thanks.
So for instance on one side I have a div tag / table data cell and on the other side there is an editor that onchange / on key up the div tag will be populated.
I know FCKEditor has a preview but could this preview be done live?
Maybe some other editors can be of help as well, so I'm not really fussy with which editor has to be used.
Let me know if anything is not clear enough.
Thanks.
ASKER
Hi,
One problem I think I will face with the code above is that it doesn't get the current data in the div tag for update in the input text field.
Haven't tested yet if I can implement the above example in an FCKEditor or any other editor. Will test it out and leave feedback.
In the meantime it would be grateful if you can adjust the code above to cater for the problem mentioned.
Thanks!
One problem I think I will face with the code above is that it doesn't get the current data in the div tag for update in the input text field.
Haven't tested yet if I can implement the above example in an FCKEditor or any other editor. Will test it out and leave feedback.
In the meantime it would be grateful if you can adjust the code above to cater for the problem mentioned.
Thanks!
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Yes that's it! :) I will let you know how it goes when I try to implement with an editor.
Thanks.
Thanks.
Just theorizing here, but I think I'm on the right track... You need an AJAX interface for this to work. I sure hope you find one - it sounds like a VERY useful tool. ~Ray
ASKER
So do you suggest anything else Ray?
No, I'm not very conversant in AJAX - I just understand the concepts, but since this is posted in the AJAX zone you will be likely to get some answers here. I'm looking forward to seeing what comes back!
ASKER
Unfortunately it didn't work with TinyMCE - maybe I'm doing something wrong. The data from the div tag is inserted in the TinyMCE editor, however the live preview doesn't work. Here's my code snippet:
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<textarea id="elm1" name="elm1" rows="15" cols="80" style="height:150px; width: 80%" onkeyup="setMessage()"></textarea>
<br />
<input type="submit" name="save" value="Submit" />
<input type="reset" name="reset" value="Reset" />
</form>
<div id="preview_tekst" style="font-family: Verdana; font-size: 10pt; color: #ff0000">Some current data in the div...</div>
<script>
function setMessage()
{
document.getElementById('preview_tekst').innerHTML = document.getElementById('elm1').value.replace(/\n/g, "<br>");
}
document.getElementById('elm1').value = document.getElementById('preview_tekst').innerHTML;
</script>
ASKER
Also, I found out that the script doesn't work as soon as I add the below code in the head section:
<script type="text/javascript">
tinyMCE.init({
mode : "textareas",
theme : "simple"
});
</script>
ASKER
Hi, I tried the same thing with fckeditor and the preview worked, however there's still a small problem. Text formatting is not applied in the text box.
Any help with this please?
Thanks. :)
Any help with this please?
Thanks. :)
ASKER
Just to clarify the above, FCKEditor can switch between Textarea and FCKEditor. The preview does not work from the FCKEditor. no wonder why not even the text formatting works.
Can you post your latest code? I will try something as well, but it's possible this just doesn't work for FCKEditor.
ASKER
Hi, I managed to find the solution for TinyMCE. I will paste the code later on.
Open in new window