Inline TinyMCE

Inline TinyMCE

The powerful TinyMCE wrapper allows you convert every element to TinyMCE editable content. See the changes the moment you type

The powerful TinyMCE wrapper allows you convert every element to TinyMCE editable content. See the changes the moment you type.

Check out the preview to see it in action.

Features

  • Cross Browser Support, even IE7
  • Works with older versions if jQuery (1.4.3+)
  • Very simple to implement in any of your projects
  • Super lightweight, only 3kb
  • Fully customizable. Add your TinyMCE initialize settings, set custom events and triggers
  • Supports TinyMCE 3.4.X (not Beta) and 3.5.X
Hide

Installation

Add Next Scripts to Head or Body Tag:

<!--load tinyMCE-->
<script src="tiny mce path /tiny_mce.js" type="text/javascript"></script>
<!-- load inlineTinyMCE.js-->
<script src="inlineTinyMCE path /inlineTinyMCE.js" type="text/javascript"></script>

Skin Modification:

Update your skin files located in:

tinymce_location\themes\advanced\skins\**your_skin**

Open content.css file and add next tags at the bottom of the code:

body {background:transparent!important;}

Open ui.css file and add next tags at the bottom of the code:

**your_skin** table.mceLayout {border:0; width:100%; border:none}
**your_skin** table.mceLayout tr.mceFirst td, **your_skin** table.mceLayout tr.mceLast td, **your_skin** .mceIframeContainer  { border:none; }

Initialize inlineTinyMCE plugin:

<script type="text/javascript">
    jQuery(function ($) {
        $("yor selector").inlineTinyMCE({
            settings: {
                theme: "advanced",
                mode: "none",
                directionality: "ltr",
                plugins: "inlinepopups,paste,autoresize",
                theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,numlist,bullist",
                theme_advanced_buttons2: "formatselect,fontsizeselect,|,forecolor,backcolor,|,pasteword",
                theme_advanced_buttons3: "",
                theme_advanced_toolbar_location: "external",
                theme_advanced_toolbar_align: "left",
                skin: "default_inline",
                convert_urls: false,
                inline_styles: true,
                accessibility_warnings: false,
                force_br_newlines: false,
                force_p_newlines: true,
                forced_root_block: '',
                convert_fonts_to_spans: true,
                content_css: "css/cssReset.css,css/cssLayout.css"
            }
        });
    });
</script>

Set your tinyMCE options but don't forget to add:

  • autoresize plugin (plugins: "autoresize")
  • Set mode to none
  • themeadvancedtoolbar_location to external
  • Add page css to the editor (See tinyMCE documentation).
Hide

Plugin Options

Options

settings : tinyMCE settings
eventType: Editor trigger(use jquery events: click, dblclick…)
saveButton : Save button options
    title: Title of the save button
    image: path to the save button image
    onclick: on save event 

Custom Events

onCancel: Cancel event
onBeforeRemove: Before editor removed event
onRemove: After editor removed event
Hide

Full Example

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Inline TinyMCE</title>
    <link href="css/cssReset.css" rel="stylesheet" type="text/css" />
    <link href="css/cssLayout.css" rel="stylesheet" type="text/css" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js" type="text/javascript"></script>
    <!--load tinyMCE-->
    <script src="tiny_mce/tiny_mce.js" type="text/javascript"></script>
    <!-- load inlineTinyMCE.js-->
    <script src="js/inlineTinyMCE.js" type="text/javascript"></script>
    <script type="text/javascript">
    jQuery(function ($) {
        $("#editor_area").inlineTinyMCE({
            settings: {
                theme: "advanced",
                mode: "none",
                directionality: "ltr",
                plugins: "inlinepopups,paste,autoresize",
                theme_advanced_buttons1: "bold,italic,underline,|,justifyleft,justifycenter,justifyright,justifyfull,|,link,unlink,|,numlist,bullist",
                theme_advanced_buttons2: "formatselect,fontsizeselect,|,forecolor,backcolor,|,pasteword",
                theme_advanced_buttons3: "",
                theme_advanced_toolbar_location: "external",
                theme_advanced_toolbar_align: "left",
                skin: "default_inline",
                convert_urls: false,
                inline_styles: true,
                accessibility_warnings: false,
                force_br_newlines: false,
                force_p_newlines: true,
                forced_root_block: '',
                convert_fonts_to_spans: true,
                content_css: "css/cssReset.css,css/cssLayout.css"
            },
            saveButton: {
                onclick: function (ed) {
                    $(this).data("inlineTinyMCE").removeEditor(ed);
                },
                title: "my save button",
                image: "/img/save.png"
            },
            onBeforeRemove: function () {
                console.log(this)
            },
            onCancel: function () {
                return confirm("Are you sure?");
            }
        });
    });
</script>
</head>
<body style="margin-top:100px;">
    <div id="editor_area">
        <h1>Click Me To edit</h1>
    <p>
        Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem
        Ipsum has been the industry's standard dummy text ever since the 1500s, when an
        unknown printer took a galley of type and scrambled it to make a type specimen book</p>
</div>
<script type="text/javascript">if(!NREUMQ.f){NREUMQ.f=function(){NREUMQ.push(["load",new Date().getTime()]);var e=document.createElement("script");e.type="text/javascript";e.async=true;e.src="https://d1ros97qkrwjf5.cloudfront.net/41/eum/rum.js";document.body.appendChild(e);if(NREUMQ.a)NREUMQ.a();};NREUMQ.a=window.onload;window.onload=NREUMQ.f;};NREUMQ.push(["nrf2","beacon-1.newrelic.com","7d8608a34f",416164,"YFdVYEsAVxdYAhAICVkddldNCFYKFgUBFwNbXUdRS05aC1cVAQ8SGFdTXU0=",0,52,new Date().getTime()]);</script>
    </body>
</html>
You need to log-in or create an account
  • Create an account
  • Log-in
Please use your real name.
Activation link will be sent to this address.
Minimum 8 characters
Enter your password again

Clicking this button confirms you read and agreed to the terms of use and privacy policy.

X

Save your watchlist

Fill your details below to receive project updates from your watch list - including new versions, price changes and discounts.

I agree to the terms of use and privacy policy.

3 licenses, starting from From » $12.99 14 day money-back guarantee View Licenses
or Get a quote

for customization or integration services

Post a comment

Or enter your name and Email
  • JR Jason Raymond 1 year ago
    Seems there is an issue on mobile devices. Can you confirm if this can be fixed? No editor functions show up
  • AS Arnold Simha Developer 2 years ago
    It's very simple. Set the save button to do what ever you want: saveButton: { title: "Save Content", image: 'images/ok_small.png', onclick: function (ed) { var editorContent= ed.getContent(); //save the content in database } }
    • M Mick89 License holderSingle Site License 2 years ago
      Hello, Thank you for your answer. In fact, I thought of being able to make like this: saveButton: { title: "Save Content", image: 'images/ok_small.png', onclick: function (ed) { var content = $('#editable').html(); $.ajax({ url: 'saveToDb.php', type: 'POST', data: { content: content } }); } } saveToDb.php would have all the codes necessary to record the data in my database. It would be also easier for me to thus protect script... Do you think that it is possible? Thanks again! Mick
    • AS Arnold Simha Developer 2 years ago
      Of course. You need to remove the editor and then save the data: saveButton: { title: "Save Content", image: 'images/ok_small.png', onclick: function (ed) { //remove editor $(this).data("inlineTinyMCE").removeEditor(ed); //get the data from html var content = $('#editable').html(); $.ajax({ url: 'saveToDb.php', type: 'POST', data: { content: content } }); } }
    • M Mick89 License holderSingle Site License 2 years ago
      Thanks! I did not receive the version not compressed with the purchase ! Is it normal? Mick
    • AS Arnold Simha Developer 2 years ago
      Please view pricing option. You bought a "Single Site License"
    • M Mick89 License holderSingle Site License 2 years ago
      Ok, I had not understood the principle of the licenses. It is also necessary to pay for the updates (bugs) after 6 months! Mick
    • AS Arnold Simha Developer 2 years ago
      The component has been tested on many environments without any errors.
    • M Mick89 License holderSingle Site License 2 years ago
      Hello, 1) I have an error message with IE8: Message: No valid argument. Line: 1 Character: 46713 Code: 0 URI: tiny_mce/tiny_mce.js 2) I would like to also use my version of TinyMCE 3.5.x. But, impossible to obtain the bars of navigation (icons) with this version. Is it necessary to modify something? Is it necessary to use TinyMCE 3.5.0.1 or TinyMCE 3.5.0.1 jQuery package? Thank! Mick
    • M Mick89 License holderSingle Site License 2 years ago
      I found for 2. I added the folder default_inline in the folder skins. But, I always have the error message in IE8. With this version the message is: Message: No valid argument. Line: 1 Character: 61584 Code: 0 URI: tiny_mce/tiny_mce.js An idea? Thanks again! Mick
    • AS Arnold Simha Developer 2 years ago
      The issue was fixed. Try to download again. Good luck and thank you for buying
  • M Mick89 License holderSingle Site License 2 years ago
    Hello, Your script is interesting! But, is there an example to record the data in a database? Is it necessary to use a URL in saveButton (url:myurl.php) ? Thank you for your answer. Mick