Tiny MCE Key Press

2
votes

I am trying to make a preview box which works on .keyPress() like the one when you submit a question to Stack Overflow, how ever the difference is I wish to use the tiny mce editor and have it recognize the enter key so that it will keep the same format as what the user enters, I have had a look here

Tinymce on keypress I am try to display the preview of the content

But to be honest I'm quite new to this and don't really understand how to implement it properly. I have the Tiny mce editor working great but now

What I am wanting to do is create a div where it gets the content from tiny mce editor and preview it in another div.

1
jquerytinymcekeypress
Are you aware that tinymce has a preview button? In my case it is listed on the far right below the arrow of "font size". It's icon resemble a blank page with a magnifier in it (I am using the advanced theme) – zequinha-bsb
what i am wanting is to have a completly different div to preview it to – Friendly Tech

1 Answers

1
votes

The question you linked to pretty much sums it up. First, what you'll do is add a preview <div> to your page, something like:

<div id="tiny-mce-preview"></div>

(You have this question tagged with jQuery, so I'm going to assume you're using the TinyMCE jQuery package.) Within your TinyMCE initialization, add a function to the onKeyPress event that copies the TinyMCE content to your preview <div>. So, the full initialization might look like something like this:

var theEditor = $('textarea').tinymce({
    script_url: 'path/to/your/tinymce/tiny_mce.js',
    height: "400",
    width: "600",

    //
    // ... whatever other options you may have ...
    //

    // Capture the onKeyPress event and do something with TinyMCE's content
    setup: function (theEditor) {
        // "theEditor" refers to the current TinyMCE instance
        theEditor.onKeyPress.add(function () {
            // Get the current editor's content
            var content = theEditor.getContent();
            // Find our "preview" div
            // Set it's content to be the same as the editor's
            document.getElementById("tiny-mce-preview").innerHTML = content;
        })
    }
});

Any time a key is pressed within the TinyMCE instance, the preview div's content will be set to that of the TinyMCE instance.