ExtJS: add button to htmleditor

后端 未结 3 1022
一向
一向 2021-02-06 06:04

I am using ExtJS and I have a htmleditor in my form. I would like to add a custom button to that element (for example after all other buttons like alignments, font weights, ...)

相关标签:
3条回答
  • 2021-02-06 06:11

    You don't need to switch to HTML mode. Just use the insertAtCursor function with the HTML template.

    I made this easy example of how to add button which inserts a horizontal ruler (<hr> tag):

    Ext.ns('Ext.ux.form.HtmlEditor');
    
    Ext.ux.form.HtmlEditor.HR = Ext.extend(Ext.util.Observable, {
        init: function(cmp){
            this.cmp = cmp;
            this.cmp.on('render', this.onRender, this);
        },
        onRender: function(){
            this.cmp.getToolbar().addButton([{
                iconCls: 'x-edit-bold', //your iconCls here
                handler: function(){
                    this.cmp.insertAtCursor('<hr>');
                },
                scope: this,
                tooltip: 'horizontal ruler',
                overflowText: 'horizontal ruler'
            }]);
        }
    });
    Ext.preg('ux-htmleditor-hr', Ext.ux.form.HtmlEditor.HR);
    
    Ext.QuickTips.init();
    new Ext.Viewport({
        layout: 'fit',
        items: [{
            xtype: 'htmleditor',
            plugins: [new Ext.ux.form.HtmlEditor.HR()]
        }]
    });
    

    You can see it running at: jsfiddle.net/protron/DCGRg/183/

    But I really recommend you to check out HtmlEditor.Plugins (or ateodorescu/mzExt for ExtJS 4). There you can find a lot more about adding custom buttons, for instance, how to enable/disable the buttons when something is selected, put separators, etc.

    0 讨论(0)
  • 2021-02-06 06:17

    You also can use ExtJS.ux.HtmlEditor.Plugins : https://github.com/VinylFox/ExtJS.ux.HtmlEditor.Plugins

    enter image description here

    0 讨论(0)
  • 2021-02-06 06:24

    In addition to @proton great answer above, there's another way to insert buttons to the toolbar, different from adding them to the end. In my answer i'll write it as a new control named 'RichTextBox' (and not as a plugin) but this can be done in any other way:

    Ext.define('Ext.ux.form.RichTextBox', {
     extend: 'Ext.form.field.HtmlEditor',
      xtype: 'richtextbox',
      enableSourceEdit: false, // i choose to hide the option that shows html
      initComponent: function () {
         this.on('render', this.onRender, this);
         this.callParent();
      },
      /**
      * Insert buttons listed below to the html-editor at specific position.
      * handler is implemented using 'execCommand':
      * https://developer.mozilla.org/en-US/docs/Web/API/Document/execCommand
      */
      onRender: function () {
        var me = this;
        var tb = me.getToolbar();
        var btns = {
           StrikeThrough: {
              //xtype: 'button', // button is default item for this toolbar
              itemId: 'btnStrikeThrough',
              iconCls: 'x-toolbar-strikethrough ', //choose icon with css class
              enableOnSelection: true,
              overflowText: 'StrikeThrough',
              tooltip: {
                  title: 'StrikeThrough',
                  text: 'Toggles strikethrough on/off for the selection or at the insertion point'
              },
              handler: function () {
                  this.getDoc().execCommand('strikeThrough', false, null);
              },
              scope: this,
            },
            /** Seperator */
            sep: "-"
        };
        tb.insert(5, btns.StrikeThrough); // insert button to the toolbar
        //tb.insert(10, btns.sep); // add seperator
        //tb.remove(26); // remove button, seperator, etc.
    
        this.callParent(); //important: call regular 'onRender' here or at the start of the foo
      }
    });
    
    0 讨论(0)
提交回复
热议问题