Solved

TinyMCE / FCKEditor Live Preview

Posted on 2008-10-28
13
1,088 Views
Last Modified: 2012-05-05
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.
0
Comment
Question by:Rassac
  • 8
  • 3
  • 2
13 Comments
 
LVL 6

Expert Comment

by:fourice
ID: 22826334
Well it's not a existing editor or something, but the code snippet below perhaps gives you an idea what is possible. It's very simple, but as soon as you start typing in the textarea the text will be shown in a div with some style properties. Of course you can do anything you want with it.
<script>

	function setMessage()

	{

		document.getElementById('preview_tekst').innerHTML = document.getElementById('aMessage').value.replace(/\n/g, "<br>");

	}

</script>

<textarea id="aMessage" style="height:150px; width:300px" onkeyup="setMessage()"></textarea>

<div id="preview_tekst" style="font-family: Verdana; font-size: 10pt; color: #ff0000"></div>

Open in new window

0
 

Author Comment

by:Rassac
ID: 22830422
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!
0
 
LVL 6

Accepted Solution

by:
fourice earned 500 total points
ID: 22830469
Do you mean like this:
<textarea id="aMessage" style="height:150px; width:300px" onkeyup="setMessage()"></textarea>

<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('aMessage').value.replace(/\n/g, "<br>");

	}

	document.getElementById('aMessage').value = document.getElementById('preview_tekst').innerHTML;

</script>

Open in new window

0
 

Author Comment

by:Rassac
ID: 22830586
Yes that's it! :) I will let you know how it goes when I try to implement with an editor.

Thanks.
0
 
LVL 108

Expert Comment

by:Ray Paseur
ID: 22830683
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
0
 

Author Comment

by:Rassac
ID: 22831650
So do you suggest anything else Ray?
0
Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

 
LVL 108

Expert Comment

by:Ray Paseur
ID: 22831955
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!
0
 

Author Comment

by:Rassac
ID: 22860717
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>

Open in new window

0
 

Author Comment

by:Rassac
ID: 22860730
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>

Open in new window

0
 

Author Comment

by:Rassac
ID: 22861955
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. :)  
0
 

Author Comment

by:Rassac
ID: 22861976
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.
0
 
LVL 6

Expert Comment

by:fourice
ID: 22865056
Can you post your latest code? I will try something as well, but it's possible this just doesn't work for FCKEditor.
0
 

Author Comment

by:Rassac
ID: 22865257
Hi, I managed to find the solution for TinyMCE. I will paste the code later on.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Introduction A frequently asked question goes something like this:  "I am running a long process in the background and I want to alert my client when the process finishes.  How can I send a message to the browser?"  Unfortunately, the short answer …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

930 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now