TinyMCE工具栏配置详解

TinyMCE工具栏配置详解

写在前面

本文章讲述TinyMCE的工具栏方面的配置方法。

本文的前提为你已经将TinyMCE整合到了你自己的项目中。


什么是工具栏

这里写图片描述

如图一个编辑器的工具部分。
分为两个部分,上面的文件、编辑...菜单栏 部分。
下面的红色框起来的为 工具栏 部分。

本文概述工具栏的配置。
关于菜单栏的配置可以开这篇文章:TinyMCE菜单配置详解


启用和停用工具栏

通过init配置项toolbartoolbar(n)来配置工具栏是否启用的项目和显示的顺序。
同时,使用|来分割各个项。

tinymce.init({
  selector: '#textarea1',  // change this value according to your HTML
  //启用工具栏并显示如下项
  toolbar: 'undo redo | styleselect | bold italic | link image',
})

tinymce.init({
  selector: '#textarea2',  // change this value according to your HTML
  //禁用工具栏
  toolbar: false,
})

/* 启用多个工具栏 */

tinymce.init({
  selector: '#textarea3',  // change this value according to your HTML
  // 启用多个工具栏
  toolbar: [
    'undo redo | styleselect | bold italic | link image',
    'alignleft aligncenter alignright',
  ]
})

tinymce.init({
  selector: '#textarea4',  // change this value according to your html
  // 工具栏1
  toolbar1: 'undo redo | styleselect | bold italic | link image',
  // 工具栏2
  toolbar2: 'alignleft aligncenter alignright',
})

自定义工具按钮

上面在工具栏中插入的都是编辑器自带的工具。
这里讲一下如何插入自定义的按钮。

主要的流程是:

  1. inittoolbar中注册自定义按钮
  2. setup方法中使用editor.addButton()定义按钮。
tinymce.init({
  selector: '#textarea',
  // 注册button
  toolbar: 'mybutton',

  setup: function (editor) {
    // 定义按钮,
    editor.addButton('mybutton', {
      // 按钮,名
      text: 'My button',
      // 是否显示图标
      icon: false,
      //onclick事件
      onclick: function () {
        // 这里点击后会插入一句话
        editor.insertContent('&nbsp;<b>It\'s my button!</b>&nbsp;')
      }
    })
  }
})

如图:

这里写图片描述

上面是最基本的配置方法,

还有一些其他属性可以配置:

  • tooltip: 就是鼠标滑过时的提示文字
  • icon: 按钮的图标(这里指的是TinyMCE中自带的)
  • image: 如果希望直接配置图标(可以是URL或者path)
  • onclick: 点击事件
  • onpostrender: 触发按钮渲染的事件(用来在合适的时机禁用按钮)
  • cmd: 点击按钮时出发的编辑器事件(已经注册的)

更为深入的自定义按钮配置方法这里暂时不做说明。
可以参看TinyMCE Docs


配置工具项

所属插件为核心的项为基本包里自带的功能,直接写在toolbar里就可以,
属于插件的项需要引入插件(plugins: '插件名')然后在toolbar中配置。

写在后面

TinyMCE菜单配置详解

会陆续补全关于TinyMCE的其他相关信息。

发布了88 篇原创文章 · 获赞 150 · 访问量 56万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 大白 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览