添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

TinyMCE工具栏配置详解

启用和停用工具栏

通过init配置项 toolbar toolbar(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// 工具栏1toolbar1: 'undo redo | styleselect | bold italic | link image',// 工具栏2toolbar2: 'alignleft aligncenter alignright',

自定义工具按钮

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

主要的流程是:

  • inittoolbar中注册自定义按钮
  • setup方法中使用editor.addButton()定义按钮。
  • tinymce.init(
        {selector: '#textarea',// 注册
        buttontoolbar: '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编辑器中的内容是否符合规范(不为空)
    就需要获取里面的内容。
    1、如果当前页面只有一个编辑器:
    获取内容:tinyMCE.activeEditor.getContent()
    设置内容:tinyMCE.activeEditor.setContent(“需要设置的编辑器内容”)

    2、如果当前页面有多个编辑器(下面的“[0]”表示第一个编辑器,以此类推):
    获取内容:tinyMCE.editors[0].getContent()
    设置内容:tinyMCE.editors[0].setContent(“需要设置的编辑器内容”)

    3、获取不带HTML标记的纯文本内容:

    var activeEditor = tinymce.activeEditor;
    var editBody = activeEditor.getBody();
    activeEditor.selection.select(editBody);
    var text = activeEditor.selection.getContent( { ‘format’ : ‘text’ } );
    本文最后更新于2023-1-3,已超过 3个月没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!

    本文地址:https://www.r5r6.com.cn/nose/981.html
    未标注转载均为本站远程,转载请注明文章出处: