Results 1 to 9 of 9

Thread: How to hidden toolbar of HtmlEditor

  1. #1

    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

    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

    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

    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

    Default

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

  6. #6

    Default

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

  7. #7

    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

    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

    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
  •