使用JavaScript更改JQuery WYSIWYG編輯器的內容

Question

我想使用jQuery將值放在textarea中。 我正在使用以下代碼。 它不起作用。

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

在文本情況下可以使用，但在textarea情況下則顯示為空值。 請讓我知道如何通過jquery或javascript將文本放入textarea？

Answer 1

http://code.google.com/p/jwysiwyg/wiki/簡介

首先，Wiki具有您所需的一切。 不知道您的問題過去了那個buuuuuuuuuuuuuut ....

獲取內容您可以僅使用jquery中的.val（）方法獲取textarea內容。

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

內容操縱如果要操縱jwysiwyg文本區域的內容，則可以使用以下方法

插入圖像在文本指示器上插入圖像

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

插入鏈接在所選文本上方插入鏈接

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

如果這不能回答您的問題，我知道我周圍有一個帶有jquery.wysiwyg.js的原型尖峰。

編輯這里將成為先發制人，但是...請記住，init之后的jwysiwyg不再像原始文本框一樣起作用，如果要注入HTML，則必須在.wysiwyg（...）init調用之前這樣做。 請忽略MVC @ Url.Content（...）方法。 您應該能夠從下面獲得所需的東西。

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

編輯＃2

記住，像所有JQuery UI控件一樣，在初始化控件后，現在必須通過控件本身向您公開的API進行操作。 在這種情況下，它是$（“＃YourTextArea”）。wysiwyg（“ method”，“ arguments”）;

可以在JS文件中找到與工具欄名稱匹配的完整列表，您可以在JQuery.WYSIWYG控件上進行操作，但是如果您需要它們（我不會仔細研究並清理列​​表，很抱歉，但是您將必須閱讀第一代縮進來收集方法名稱）

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);
            }
        }

現在我無能為力了；-)

因此，在這種情況下，您可以始終執行以下操作：$（“＃YourTextArea”）。wysiwyg（“ paragraph”，“ Your Text”）; 或工具欄中的任何其他方法。 警告：HTML不是您想的那樣，因此，請提前指出。

Answer 2

盡管在創建textarea時將東西放在<textarea>和</textarea>標記之間會導致它出現在textarea中，但是在JavaScript中對其進行讀寫操作時，您需要使用.value="content"屬性，或使用jQuery .val("content") 。 我看到$("#wysiwyg").html(topic); ，但可能應該是：

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