返回介绍

Custom menu item

发布于 2019-05-06 字数11070 浏览 660 评论 0

This example shows you how to add some simple menu items to a new “custom” menu.

TinyMCE HTML JS Edit on CodePen


<textarea id="custom-menu-item">
  <p style="text-align: center; font-size: 15px;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>
  <h2 style="text-align: center;">Welcome to the TinyMCE editor demo!</h2>
  <p>Select a menu item from the listbox above and it will insert contents into the editor at the caret position.</p>

  <h2>Got questions or need help?</h2>
  <ul>
    <li>Our <a external-link="true" href="https://www.tiny.cloud/docs/">documentation</a> is a great resource for learning how to configure TinyMCE.</li>
    <li>Have a specific question? Visit the <a external-link="true" href="https://community.tinymce.com/forum/">Community Forum</a>.</li>
    <li>We also offer enterprise grade support as part of <a external-link="true" href="https://www.tiny.cloud/pricing">TinyMCE Enterprise</a>.</li>
  </ul>

  <h2>Found a bug?</h2>
  <p>If you think you have found a bug please create an issue on the <a external-link="true" href="https://github.com/tinymce/tinymce/issues">GitHub repo</a> to report it to the developers.</p>

  <h2>Finally ...</h2>
  <p>Thanks for supporting TinyMCE! We hope it helps you and your users create great content.<br/>
    All the best from the TinyMCE team.</p>
</textarea>



tinymce.init({
  selector: "textarea#custom-menu-item",
  height: 500,
  toolbar: false,
  menubar: "custom",
  menu: {
    custom: { title: "Custom menu", items: "basicitem nesteditem toggleitem" }
  },
  content_css: [
    '//fonts.googleapis.com/css?family=Lato:300,300i,400,400i',
    '//www.tiny.cloud/css/codepen.min.css'
  ],
  setup: function (editor) {
    var toggleState = false;

    editor.ui.registry.addMenuItem('basicitem', {
      text: 'My basic menu item',
      onAction: function () {
        editor.insertContent('<p>Here\'s some content inserted from a basic menu!</p>');
      }
    });

    editor.ui.registry.addNestedMenuItem('nesteditem', {
      text: 'My nested menu item',
      getSubmenuItems: function () {
        return [
          {
            type: 'menuitem',
            text: 'My submenu item',
            onAction: function () {
              editor.insertContent('<p>Here\'s some content inserted from a submenu item!</p>');
            }
          }
        ];
      }
    });

    editor.ui.registry.addToggleMenuItem('toggleitem', {
      text: 'My toggle menu item',
      onAction: function () {
        toggleState = !toggleState;
        editor.insertContent('<p class="toggle-item">Here\'s some content inserted from a toggle menu!</p>');
      },
      onSetup: function (api) {
        api.setActive(toggleState);
        return function () {};
      }
    });
  }
});

(function() { var isIE = !!window.MSInputMethodContext && !!document.documentMode; if (isIE && document.getElementsByClassName(“ie11_optional”)[0] !== undefined) { document.getElementsByClassName(“ie11_optional”)[0].style.display = ‘none’; } })(); (function() { tinymce.init({ selector: “textarea#custom-menu-item”, height: 500, toolbar: false, menubar: “custom”, menu: { custom: { title: “Custom menu”, items: “basicitem nesteditem toggleitem” } }, content_css: [ ‘//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’, ‘//www.tiny.cloud/css/codepen.min.css’ ], setup: function (editor) { var toggleState = false; editor.ui.registry.addMenuItem(‘basicitem’, { text: ‘My basic menu item’, onAction: function () { editor.insertContent(‘

Here\’s some content inserted from a basic menu!

‘); } }); editor.ui.registry.addNestedMenuItem(‘nesteditem’, { text: ‘My nested menu item’, getSubmenuItems: function () { return [ { type: ‘menuitem’, text: ‘My submenu item’, onAction: function () { editor.insertContent(‘

Here\’s some content inserted from a submenu item!

‘); } } ]; } }); editor.ui.registry.addToggleMenuItem(‘toggleitem’, { text: ‘My toggle menu item’, onAction: function () { toggleState = !toggleState; editor.insertContent(‘

Here\’s some content inserted from a toggle menu!

‘); }, onSetup: function (api) { api.setActive(toggleState); return function () {}; } }); } }); })(); (function() { /* TODO: more js, less jekyll */ var id = “custom-menu-item”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22custom-menu-item%22%3E%0A%20%20%3Cp%20style=%22text-align:%20center;%20font-size:%2015px;%22%3E%0A%20%20%20%20%3Cimg%20title=%22TinyMCE%20Logo%22%20src=%22//www.tiny.cloud/images/glyph-tinymce@2x.png%22%20alt=%22TinyMCE%20Logo%22%20width=%22110%22%20height=%2297%22%20/%3E%0A%20%20%3C/p%3E%0A%20%20%3Ch2%20style=%22text-align:%20center;%22%3EWelcome%20to%20the%20TinyMCE%20editor%20demo!%3C/h2%3E%0A%20%20%3Cp%3ESelect%20a%20menu%20item%20from%20the%20listbox%20above%20and%20it%20will%20insert%20contents%20into%20the%20editor%20at%20the%20caret%20position.%3C/p%3E%0A%0A%20%20%3Ch2%3EGot%20questions%20or%20need%20help?%3C/h2%3E%0A%20%20%3Cul%3E%0A%20%20%20%20%3Cli%3EOur%20%3Ca%20href=%22https://www.tiny.cloud/docs/%22%3Edocumentation%3C/a%3E%20is%20a%20great%20resource%20for%20learning%20how%20to%20configure%20TinyMCE.%3C/li%3E%0A%20%20%20%20%3Cli%3EHave%20a%20specific%20question?%20Visit%20the%20%3Ca%20href=%22https://community.tinymce.com/forum/%22%3ECommunity%20Forum%3C/a%3E.%3C/li%3E%0A%20%20%20%20%3Cli%3EWe%20also%20offer%20enterprise%20grade%20support%20as%20part%20of%20%3Ca%20href=%22https://www.tiny.cloud/pricing%22%3ETinyMCE%20Enterprise%3C/a%3E.%3C/li%3E%0A%20%20%3C/ul%3E%0A%0A%20%20%3Ch2%3EFound%20a%20bug?%3C/h2%3E%0A%20%20%3Cp%3EIf%20you%20think%20you%20have%20found%20a%20bug%20please%20create%20an%20issue%20on%20the%20%3Ca%20href=%22https://github.com/tinymce/tinymce/issues%22%3EGitHub%20repo%3C/a%3E%20to%20report%20it%20to%20the%20developers.%3C/p%3E%0A%0A%20%20%3Ch2%3EFinally%20…%3C/h2%3E%0A%20%20%3Cp%3EThanks%20for%20supporting%20TinyMCE!%20We%20hope%20it%20helps%20you%20and%20your%20users%20create%20great%20content.%3Cbr/%3E%0A%20%20%20%20All%20the%20best%20from%20the%20TinyMCE%20team.%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20%22textarea#custom-menu-item%22,%0A%20%20height:%20500,%0A%20%20toolbar:%20false,%0A%20%20menubar:%20%22custom%22,%0A%20%20menu:%20%7B%0A%20%20%20%20custom:%20%7B%20title:%20%22Custom%20menu%22,%20items:%20%22basicitem%20nesteditem%20toggleitem%22%20%7D%0A%20%20%7D,%0A%20%20content_css:%20[%0A%20%20%20%20’//fonts.googleapis.com/css?family=Lato:300,300i,400,400i’,%0A%20%20%20%20’//www.tiny.cloud/css/codepen.min.css’%0A%20%20],%0A%20%20setup:%20function%20(editor)%20%7B%0A%20%20%20%20var%20toggleState%20=%20false;%0A%0A%20%20%20%20editor.ui.registry.addMenuItem(‘basicitem’,%20%7B%0A%20%20%20%20%20%20text:%20’My%20basic%20menu%20item’,%0A%20%20%20%20%20%20onAction:%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20editor.insertContent(‘%3Cp%3EHere%5C’s%20some%20content%20inserted%20from%20a%20basic%20menu!%3C/p%3E’);%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D);%0A%0A%20%20%20%20editor.ui.registry.addNestedMenuItem(‘nesteditem’,%20%7B%0A%20%20%20%20%20%20text:%20’My%20nested%20menu%20item’,%0A%20%20%20%20%20%20getSubmenuItems:%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20return%20[%0A%20%20%20%20%20%20%20%20%20%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20type:%20’menuitem’,%0A%20%20%20%20%20%20%20%20%20%20%20%20text:%20’My%20submenu%20item’,%0A%20%20%20%20%20%20%20%20%20%20%20%20onAction:%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20%20%20%20%20%20%20editor.insertContent(‘%3Cp%3EHere%5C’s%20some%20content%20inserted%20from%20a%20submenu%20item!%3C/p%3E’);%0A%20%20%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20%20%20%7D%0A%20%20%20%20%20%20%20%20];%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D);%0A%0A%20%20%20%20editor.ui.registry.addToggleMenuItem(‘toggleitem’,%20%7B%0A%20%20%20%20%20%20text:%20’My%20toggle%20menu%20item’,%0A%20%20%20%20%20%20onAction:%20function%20()%20%7B%0A%20%20%20%20%20%20%20%20toggleState%20=%20!toggleState;%0A%20%20%20%20%20%20%20%20editor.insertContent(‘%3Cp%20class=%22toggle-item%22%3EHere%5C’s%20some%20content%20inserted%20from%20a%20toggle%20menu!%3C/p%3E’);%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20onSetup:%20function%20(api)%20%7B%0A%20%20%20%20%20%20%20%20api.setActive(toggleState);%0A%20%20%20%20%20%20%20%20return%20function%20()%20%7B%7D;%0A%20%20%20%20%20%20%7D%0A%20%20%20%20%7D);%0A%20%20%7D%0A%7D);%0A”); var css = “”; var tabNames = [“run”,”html”,”js”]; /* Note: there are some other fields we could populate here to polish this. */ /* See: https://blog.codepen.io/documentation/api/prefill/ */ var data = { title: “TinyMCE Example”, description: ”, html: html, css: css, css_external: ‘https://www.tiny.cloud/css/codepen.min.css’, js: js, js_external: ‘https://cloud.tinymce.com/5/tinymce.min.js?apiKey=qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc’ }; document.getElementById(“codepen_data_custom-menu-item”).value = JSON.stringify(data); /* TODO: */ var tabs = tabNames.map(function(t) { return { tab: document.getElementById(“codepen_tab_” + t + “_” + id), pane: document.getElementById(“codepen_pane_” + t + “_” + id) }; }); tabs.forEach(function(t) { t.tab.onclick = function(e) { tabs.forEach(function(tt) { tt.pane.style.display = t === tt ? ‘block’ : ‘none’; tt.tab.className = t === tt ? ‘codepen_tab_selected’ : ‘codepen_tab_deselected’; }); e.preventDefault(); }; }); if (document.getElementById(“codepen_tab_codepen_” + id) !== null) { document.getElementById(“codepen_tab_codepen_” + id).onclick = function() { document.getElementById(“codepen_form_” + id).submit(); }; } })();

您暂时不能评论!

管理员开启了需要登录才能够评论,你可以免费注册一个本站的账号。

还没有评论!

目前还没有任何评论,快来抢沙发吧!