TinyMCE Fiddle

Run Save Fork Reset

Default Example

• Fiddle

  • Title
    

    Description
    Tags are getting overlapped (going inside another tag) in case of custom buttons

    TinyMCE Version
    tinymce6-cloud-stable tinymce6-cloud-testing tinymce6-cloud-dev tinymce5-cloud-stable tinymce5-cloud-testing tinymce5-cloud-dev tinymce4-cloud-stable tinymce4-cloud-testing tinymce4-cloud-dev edge 6.0.2 6.0.1 6.0.0 5.10.4 5.10.3 5.10.2 5.10.1 5.10.0 5.9.2 5.9.1 5.9.0 5.8.2 5.8.1 5.8.0 5.7.1 5.7.0 5.6.2 5.6.1 5.6.0 5.5.1 5.5.0 5.4.2 5.4.1 5.4.0 5.3.2 5.3.1 5.3.0 5.2.2 5.2.1 5.2.0 5.1.6 5.1.5 5.1.4 5.1.3 5.1.2 5.1.1 5.1.0 5.0.16 5.0.15 5.0.14 5.0.13 5.0.12 5.0.11 5.0.10 5.0.9 5.0.8 5.0.7 5.0.6 5.0.5 5.0.4 5.0.3 5.0.2 5.0.1 5.0.0 4.9.11 4.9.10 4.9.9 4.9.8 4.9.7 4.9.6 4.9.5 4.9.4 4.9.3 4.9.2 4.9.1 4.9.0 4.8.5 4.8.4 4.8.3 4.8.2 4.8.1 4.8.0 4.7.13 4.7.12 4.7.11 4.7.10 4.7.9 4.7.8 4.7.7 4.7.6 4.7.5 4.7.4 4.7.3 4.7.2 4.7.1 4.7.0 4.6.7 4.6.6 4.6.5 4.6.4 4.6.3 4.6.2 4.6.1 4.6.0 4.5.12 4.5.11 4.5.10 4.5.9 4.5.8 4.5.7 4.5.6 4.5.5 4.5.4 4.5.3 4.5.2 4.5.1 4.5.0 4.4.3 4.4.2 4.4.1 4.4.0 4.3.13 4.3.12 4.3.11 4.3.10 4.3.9 4.3.8 4.3.7 4.3.6 4.3.4 4.3.3 4.3.2 4.3.1 4.3.0 4.2.7 4.2.6 4.2.5 4.2.4 4.2.3 4.2.2 4.2.1 4.2.0 4.1.10 4.1.9 4.1.8 4.1.7 4.1.6 4.1.5 4.1.4 4.1.3 4.1.2 4.1.1 4.1.0 4.0b2 4.0b1 4.0.28 4.0.25 4.0.24 4.0.23 4.0.22 4.0.21 4.0.20 4.0.19 4.0.18 4.0.17 4.0.16 4.0.15 4.0.14 4.0.13 4.0.12 4.0.11 4.0.10 4.0.9 4.0.7 4.0.6 4.0.4 4.0.3 4.0.2 4.0.1 4.0 3.5b3 3.5b2 3.5b1 3.5.12 3.5.11 3.5.10 3.5.9 3.5.8 3.5.7 3.5.6 3.5.5 3.5.4.1 3.5.4 3.5.3 3.5.2 3.5.1.1 3.5.1 3.5.0.1 3.5 3.4.9 3.4.8 3.4.7 3.4.6 3.4.5

    Doctype
    HTML5 Quirks

<script type="text/javascript"> tinymce.init({ selector: "textarea", plugins: [ "advlist autolink lists link image charmap print preview anchor", "searchreplace visualblocks code fullscreen", "insertdatetime media table paste" ], toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image | customInsertButton1 | customInsertButton2", setup: function (editor) { editor.ui.registry.addButton('customInsertButton1', { text: 'My Button 1', onAction: function () { editor.insertContent('<span class="container1"><span class="icon1">1</span>[[Test One]]</span>'); } }); editor.ui.registry.addButton('customInsertButton2', { text: 'My Button 2', onAction: function () { editor.insertContent('<span class="container2"><span class="icon2">2</span> Test Two</span>'); } }); } }); </script> <form method="post" action="dump.php"> <textarea name="content"></textarea> </form>