使用JavaScript更改JQuery WYSIWYG编辑器的内容
[英]Use JavaScript to change the content of a JQuery WYSIWYG editor
问题描述
I want to put the value in textarea using the jquery. 
我想使用jQuery将值放在textarea中。 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. 在文本情况下可以使用，但在textarea情况下则显示为空值。 please let me know how can I put the text into the textarea through jquery or javascript?? 请让我知道如何通过jquery或javascript将文本放入textarea？
2 个解决方案
解决方案1
1 2012-06-11 23:53:37
http://code.google.com/p/jwysiwyg/wiki/Introduction http://code.google.com/p/jwysiwyg/wiki/简介
First off, the wiki has about everything you need. 首先，Wiki具有您所需的一切。 Not sure what your question is past that buuuuuuuuuuuuut.... 不知道您的问题过去了那个buuuuuuuuuuuuuut ....
Getting content You can get the textarea content just using .val() method from jquery 获取内容您可以仅使用jquery中的.val（）方法获取textarea内容。
$('#wysiwyg').val();
Content manipulation If you want to manipulate the jwysiwyg textarea content you can use the next methods 内容操纵如果要操纵jwysiwyg文本区域的内容，则可以使用以下方法
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. 如果这不能回答您的问题，我知道我周围有一个带有jquery.wysiwyg.js的原型尖峰。
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. 编辑这里将成为先发制人，但是...请记住，init之后的jwysiwyg不再像原始文本框一样起作用，如果要注入HTML，则必须在.wysiwyg（...）init调用之前这样做。 Please ignore the MVC @Url.Content(...) methods. 请忽略MVC @ Url.Content（...）方法。 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 编辑＃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. 记住，像所有JQuery UI控件一样，在初始化控件后，现在必须通过控件本身向您公开的API进行操作。 In this case it is the $("#YourTextArea").wysiwyg("method","arguments"); 在这种情况下，它是$（“＃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) 可以在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);
}
}
Now there's nothing else I can offer ;-) 现在我无能为力了；-)
So in this case you can always do: $("#YourTextArea").wysiwyg("paragraph","Your Text"); 因此，在这种情况下，您可以始终执行以下操作：$（“＃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. 警告：HTML不是您想的那样，因此，请提前指出。
解决方案2
0 2012-06-11 23:42:07
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") . 尽管在创建textarea时将东西放在<textarea>和</textarea>标记之间会导致它出现在textarea中，但是在JavaScript中对其进行读写操作时，您需要使用.value="content"属性，或使用jQuery .val("content") 。 I see $("#wysiwyg").html(topic); 我看到$("#wysiwyg").html(topic); , but that should probably be: ，但可能应该是：
$("#wysiwyg").val(topic);
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.