http://code.google.com/p/jwysiwyg/wiki/はじめに
まず、ウィキには必要なものがすべて揃っています。あなたの質問がそのbuuuuuuuuuuuuuutを過ぎたものかわからない....
コンテンツ
の取得 jquery から .val() メソッドを使用するだけでテキストエリアのコンテンツを取得できます
$('#wysiwyg').val();
コンテンツの操作
jwysiwyg テキストエリアのコンテンツを操作する場合は、次のメソッドを使用できます
画像を挿入する テキスト インジケーターに画像を挿入する
$('#wysiwyg').wysiwyg('insertImage', 'http://domain.com/image.png');
リンク
を挿入する 選択したテキストにリンクを挿入する
$('#wysiwyg').wysiwyg('createLink', 'http://google.com/');
これで質問の答えが得られない場合は、jquery.wysiwyg.js を含むプロトタイプのスパイクがこのあたりにあることを知っています。
EDITここではプリエンプティブになりますが... init 後の jwysiwyg は生のテキスト ボックスのように機能しなくなることに注意してください。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 はあなたが思っているものとは異なります... そのため、事前に指摘しておいてください。