knockout + jHtmlArea

[janbols]

Hi,
I want to bind a field in my model to a textarea html field rendered
as a rich text editor using jHtmlArea.

However, after applying the jHtmlArea to the textarea field (f.e. $
("#textareaId").htmlarea()), the data is not bound to the field
anymore. I guess because the rich text editor is creating an iframe
and there's no binding defined for that.

How can I do this? Has anyone done this before?
Greetings
Jan

[Michael "Kato" Wulf]

Jan, 

I did this with ckEditor just last week. I'm not sure exactly how this would work with jHtmlArea, but here's the strategy I adopted:

1. bind KO to the textarea that will become the iframe component (the RTE) instead of trying to muck with the iframe (which for CKEditor, at least, is recreated every time you switch between source/wysiwyg anyways)
2. force ckEditor to update the underlying textarea component on keyup instead of save (in ckEditor this was a simple command)
3. now KO automagically gets the updated values because each time the textarea is updated, KO's binding is applied

--
Michael Wulf

775-235-8398

web site | contact

[timot...@gmail.com]

I found the easiest thing was to set the value of the textarea with data-bind and then wrap the initialization of the jhtmlarea after the data has been set:(then the editor gets the current value on initialization, and you use the "save" button to save any changes.

EditorViewModel = function (requestedInfo) {

    var self = this;

    self.returnedData= ko.observable(""); //<-- Bind the textarea to this value in your html ( <textarea id="textarea" data-bind="value: returnedData">)

    self.infoName=  requestedInfo;

    self.GetPageToEdit = function (info) {

        CallServiceMethod("POST", "GetInfo", { pageName: info}, function (data) {

            self.returnedData(data);

            InitializeTextEditor(self.infoName);

        });

    };

    self.GetPageToEdit(self.pageName);

};

InitializeTextEditor = function (infoName) {

    var textArea = $("#textarea");

    textArea.htmlarea({

        // Override/Specify the Toolbar buttons to show

        toolbar: [

                    ["html"], ["bold", "italic", "underline", "strikethrough", "|", "forecolor", "|", "subscript", "superscript"],

                    ["increasefontsize", "decreasefontsize"],

                    ["orderedlist", "unorderedlist"],

                    ["indent", "outdent"],

                    ["justifyleft", "justifycenter", "justifyright"],

                    ["link", "unlink", "image", "horizontalrule"],

                    ["p", "h1", "h2", "h3", "h4", "h5", "h6"],

                    ["cut", "copy", "paste"],

                    [{

                        // This is how to add a completely custom Toolbar Button

                        css: "custom_disk_button",

                        text: "Save",

                        action: function (btn) {

                            // 'this' = jHtmlArea object

                            // 'btn' = jQuery object that represents the <A> "anchor" tag for the Toolbar Button

                            CallServiceMethod("POST", "SetInfo", { pageName:  infoName , content: this.toHtmlString() }, function (data) {

                                if (data == null) {

                                    alert("Page Saved Successfully");

                                    return;

                                }

                                alert(data);

                            });

                        }

                    }]

                ],

        // Specify a specific CSS file to use for the Editor

        css: null,

        toolbarText: {

            bold: "Bold", italic: "Italic", underline: "Underline", strikethrough: "Strike-Through",

            cut: "Cut", copy: "Copy", paste: "Paste",

            h1: "Heading 1", h2: "Heading 2", h3: "Heading 3", h4: "Heading 4", h5: "Heading 5", h6: "Heading 6", p: "Paragraph",

            indent: "Indent", outdent: "Outdent", horizontalrule: "Insert Horizontal Rule",

            justifyleft: "Left Justify", justifycenter: "Center Justify", justifyright: "Right Justify",

            increasefontsize: "Increase Font Size", decreasefontsize: "Decrease Font Size", forecolor: "Text Color",

            link: "Insert Link", unlink: "Remove Link", image: "Insert Image",

            orderedlist: "Insert Ordered List", unorderedlist: "Insert Unordered List",

            subscript: "Subscript", superscript: "Superscript",

            html: "Show/Hide HTML Source View"

        }

    });

};

[timot...@gmail.com]

i also found this:

http://jhtmlarea.codeplex.com/wikipage?title=Modify%20Editor%20Programatically%20using%20JavaScript&referringTitle=Documentation 

            $('#textarea').htmlarea('updateHtmlArea');

Hook into the knockout binding and you can call that whenever the data changes or whenever you know the data will change.

it will update the jhtml area with the current value of the original textarea.

On Tuesday, 19 June 2012 03:23:18 UTC-7, janbols wrote: