Results 1 to 9 of 9

Thread: How to hidden toolbar of HtmlEditor

  1. #1
    Ext User
    Join Date
    Nov 2008
    Posts
    23
    Vote Rating
    0
      0  

    Default How to hidden toolbar of HtmlEditor

    1.I want to use HtmlEditor display html content, but i don't need toolbar, anybody can tell me how to hidden this toolbar in HtmlEditor, I spent three hours, but also can't solved it.
    2. How to set this HtmlEditor as readonly, I try set it, but It also can edit.

    Thanks a lot!

  2. #2
    Ext User shibubh's Avatar
    Join Date
    Jul 2007
    Location
    Lamahi,Dang Nepal
    Posts
    449
    Vote Rating
    0
      0  

    Default

    call this only after the htmleditor is rendered
    Code:
    Ext.getCmp('YOURHTMLEDITORID').getToolbar().hide();
    and one question why you wanna hide the toolbar.if you dont want it. why not use Ext.form.TextArea instead
    Shibu Bhattarai

    Use JavaScript beautifier to beautify you code http://jsbeautifier.org/

    Code Conventions http://javascript.crockford.com/code.html

    ExtJS Core Manual http://extjs.com/products/extcore/manual/

  3. #3
    Ext User
    Join Date
    Nov 2008
    Posts
    23
    Vote Rating
    0
      0  

    Default

    First, thanks a lot for your reply.
    1. When I use "Ext.getCmp('YOURHTMLEDITORID').getToolbar().hide()", then the HtmlEdit
    also hidden,

    2.I use TextArea previous, but can't display html content in TextArea, such as
    <p><Font color=#ff0000>Test</Font></p>, It will display "<p><Font color=#ff0000>Test</Font></p>
    " in TextArea. I researched it on internet, somebody said the TextArea can't display html
    content, sugguest use HtmlEditor.

    3.Is the TextArea can display html content, if it can, it is a best choice, how to do it that
    let TextArea display "Test" when input '<p><Font color=#ff0000>Test</Font></p>'

  4. #4
    Ext User
    Join Date
    Nov 2008
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Below is my source code:

    SendOrReceiveMessage = function(node) {

    /**
    var message = new Ext.form.TextArea({
    id: 'message',
    xtype: 'textarea',
    height: 150,
    width : 500,
    hideLabel: true,
    readOnly: true,
    anchor: '90%'
    });
    */


    var message = new Ext.form.HtmlEditor ({
    id: 'message',
    //renderTo: Ext.getBody(),
    xtype: 'htmleditor',
    height: 150,
    width : 500,
    hideLabel: true
    });
    // Ext.getCmp('message').getToolbar().hide();

    var sendbox = new Ext.form.HtmlEditor ({
    id: 'sendbox',
    xtype: 'htmleditor',
    height: 130,
    width : 500,
    hideLabel: true
    });

    var formPanel = new Ext.form.FormPanel({
    xtype: 'form',
    baseCls: 'x-plain',
    autoHeight: true,
    width: 550,
    buttonAlign: 'center',
    bodyStyle: 'padding:10 10px 0;',
    defaults:
    {
    anchor: '95%'
    },
    items: [
    message,
    sendbox
    ],
    buttons: [{
    text: 'Send',
    handler: sendmsg
    },{
    text: 'Close',
    handler: close
    },{
    text: 'clear',
    handler: clear
    }]
    });

    // Define a window with the form panel in it and show it.
    var window = new Ext.Window({
    title: 'Chat with '+node.id,
    width: 580,
    height: 380,
    minWidth: 300,
    minHeight: 250,
    layout: 'fit',
    plain: true,
    bodyStyle: 'padding:5px;',
    resizable : false,
    items: formPanel
    });
    window.show();

    function sendmsg() {
    var sendbox = Ext.getCmp("sendbox");
    var message = Ext.getCmp("message");
    var sendText = sendbox.getValue();
    var msg = message.getValue();

    if(sendText == null || sendText == "") {
    alert('Can not send empty text!');
    } else {
    message.setValue(msg+'<br/>'+sendText);
    }
    sendbox.reset();
    }

    function close() {
    window.close();
    }

    function clear() {
    Ext.getCmp("message").reset();
    }
    }

  5. #5
    Sencha User carol.ext's Avatar
    Join Date
    Jun 2007
    Location
    Littleton, Colorado, USA
    Posts
    708
    Vote Rating
    36
      0  

    Default

    Please post your code in code tags and use the preview button to verify it is nicely indented and readable.

  6. #6
    Ext User
    Join Date
    Nov 2008
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Thanks for you remind, next time will do it as you mentioned.

  7. #7
    Ext User
    Join Date
    Nov 2008
    Posts
    23
    Vote Rating
    0
      0  

    Default

    Thanks anyway, I have solved that problem. below is the solution:

    var div = document.createElement('DIV');
    div.innerHTML = '<font color="red">Test</font>';
    document.getElementById("message").appendChild(div);

    'message' is the id of TextArea.

  8. #8
    Sencha User
    Join Date
    Nov 2013
    Location
    Barcelona
    Posts
    1
    Vote Rating
    0
      0  

    Default Hiding the editor toolbar makes my modal window's position to change

    I have an html editor within a modal window. If I try to hide the editor's toolbar by doing
    either
    Code:
    this.down('#Description').getToolbar().hide(false)
    or
    Code:
    this.down('#Description').getToolbar().setVisible(false)
    the modal window gets fixed to the left-up corner of the main window and can't be moved.

    Has anybody experienced this behaviour before?
    Marc Esteve

  9. #9
    Sencha Premium User
    Join Date
    Nov 2017
    Posts
    1
    Vote Rating
    0
      0  

    Default Thx

    Quote Originally Posted by shibubh View Post
    call this only after the htmleditor is rendered
    Code:
    Ext.getCmp('YOURHTMLEDITORID').getToolbar().hide();
    and one question why you wanna hide the toolbar.if you dont want it. why not use Ext.form.TextArea instead
    THANKS

Posting Permissions

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