WYSIHTML5 TextArea

[x-black]

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:

<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

[mitchellsimoens]

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.

[x-black]

var textfield = new Ext.form.TextArea({
    id:"textfield",
});
  var x = new wysihtml5.Editor("textfield");

This is unfortunately not working, it's causing an error

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!

[diederikveelo]

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:

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.

[x-black]

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:

Uncaught TypeError: Cannot read property 'dom' of undefined

I tried it like this as well:

    var textarea = noteeditform.query('textareafield')[0];
wysihtml5Editor = new wysihtml5.Editor(textarea.id, {
     parserRules:  wysihtml5ParserRules
});

Now it's giving this error, like i had before:

Uncaught TypeError: Cannot read property 'parentNode' of null

It can't be so hard to access this textareafield
Any idea?

[diederikveelo]

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).

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...