Single Site License

  • Perpetual license (does not expire)
  • 1 site, unlimited servers
  • No distribution (hosted use only)
  • Commercial use allowed
  • No code modifications
$12.99 Read License

Two Site License

  • Perpetual license (does not expire)
  • 2 sites, unlimited servers
  • No distribution (hosted use only)
  • Commercial use allowed
  • 6 months support
$20.99 Read License

Developer License

  • Perpetual license (does not expire)
  • Unlimited projects
  • Can distribute code and binary products
  • Commercial use allowed
  • 6 months support
$39.99 Read License

14 Day money-back guarantee

Full refund within 14 days of purchase date.

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.

Inline TinyMCE

Inline TinyMCE
Developed by Arnold Simha, Released Apr 25, 2012

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

JavaScript

Tags: editor , inline editor , tinymce

View Licenses $12.99+

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

Related components

Proxy Server FREE
jQuery 2d transform FREE
Lightnode FREE
Back to top

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
  • theme_advanced_toolbar_location to external
  • Add page css to the editor (See tinyMCE documentation).
Back to top

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
Back to top

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>
View Licenses $12.99+

User Reviews

No reviews have been submitted yet.
Read all 13 comments »

Questions & Comments


Or enter your name and Email
  • Jason Raymond 2 months ago
    Seems there is an issue on mobile devices. Can you confirm if this can be fixed? No editor functions show up
    Reply Flag
  • Arnold Simha Developer 1 year 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
    }

    }
    Reply Flag
    • Mick89 License holderSingle Site License 1 year 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
      Reply Flag
    • Arnold Simha Developer 1 year 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
      }
      });
      }
      }
      Reply Flag
    • Mick89 License holderSingle Site License 1 year ago
      Thanks!

      I did not receive the version not compressed with the purchase ! Is it normal?

      Mick
      Reply Flag
    • Arnold Simha Developer 1 year ago
      Please view pricing option. You bought a "Single Site License"
      Reply Flag
    • Mick89 License holderSingle Site License 1 year 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
      Reply Flag
    • Arnold Simha Developer 1 year ago
      The component has been tested on many environments without any errors.
      Reply Flag
    • Mick89 License holderSingle Site License 1 year 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
      Reply Flag
    • Mick89 License holderSingle Site License 1 year 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
      Reply Flag
    • Arnold Simha Developer 1 year ago
      The issue was fixed. Try to download again.
      Good luck and thank you for buying
      Reply Flag
  • Mick89 License holderSingle Site License 1 year 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
    Reply Flag
You must be logged-in to vote. Log-in to your account or register now.