1. #1
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    x-black is on a distinguished road

      0  

    Default Unanswered: WYSIHTML5 TextArea

    Unanswered: WYSIHTML5 TextArea


    Hello.

    Can somebody please give me a hint how to add http://xing.github.com/wysihtml5/ in my Sencha Touch application? Basically it would be very easy, HTML code looks like this:
    HTML Code:
    <form>
      <div id="toolbar" style="display: none;">
        <a data-wysihtml5-command="bold">bold</a> |
        <a data-wysihtml5-command="italic">italic</a>
        <a data-wysihtml5-action="change_view">switch to html view</a>
      </div>
      <textarea id="textarea"></textarea>
    </form>
    
    <!-- wysihtml5 parser rules -->
    <script src="wysihtml5/parser_rules/simple.js"></script>
    <!-- Library -->
    <script src="wysihtml5/dist/wysihtml5-0.3.0.min.js"></script>
    <script>
      var editor = new wysihtml5.Editor("textarea", {
        toolbar:      "toolbar",
        parserRules:  wysihtml5ParserRules
      });
     </script>
    How can I use this in Sencha? I think the built in TextAreaField is not working for WYSIHTML5, and adding the above script via template or html-option in a panel reproduces an error: no text-area available.

    Is there a way how to solve this? Or do you have a suggestion for any other WYSIWYG-Textarea i could use?

    Thank you and kind regards

  2. #2
    Sencha - Senior Forum Manager mitchellsimoens's Avatar
    Join Date
    Mar 2007
    Location
    Gainesville, FL
    Posts
    36,579
    Answers
    3447
    Vote Rating
    814
    mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute mitchellsimoens has a reputation beyond repute

      0  

    Default


    You can use textarea field and apply the rules and what not to the DOM of the textarea field, the field isn't just a textarea, there are some divs and such.
    Mitchell Simoens @SenchaMitch
    Sencha Inc, Senior Forum Manager
    ________________
    Check out my GitHub, lots of nice things for Ext JS 4 and Sencha Touch 2
    https://github.com/mitchellsimoens

    Think my support is good? Get more personalized support via a support subscription. https://www.sencha.com/store/

    Need more help with your app? Hire Sencha Services services@sencha.com

    Want to learn Sencha Touch 2? Check out Sencha Touch in Action that is in print!

    When posting code, please use BBCode's CODE tags.

  3. #3
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    x-black is on a distinguished road

      0  

    Default


    Code:
    var textfield = new Ext.form.TextArea({
        id:"textfield",
    });
      var x = new wysihtml5.Editor("textfield");
    This is unfortunately not working, it's causing an error
    Code:
    Uncaught TypeError: Cannot read property 'parentNode' of null
    This means my script can't find a TextArea with the name/id "textfield".. Any idea?

    Thanks for your help!

  4. #4
    Sencha User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    diederikveelo is on a distinguished road

      0  

    Default


    it's because the actual dom textarea is receiving an internal id from Sencha, and not the id you define in the config (this is applied to one of the parent divs). You will need to find the actual id of the textarea in the dom.

    Try the following:

    Code:
    var textarea = panel.query('textareafield')[0].element.dom.getElementsByTagName('textarea')[0];
    // init the wysihtml5Editor
    wysihtml5Editor = new wysihtml5.Editor(textarea.id, {
         parserRules:  wysihtml5ParserRules
    });
    'panel' is the sencha panel that holds your textareafield. Could be a fieldset or formpanel etc.
    'textareafield' is the xtype of the sencha textareafield. This assumes you only have one, or you could use a query with an id instead.

    Let me know how it goes... I'm working on sending commands thru a sencha toolbar, but that probably involves altering the wysihtml5 code base.

  5. #5
    Sencha User
    Join Date
    Feb 2012
    Posts
    3
    Vote Rating
    0
    x-black is on a distinguished road

      0  

    Default


    Hi!

    Thanks for your answer.
    I'm using a FormPanel to hold my TextAreaField.
    I tried accessing via the id and the tagname, both is reproducing an error:
    Code:
    Uncaught TypeError: Cannot read property 'dom' of undefined
    I tried it like this as well:
    Code:
        var textarea = noteeditform.query('textareafield')[0];
    wysihtml5Editor = new wysihtml5.Editor(textarea.id, {
         parserRules:  wysihtml5ParserRules
    });
    Now it's giving this error, like i had before:
    HTML Code:
    Uncaught TypeError: Cannot read property 'parentNode' of null
    It can't be so hard to access this textareafield
    Any idea?

  6. #6
    Sencha User
    Join Date
    Aug 2010
    Posts
    8
    Vote Rating
    0
    diederikveelo is on a distinguished road

      0  

    Default


    Where are you initializing the wysihtml5 editor? My guess is that you're encountering a scope issue, or you're executing the code before the form panel is actually rendered (painted).


    Try putting a listener on your formpanel:
    (this is Sencha Touch 2.0 code, but the idea remains the same).

    Code:
    Ext.define('wysihtml5Editor', {
        extend: 'Ext.form.Panel',
        requires: ['Ext.Toolbar', 'Ext.form.FieldSet', 'Ext.form.Text', 'Ext.field.TextArea'],
        alias: 'widget.wysihtml5editor',
        config: {
            listeners: [
                {
                    deletegate: this,
                    event: 'painted',
                    fn: 'initWysihtml5Editor',
                }
            ]
        },
        initWysihtml5Editor: function(panel) {
            // find the id of the textarea so we can pass it to wysihtml5
            var textarea = panel.query('textareafield')[0].element.dom.getElementsByTagName('textarea')[0];
    
            // init the wysihtml5Editor
            var wysihtml5Editor = new wysihtml5.Editor(textarea.id, {
                parserRules:  wysihtml5ParserRules
            });
        }
    });

    Be careful to not initialize your editor more then once, because it will fill your dom with multiple iframes...