Use JavaScript to change the content of a JQuery WYSIWYG editor

Question

I want to put the value in textarea using the jquery. I'm using the following code. It is not working.

   <link rel="stylesheet" href="css/jquery.wysiwyg.css" type="text/css" />
   <script type="text/javascript" src="js/jquery.wysiwyg.js"></script>
    <script type="text/javascript">
    function wedit(topic){
    $("#wysiwyg").html(topic);  
    alert(id+topic+instructor+date+video);
   }
 </script>
 <form name="theform" action="" method="post">
 <table border="0" cellpadding="10" cellspacing="10" width="680px">
 <tr><td width="150">Topic:</td><td><span id="wtopic">
  <textarea name="wysiwyg" id="wysiwyg" ></textarea></span></td></tr>
  <tr><td></td><td><input type="submit" name="submit" value="Save" 
  title="Save" /></td>  </tr>
  </table>
 </form>

It is working in case of text but in case of textarea it is showing empty value. please let me know how can I put the text into the textarea through jquery or javascript??

Answer 1

http://code.google.com/p/jwysiwyg/wiki/Introduction

First off, the wiki has about everything you need. Not sure what your question is past that buuuuuuuuuuuuut....

Getting content You can get the textarea content just using .val() method from jquery

$('#wysiwyg').val();

Content manipulation If you want to manipulate the jwysiwyg textarea content you can use the next methods

Insert an image Insert an image on text indicator

$('#wysiwyg').wysiwyg('insertImage', 'http://domain.com/image.png');

Insert a link Insert a link over selected text

$('#wysiwyg').wysiwyg('createLink', 'http://google.com/');

If this doesn't answer your questions, I know I have a prototype spike laying around here somewhere with jquery.wysiwyg.js in it.

EDIT Going to be pre-emptive here but... Keep in mind jwysiwyg after init no longer functions like a raw text box, if you want to inject HTML you must do so before you .wysiwyg(...) init call. Please ignore the MVC @Url.Content(...) methods. You should be able to get what you need from below.

<link rel="stylesheet" type="text/css" href="@Url.Content("~/Content/jwysiwyg/jquery.wysiwyg.css")" />
<script type="text/javascript" src="@Url.Content("~/Content/jwysiwyg/jquery.wysiwyg.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/jwysiwyg/controls/wysiwyg.link.js")"></script>
<script type="text/javascript" src="@Url.Content("~/Content/jwysiwyg/controls/wysiwyg.table.js")"></script>

<script type="text/javascript">
    $(function(){
        $('#wysiwyg').wysiwyg({
            initialContent: "**INITIAL CONTENT HERE IF YOU WANT TO INJECT SOMETHING AT INIT TIME**",
            css: "@Url.Content("~/Content/comments.css")?upd=00000002",
            controls: {
                bold: { visible: true },
                italic: { visible: true },
                underline: { visible: true },
                strikeThrough: { visible: true },

                insertImage: { visible: false },

                justifyLeft: { visible: true },
                justifyCenter: { visible: true },
                justifyRight: { visible: true },
                justifyFull: { visible: true },

                indent: { visible: true },
                outdent: { visible: true },

                subscript: { visible: true },
                superscript: { visible: true },

                undo: { visible: true },
                redo: { visible: true },

                insertOrderedList: { visible: true },
                insertUnorderedList: { visible: true },
                insertHorizontalRule: { visible: true },
                cut: { visible: true },
                copy: { visible: true },
                paste: { visible: true },
                html: { visible: false },
                increaseFontSize: { visible: true },
                decreaseFontSize: { visible: true },

                h1: { visible: false },
                h2: { visible: false },
                h3: { visible: false },
                exam_html: { visible: false }
            },
            events: {
                click: function (event) {

                }
            }
        });
    });
</script>

<textarea rows="10" cols="100" id="wysiwyg" name="@Model.FormName">
    <!-- HTML GOES HERE -->
</textarea>

EDIT #2

Keeping in mind like all JQuery UI controls after you init the control you now have to operate through the API exposed to you by the control itself. In this case it is the $("#YourTextArea").wysiwyg("method","arguments");

A complete list of actions you can take on the JQuery.WYSIWYG control are easily found in the JS file matching the toolbar names but in case you wanted them (I'm not going through and cleaning up the list, sorry for the mess but you'll have to read the first generation of the indents to gather the method names)

bold: {
            groupIndex: 0,
            visible: true,
            tags: ["b", "strong"],
            css: {
                fontWeight: "bold"
            },
            tooltip: "Bold",
            hotkey: { "ctrl": 1, "key": 66 }
        },

        copy: {
            groupIndex: 8,
            visible: false,
            tooltip: "Copy"
        },

        createLink: {
            groupIndex: 6,
            visible: true,
            exec: function () {
                var self = this;
                if ($.wysiwyg.controls && $.wysiwyg.controls.link) {
                    $.wysiwyg.controls.link.init(this);
                } else if ($.wysiwyg.autoload) {
                    $.wysiwyg.autoload.control("wysiwyg.link.js", function () {
                        self.controls.createLink.exec.apply(self);
                    });
                } else {
                    console.error("$.wysiwyg.controls.link not defined. You need to include wysiwyg.link.js file");
                }
            },
            tags: ["a"],
            tooltip: "Create link"
        },

        unLink: {
            groupIndex: 6,
            visible: true,
            exec: function () {
                this.editorDoc.execCommand("unlink", false, null);
            },
            tooltip: "Remove link"
        },

        cut: {
            groupIndex: 8,
            visible: false,
            tooltip: "Cut"
        },

        decreaseFontSize: {
            groupIndex: 9,
            visible: false,
            tags: ["small"],
            tooltip: "Decrease font size",
            exec: function () {
                this.decreaseFontSize();
            }
        },

        h1: {
            groupIndex: 7,
            visible: true,
            className: "h1",
            command: ($.browser.msie || $.browser.safari) ? "FormatBlock" : "heading",
            "arguments": ($.browser.msie || $.browser.safari) ? "<h1>" : "h1",
            tags: ["h1"],
            tooltip: "Header 1"
        },

        h2: {
            groupIndex: 7,
            visible: true,
            className: "h2",
            command: ($.browser.msie || $.browser.safari) ? "FormatBlock" : "heading",
            "arguments": ($.browser.msie || $.browser.safari) ? "<h2>" : "h2",
            tags: ["h2"],
            tooltip: "Header 2"
        },

        h3: {
            groupIndex: 7,
            visible: true,
            className: "h3",
            command: ($.browser.msie || $.browser.safari) ? "FormatBlock" : "heading",
            "arguments": ($.browser.msie || $.browser.safari) ? "<h3>" : "h3",
            tags: ["h3"],
            tooltip: "Header 3"
        },

        highlight: {
            tooltip: "Highlight",
            className: "highlight",
            groupIndex: 1,
            visible: false,
            css: {
                backgroundColor: "rgb(255, 255, 102)"
            },
            exec: function () {
                var command, node, selection, args;

                if ($.browser.msie || $.browser.safari) {
                    command = "backcolor";
                } else {
                    command = "hilitecolor";
                }

                if ($.browser.msie) {
                    node = this.getInternalRange().parentElement();
                } else {
                    selection = this.getInternalSelection();
                    node = selection.extentNode || selection.focusNode;

                    while (node.style === undefined) {
                        node = node.parentNode;
                        if (node.tagName && node.tagName.toLowerCase() === "body") {
                            return;
                        }
                    }
                }

                if (node.style.backgroundColor === "rgb(255, 255, 102)" ||
                        node.style.backgroundColor === "#ffff66") {
                    args = "#ffffff";
                } else {
                    args = "#ffff66";
                }

                this.editorDoc.execCommand(command, false, args);
            }
        },

        html: {
            groupIndex: 10,
            visible: false,
            exec: function () {
                var elementHeight;

                if (this.options.resizeOptions && $.fn.resizable) {
                    elementHeight = this.element.height();
                }

                if (this.viewHTML) { //textarea is shown
                    this.setContent(this.original.value);

                    $(this.original).hide();
                    this.editor.show();

                    if (this.options.resizeOptions && $.fn.resizable) {
                        // if element.height still the same after frame was shown
                        if (elementHeight === this.element.height()) {
                            this.element.height(elementHeight + this.editor.height());
                        }

                        this.element.resizable($.extend(true, {
                            alsoResize: this.editor
                        }, this.options.resizeOptions));
                    }

                    this.ui.toolbar.find("li").each(function () {
                        var li = $(this);

                        if (li.hasClass("html")) {
                            li.removeClass("active");
                        } else {
                            li.removeClass('disabled');
                        }
                    });
                } else { //wysiwyg is shown
                    this.saveContent();

                    $(this.original).css({
                        width: this.element.outerWidth() - 6,
                        height: this.element.height() - this.ui.toolbar.height() - 6,
                        resize: "none"
                    }).show();
                    this.editor.hide();

                    if (this.options.resizeOptions && $.fn.resizable) {
                        // if element.height still the same after frame was hidden
                        if (elementHeight === this.element.height()) {
                            this.element.height(this.ui.toolbar.height());
                        }

                        this.element.resizable("destroy");
                    }

                    this.ui.toolbar.find("li").each(function () {
                        var li = $(this);

                        if (li.hasClass("html")) {
                            li.addClass("active");
                        } else {
                            if (false === li.hasClass("fullscreen")) {
                                li.removeClass("active").addClass('disabled');
                            }
                        }
                    });
                }

                this.viewHTML = !(this.viewHTML);
            },
            tooltip: "View source code"
        },

        increaseFontSize: {
            groupIndex: 9,
            visible: false,
            tags: ["big"],
            tooltip: "Increase font size",
            exec: function () {
                this.increaseFontSize();
            }
        },

        indent: {
            groupIndex: 2,
            visible: true,
            tooltip: "Indent"
        },

        insertHorizontalRule: {
            groupIndex: 6,
            visible: true,
            tags: ["hr"],
            tooltip: "Insert Horizontal Rule"
        },

        insertImage: {
            groupIndex: 6,
            visible: true,
            exec: function () {
                var self = this;

                if ($.wysiwyg.controls && $.wysiwyg.controls.image) {
                    $.wysiwyg.controls.image.init(this);
                } else if ($.wysiwyg.autoload) {
                    $.wysiwyg.autoload.control("wysiwyg.image.js", function () {
                        self.controls.insertImage.exec.apply(self);
                    });
                } else {
                    console.error("$.wysiwyg.controls.image not defined. You need to include wysiwyg.image.js file");
                }
            },
            tags: ["img"],
            tooltip: "Insert image"
        },

        insertOrderedList: {
            groupIndex: 5,
            visible: true,
            tags: ["ol"],
            tooltip: "Insert Ordered List"
        },

        insertTable: {
            groupIndex: 6,
            visible: true,
            exec: function () {
                var self = this;

                if ($.wysiwyg.controls && $.wysiwyg.controls.table) {
                    $.wysiwyg.controls.table(this);
                } else if ($.wysiwyg.autoload) {
                    $.wysiwyg.autoload.control("wysiwyg.table.js", function () {
                        self.controls.insertTable.exec.apply(self);
                    });
                } else {
                    console.error("$.wysiwyg.controls.table not defined. You need to include wysiwyg.table.js file");
                }
            },
            tags: ["table"],
            tooltip: "Insert table"
        },

        insertUnorderedList: {
            groupIndex: 5,
            visible: true,
            tags: ["ul"],
            tooltip: "Insert Unordered List"
        },

        italic: {
            groupIndex: 0,
            visible: true,
            tags: ["i", "em"],
            css: {
                fontStyle: "italic"
            },
            tooltip: "Italic",
            hotkey: { "ctrl": 1, "key": 73 }
        },

        justifyCenter: {
            groupIndex: 1,
            visible: true,
            tags: ["center"],
            css: {
                textAlign: "center"
            },
            tooltip: "Justify Center"
        },

        justifyFull: {
            groupIndex: 1,
            visible: true,
            css: {
                textAlign: "justify"
            },
            tooltip: "Justify Full"
        },

        justifyLeft: {
            visible: true,
            groupIndex: 1,
            css: {
                textAlign: "left"
            },
            tooltip: "Justify Left"
        },

        justifyRight: {
            groupIndex: 1,
            visible: true,
            css: {
                textAlign: "right"
            },
            tooltip: "Justify Right"
        },

        ltr: {
            groupIndex: 10,
            visible: false,
            exec: function () {
                var p = this.dom.getElement("p");

                if (!p) {
                    return false;
                }

                $(p).attr("dir", "ltr");
                return true;
            },
            tooltip: "Left to Right"
        },

        outdent: {
            groupIndex: 2,
            visible: true,
            tooltip: "Outdent"
        },

        paragraph: {
            groupIndex: 7,
            visible: false,
            className: "paragraph",
            command: "FormatBlock",
            "arguments": ($.browser.msie || $.browser.safari) ? "<p>" : "p",
            tags: ["p"],
            tooltip: "Paragraph"
        },

        paste: {
            groupIndex: 8,
            visible: false,
            tooltip: "Paste"
        },

        redo: {
            groupIndex: 4,
            visible: true,
            tooltip: "Redo"
        },

        removeFormat: {
            groupIndex: 10,
            visible: true,
            exec: function () {
                this.removeFormat();
            },
            tooltip: "Remove formatting"
        },

        rtl: {
            groupIndex: 10,
            visible: false,
            exec: function () {
                var p = this.dom.getElement("p");

                if (!p) {
                    return false;
                }

                $(p).attr("dir", "rtl");
                return true;
            },
            tooltip: "Right to Left"
        },

        strikeThrough: {
            groupIndex: 0,
            visible: true,
            tags: ["s", "strike"],
            css: {
                textDecoration: "line-through"
            },
            tooltip: "Strike-through"
        },

        subscript: {
            groupIndex: 3,
            visible: true,
            tags: ["sub"],
            tooltip: "Subscript"
        },

        superscript: {
            groupIndex: 3,
            visible: true,
            tags: ["sup"],
            tooltip: "Superscript"
        },

        underline: {
            groupIndex: 0,
            visible: true,
            tags: ["u"],
            css: {
                textDecoration: "underline"
            },
            tooltip: "Underline",
            hotkey: { "ctrl": 1, "key": 85 }
        },

        undo: {
            groupIndex: 4,
            visible: true,
            tooltip: "Undo"
        },

        code: {
            visible: true,
            groupIndex: 6,
            tooltip: "Code snippet",
            exec: function () {
                var range = this.getInternalRange(),
                    common = $(range.commonAncestorContainer),
                    $nodeName = range.commonAncestorContainer.nodeName.toLowerCase();
                if (common.parent("code").length) {
                    common.unwrap();
                } else {
                    if ($nodeName !== "body") {
                        common.wrap("<code/>");
                    }
                }
            }
        },

        cssWrap: {
            visible: false,
            groupIndex: 6,
            tooltip: "CSS Wrapper",
            exec: function () {
                $.wysiwyg.controls.cssWrap.init(this);
            }
        }

Now there's nothing else I can offer ;-)

So in this case you can always do: $("#YourTextArea").wysiwyg("paragraph","Your Text"); Or any other method from the toolbar. Warning: HTML is not what you think it is... so just pointing that out ahead of time.

Answer 2

Though when creating a textarea putting stuff between the <textarea> and </textarea> tags results in it appearing in the textarea, when reading and writing from/to it in JavaScript, you need to use the .value="content" attribute, or in the case of jQuery, .val("content") . I see $("#wysiwyg").html(topic); , but that should probably be:

$("#wysiwyg").val(topic);