Tinymce - 在Tinymce Div之外添加自定义按钮

时间:2016-02-02 07:14:40

标签: javascript plugins tinymce tinymce-4 tinymce-plugins

您好我正在尝试从启用Tinymce的div中提取按钮。

我目前的代码是 -

<!DOCTYPE html>
<html class="codepen">
  <head>
    <meta charset="UTF-8">
    <meta name="google" value="notranslate">
    <title>CodePen - Tinymce - Example</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="//codepen.io/assets/reset/normalize.css">
    <link rel='stylesheet prefetch' href='//www.tinymce.com/css/codepen.min.css'>
  </head>

    <body>

        <div>
        <button type="button">Bold</button>
        <button type="button">Underline</button>
        </div>


        <div id="tinymce_editor">

        </div>


        <div>
        <button type="button">Italic</button>
        <button type="button">Super Script</button>
        </div>

    </body>

    <script src='//cdn.tinymce.com/4/tinymce.min.js'></script>

    <script>
        tinymce.init({
            selector: 'div#tinymce_editor',
            height: 200,
            //plugins: ['advlist autolink lists link image charmap print preview anchor',              'searchreplace visualblocks code fullscreen', 'insertdatetime media table contextmenu paste code'  ],
            //toolbar: 'insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image',
            content_css: [
            '//fast.fonts.net/cssapi/e6dc9b99-64fe-4292-ad98-6974f93cd2a2.css',
            '//www.tinymce.com/css/codepen.min.css'
            ],
            menubar:false,
            statusbar: false,
            //toolbar: false
        });
          //@ sourceURL=pen.js
    </script>

</html>

我得到了output like this

我想在自定义添加的HTML按钮中设置工具栏按钮。

但我被困住了。

有人可以帮忙吗?

0 个答案:

没有答案