Inline TinyMCE

Inline TinyMCE

Released 3 years ago , Last update 3 years ago

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

Pricing

$12.99

Single Site License

  • Perpetual license

  • 1 site, unlimited servers

  • No distribution (hosted use only)

  • Commercial use

$39.99

Developer License

  • Perpetual license

  • Unlimited projects

  • Can distribute code and binary products

  • Commercial use

  • 6 months support

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).

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

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>
3 licenses, starting from From » $12.99 View Licenses

Get A Quote

What do you need?
  • Custom development
  • Integration
  • Customization / Reskinning
  • Consultation
When do you need it?
  • Soon
  • Next week
  • Next month
  • Anytime

Thanks for getting in touch!

Your quote details have been received and we'll get back to you soon.


Or enter your name and Email
  • JR Jason Raymond 2 years ago
    Seems there is an issue on mobile devices. Can you confirm if this can be fixed? No editor functions show up
  • M Mick89 License holderSingle Site License
    Purchased on May 20, 2012
    3 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