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

Quick Toolbar plugin

发布于 2019-05-06 字数3289 浏览 904 评论 0

The Quick Toolbar plugin (quickbars) enables new user interface components to help users create content faster. It can be used to create an experience similar to Medium, Quip, and other modern editing tools.

It replaces the capabilities of the inlite theme in TinyMCE 4 or earlier.

The Quick Toolbar plugin enables two new context toolbars:

  • Quick Selection – shown when text is selected for quick access to formatting commands such as bold, italic and link.
  • Quick Insert – shown when a new line is created for the quick insertion of objects such as tables and images.

It also enables three new toolbar controls:

  • Quick Link – an inline experience for creating and editing links without a dialog
  • Quick Image – immediately prompts a user to select a local image to upload
  • Quick Table – immediately inserts a 2×2 table without prompting the user to select the number of rows and columns
Example enabling both context toolbars with their default controls:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true
});

Example disabling the Quick Insert toolbar:

tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: false
});

Example disabling the Quick Selection minibar:

tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: false
});

Plugin-specific controls

Quick Link

The Quick Link (quicklink) control lets the user quickly insert/edit links inline. It can only be used in the Quick Selection toolbar.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_selection_toolbar: 'bold italic | quicklink h2 h3 blockquote'
});

Quick Image

The Quick Image (quickimage) control lets you quickly insert images from the local computer into the editor. These can then be automatically uploaded if you configure image uploading. It can be used in both the Quick Insert toolbar and other toolbars.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

Quick Table

The Quick Table (quicktable) control lets you quickly insert a 2×2 table with 100% width. It can be used in both the Quick Insert toolbar and other toolbars.

Example:
tinymce.init({
    selector: "div.tinymce",
    plugins: [ 'quickbars' ],
    toolbar: false,
    menubar: false,
    inline: true,
    quickbars_insert_toolbar: 'quickimage quicktable'
});

Related configuration options

  • quickbars_insert_toolbar
  • quickbars_selection_toolbar

您暂时不能评论!

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

还没有评论!

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