1

我想使用 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 中？

4

2 回答 2

1

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

首先，维基有你需要的一切。不知道你的问题是什么 buuuuuuuuuuuuut....

获取内容 您可以使用 jquery 中的 .val() 方法获取 textarea 内容

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

内容操作 如果要操作 jwysiwyg textarea 内容，可以使用以下方法

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

$('#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");

您可以在 JQuery.WYSIWYG 控件上执行的操作的完整列表很容易在与工具栏名称匹配的 JS 文件中找到，但如果您想要它们（我不会仔细检查并清理列表，抱歉造成混乱，但您'必须阅读第一代缩进来收集方法名称）

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 不是你想象的那样……所以提前指出这一点。

于 2012-06-11T23:53:37.717 回答
0

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);
于 2012-06-11T23:42:07.550 回答