使用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);