Skip to content

use-tinymce-inline.adoc

Latest commit

 

History

History
51 lines (39 loc) · 1.97 KB

use-tinymce-inline.adoc

File metadata and controls

51 lines (39 loc) · 1.97 KB

Setup inline editing mode

{productname} has three main integration modes: a classic full editor mode, an inline editing mode, and a distraction-free mode.

The inline editing mode is used for merging the editing and reading views of the page for a seamless editing experience and true WYSIWYG behavior.

Inline editing mode does not replace the selected element with an iframe, but instead edits the element’s content in-place. Inline editors are designed:

  • To be "hidden" until the editable content is selected,

  • To use the CSS stylesheet of the page where it initializes, and

  • To have minimal UI around the content area to minimize the area occupied by the editor.

Enabling inline editing mode

Inline mode only works on content within a block element (such as: div or h1). To enable inline mode, set the inline option to true. For example:

<!DOCTYPE html>
<html>
<head>
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="{cdnurl}" referrerpolicy="origin" crossorigin="anonymous"></script>
  <script type="text/javascript">
  tinymce.init({
    selector: '#myeditablediv',
    inline: true
  });
  </script>
</head>

<body>
  <h1>{productname} Inline Editing Mode Guide</h1>
  <form method="post">
    <div id="myeditablediv">Click here to edit!</div>
  </form>
</body>
</html>

The following demonstration is using four {productname} editors in inline mode, two for the headings, and two for the body text.

liveDemo::inline[]

For information on inline mode and the inline setting, see: User interface options - inline.