Important changes to Tiny Cloud pricing > Find out more

TinyMCE distraction-free editing mode

Theme that renders a lightweight UI for inline editing.

Contribute to this page

The Distraction-free theme renders the editor in lightweight inline mode. This mode provides options to quickly insert links, images, and tables into the content. For a sample view of this mode, see the Distraction-free editor example page.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true
});

Theme specific controls

quicklink

The quicklink quickly inserts and edits link inline.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
});

quickimage

quickimage inserts images from the local machine into the editor. These can be automatically uploaded by configuring image uploading.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

quicktable

quicktable quickly inserts a 2x2 table with 100% width.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

Related configuration options

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.