首页
话题
消息
手册
我的
返回介绍

Context toolbar

发布于 2019-05-06 字数9775 浏览 729 评论 0

A context toolbar can only contain either buttons that are defined for a normal toolbar, or buttons specifically registered for launching a ContextForm. The buttons comes as a list of strings, where each string is a registered name of a button.

Registering a context toolbar

A context toolbar is registered by calling the addContextToolbar API in the registry. The specification is as follows:

Name Description
predicate This controls when the context toolbar will appear
position This controls where the context toolbar will appear with regards to the current cursor
scope This controls whether the predicate is a node-based predicate, or an editor-based predicate. See context toolbar proirity section below, for more details.
items A list of strings which represent either a registered toolbar button, or a registered context form launcher.

Launching a context toolbar programmatically

There is an editor event called contexttoolbar-show that can be fired to show a context toolbar at the current selection. The event takes a parameter toolbarKey which specifies the name of the registered context form or context toolbar to show.

Context toolbar priority

There are two settings that determine determine the priority: predicate and scope. The priority system mirrors the old inlite theme from TinyMCE 4. The predicate is a function that takes in the current context position and returns a boolean. The scope is either node or editor. The whole priority process works as follows:

  1. The current cursor position is stored to use as the first current context position.
  2. For this current context position, each predicate with scope: node in the registered ContextForm is called. Currently, the order they are checked-in cannot be specified. The first predicate that passes will win and that ContextForm will be shown.
  3. If no predicates (scope: node) match the current context position, then all of the scope: editor predicates are tried. The first one that matches the editor context wins.
  4. If no scope: editor predicates match, then the new context position is calculated by going up the tree one level to the parent node. All scope: node predicates are then checked again. As soon as one matches, it wins and that ContextForm is shown. If nothing matches, it goes up the tree and tries again.

Note: Only scope: node predicates are checked at this stage. The scope: editor predicate is only checked once and that check only happens in (2).

Caution: Since the order in which the ContextForms and ContextToolbars are checked is not specified, try not to have their predicates overlap.

Positioning context toolbars

There are three options for positioning are: selection, line, or node.

  • A selection position will place the context toolbars above or below the current selection, centred if possible.

  • A line position will place the context toolbars to the right (or left in Right-to-Left languages) of the current selection.

  • A node position will place the context toolbars relative to the bounds of a node (e.g. a table or image). It applies to a selected node that does not match the selection due to CSS properties (like float).

Example configuration

This example shows how the quickbars plugin adds the standard selection context toolbar and an example of a custom toolbar for image alignment. The context toolbar will show whenever any content is selected.

TinyMCE HTML JS Edit on CodePen


<textarea id="context-toolbar">
  <p>Clicking on the example image below will show the newly configured context toolbar.</p>

  <p style="text-align: center;">
    <img title="TinyMCE Logo" src="//www.tiny.cloud/images/glyph-tinymce@2x.png" alt="TinyMCE Logo" width="110" height="97" />
  </p>

  <p>Select a word in this sentence, to see the other newly configured context toolbar.</p>

  <p>Clicking on text should not invoke the context toolbar</p>
</textarea>



tinymce.init({
  selector: 'textarea#context-toolbar',
  height: 350,
  setup: function (editor) {
    editor.ui.registry.addContextToolbar('imagealignment', {
      predicate: function (node) {
        return node.nodeName.toLowerCase() === 'img'
      },
      items: 'alignleft aligncenter alignright',
      position: 'node',
      scope: 'node'
    });

    editor.ui.registry.addContextToolbar('textselection', {
      predicate: function (node) {
        return !editor.selection.isCollapsed();
      },
      items: 'bold italic | blockquote',
      position: 'selection',
      scope: 'node'
    });
  }
});

(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#context-toolbar’, height: 350, setup: function (editor) { editor.ui.registry.addContextToolbar(‘imagealignment’, { predicate: function (node) { return node.nodeName.toLowerCase() === ‘img’ }, items: ‘alignleft aligncenter alignright’, position: ‘node’, scope: ‘node’ }); editor.ui.registry.addContextToolbar(‘textselection’, { predicate: function (node) { return !editor.selection.isCollapsed(); }, items: ‘bold italic | blockquote’, position: ‘selection’, scope: ‘node’ }); } }); })(); (function() { /* TODO: more js, less jekyll */ var id = “context-toolbar”; var html = decodeURIComponent(“%0A%3Ctextarea%20id=%22context-toolbar%22%3E%0A%20%20%3Cp%3EClicking%20on%20the%20example%20image%20below%20will%20show%20the%20newly%20configured%20context%20toolbar.%3C/p%3E%0A%0A%20%20%3Cp%20style=%22text-align:%20center;%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%0A%20%20%3Cp%3ESelect%20a%20word%20in%20this%20sentence,%20to%20see%20the%20other%20newly%20configured%20context%20toolbar.%3C/p%3E%0A%0A%20%20%3Cp%3EClicking%20on%20text%20should%20not%20invoke%20the%20context%20toolbar%3C/p%3E%0A%3C/textarea%3E%0A%0A”); var js = decodeURIComponent(“%0Atinymce.init(%7B%0A%20%20selector:%20’textarea#context-toolbar’,%0A%20%20height:%20350,%0A%20%20setup:%20function%20(editor)%20%7B%0A%20%20%20%20editor.ui.registry.addContextToolbar(‘imagealignment’,%20%7B%0A%20%20%20%20%20%20predicate:%20function%20(node)%20%7B%0A%20%20%20%20%20%20%20%20return%20node.nodeName.toLowerCase()%20===%20’img’%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20items:%20’alignleft%20aligncenter%20alignright’,%0A%20%20%20%20%20%20position:%20’node’,%0A%20%20%20%20%20%20scope:%20’node’%0A%20%20%20%20%7D);%0A%0A%20%20%20%20editor.ui.registry.addContextToolbar(‘textselection’,%20%7B%0A%20%20%20%20%20%20predicate:%20function%20(node)%20%7B%0A%20%20%20%20%20%20%20%20return%20!editor.selection.isCollapsed();%0A%20%20%20%20%20%20%7D,%0A%20%20%20%20%20%20items:%20’bold%20italic%20%7C%20blockquote’,%0A%20%20%20%20%20%20position:%20’selection’,%0A%20%20%20%20%20%20scope:%20’node’%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_context-toolbar”).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(); }; } })();

您暂时不能评论!

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

还没有评论!

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