Results 1 to 6 of 6

Thread: Custom bold and italic button in toolbar to get updated

  1. #1
    Sencha User
    Join Date
    Feb 2016
    Posts
    4

    Default Answered: Custom bold and italic button in toolbar to get updated

    Hi,

    I'm trying to use the HtmlEditor from the classic toolkit, in which I have to add a bold and a italic button.
    -> I don't want to use the provided format toolbar because i want to prevent the use to use the "underline" button.

    I managed to do that and the text get its format changed to bold and-or italic and can also get back to previous state.

    My problem is that my buttons don't have the proper state :
    - write a text
    - select a word
    - make it bold or italic
    - click somewhere else in the text
    -----> the buttons keep being toggled.


    how can I update my buttons state ?
    Or other solution is to prevent the format toolbar to display the underline button, but don't know how to do that either.

    here is the code for my html editor:
    Code:
    /*
    
        Custom html editor with Bold, Italic
        
    */
    Ext.define('MyApp.view.htmleditor.CustomHtmlEditor', {
        extend: 'Ext.form.HtmlEditor',
        alias: 'widget.customHtmlEditor',
    
        requires: [
            'MyApp.view.htmleditor.ToolbarBoldButton',
            'MyApp.view.htmleditor.ToolbarItalicButton',
            'MyApp.view.htmleditor.ToolbarFootnoteButton',
            'MyApp.view.main.CustomHtmlEditorController'
    
        ],
        
        id : 'customHtmlEditorId', 
        controller : 'customHtmlEditorController',     
    
        listeners:{
            change : 'changeTextInCustomHtmlEditor'
        },
        border: 5,
        style: {
            borderColor: 'red',
            borderStyle: 'solid'
        }, 
        
        enableFormat: false,
        enableColors: false,
        enableAlignments: false,
        enableSourceEdit: false,
        enableFont: false,
        enableFontSize: false,
        enableLinks: false,
        enableLists: false,
       
        // my custom buttons
        plugins: [
            new MyApp.view.htmleditor.ToolbarBoldButton(),
            new MyApp.view.htmleditor.ToolbarItalicButton()
        ]
    });
    Here is the code for my bold button :
    Code:
    /*
        Class for new bold button
    */
    
    Ext.define('MyApp.view.htmleditor.ToolbarBoldButton', {
        extend: 'Ext.mixin.Observable',
        alias : 'htmlEditor.toolbarBoldButton', 
        init: function(cmp){
            this.cmp = cmp;
            this.cmp.on('render', this.onRender, this);
        },
        onRender: function(){
            this.cmp.getToolbar().add([{
                cls: Ext.baseCSSPrefix + 'btn-icon',
                iconCls: Ext.baseCSSPrefix + 'edit-bold',
                enableToggle: true,
                handler: function(){
                    /*this.cmp.win.focus();
                    this.cmp.execCmd('bold');
                    this.cmp.deferFocus();
                    */
                    this.cmp.relayCmd('bold');
                },
                scope: this,
                tooltip: 'Bold',
                overflowText: 'Bold'
            }]);
        }
    });
    Here's a the resulting view :

    button still pressed.png

    thanks,
    Tony
    ps : I'm new to extjs 6.

  2. You can just hide underline button, with saving default bold/italic buttons behavior. Here is example.

  3. #2
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294
    Answers
    30

    Default

    You can just hide underline button, with saving default bold/italic buttons behavior. Here is example.

  4. #3
    Sencha User
    Join Date
    Feb 2016
    Posts
    4

    Default

    Hello Yorl1n, thanks for the reply. indeed the solution fitted perfectly !

  5. #4
    Sencha User
    Join Date
    Feb 2016
    Posts
    4

    Default

    Hi, apart from the toolbar problem, i have some space character issues : 1- is it possible to avoid the insertion of the default Zero-width-space character ? 2- in IE (v10+) and Firefox (v42.0), when typing onkeyboard space, i may have a non-breaking space character ( ) . Can i avoid it and have only space character (ascii decimal value = 32)? 3- still in IE, if i remove all my code (typing del or ctrl+a+del), the editor inserts
    and I see my cursor lower than usual because of the p tag. how can i avoid it ?

  6. #5
    Sencha Premium Member yorl1n's Avatar
    Join Date
    Mar 2015
    Location
    Germany
    Posts
    294
    Answers
    30

    Default

    Everything sounds like a bug, but I cannot reproduce nothing of this. Could you prepare fiddle to demonstrate the problem. It is possible that some other custom code cause this.

  7. #6
    Sencha User
    Join Date
    Feb 2016
    Posts
    4

    Default

    here is my fiddle https://fiddle.sencha.com/#fiddle/15na it replaces the ZERO-WIDTH-SPACE with -ZWS-, the non breaking spaces with -NBSP- and in Internet Explorer, you have the P tags appearing. Just a recap. The API clearly specifies that the ZERO-WIDTH-SPACE is the default value of the htmlEditor. Also, I see that the API does not provide a 'keyup' or 'keypressed' event :/

Similar Threads

  1. Replies: 1
    Last Post: 2 Apr 2014, 11:42 AM
  2. Replies: 2
    Last Post: 29 Sep 2012, 1:39 AM
  3. HTMLEditor, Bold and italic together does not work
    By rney_aspect in forum Ext 3.x: Bugs
    Replies: 5
    Last Post: 25 Jan 2011, 2:18 AM
  4. Grid filtering head doenst go bold and italic after filter is activated
    By genTaliaru in forum Ext 2.x: Help & Discussion
    Replies: 2
    Last Post: 5 Feb 2009, 12:23 PM

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •