我想使用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？
答案 0 :(得分：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（“方法”，“参数”）;
可以在与工具栏名称匹配的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（“段落”，“你的文字”）;或者工具栏中的任何其他方法。警告：HTML不是您认为的那样......所以只是提前指出它。
答案 1 :(得分：0)
虽然在<textarea>和</textarea>标签之间创建textarea放置内容会导致它出现在textarea中，但在JavaScript中读取/写入时，您需要使用{{ 1}}属性，或者在jQuery的情况下，.value="content"。我看到.val("content")，但那应该是：
$("#wysiwyg").html(topic);