<!DOCTYPE html>
<html dir="ltr">
<head>
<meta charset="utf-8" />
<style type="text/css">
body { font: 14px Tahoma; }
</style>
<link rel="stylesheet" type="text/css" href="wysiwyg.css" />
<script type="text/javascript">
function WYSIWYG(conf) {
this.mode = "rich";
this.textarea = document.createElement("textarea");
this.textarea.name = conf["target"];
this.url = (conf["url"] === undefined) ? "." : conf["url"];
}
WYSIWYG.prototype.execute = function(command, value) {
this.iframeWindow.focus();
this.iframeWindow.document.execCommand(command, null, value);
}
WYSIWYG.prototype.setBold = function() {
this.execute("bold", "");
}
WYSIWYG.prototype.setItalic = function() {
this.execute("italic", "");
}
WYSIWYG.prototype.setUnderline = function() {
this.execute("underline", "");
}
WYSIWYG.prototype.setStrike = function() {
this.execute("strikeThrough", "");
}
WYSIWYG.prototype.update = function() {
var self = this;
var interval = setInterval(
function() {
self.textarea.value = self.iframeDocument.body.innerHTML;
if (self.mode == "plain") {
clearInterval(interval);
}
},
40
);
}
WYSIWYG.prototype.replace = function() {
var self = this;
// [*вырезано*]
/* кнопки */
// Bold
var button = document.createElement("div");
button.className = "button";
button.innerHTML = '<span style="font-weight: bold;">B</span>';
button.title = "Bold";
button.onclick = function() {
self.setBold();
}
iframeBar.appendChild(button);
// Italic
button = document.createElement("div");
button.className = "button";
button.innerHTML = '<span style="font-style: italic;">I</span>';
button.title = "Italic";
button.onclick = function() {
self.setItalic();
}
iframeBar.appendChild(button);
// Underline
button = document.createElement("div");
button.className = "button";
button.innerHTML = '<span style="text-decoration: underline;">U</span>';
button.title = "Underline";
button.onclick = function() {
self.setUnderline();
}
iframeBar.appendChild(button);
// Striked
button = document.createElement("div");
button.className = "button";
button.innerHTML = '<span style="text-decoration: line-through;">S</span>';
button.title = "Strike";
button.onclick = function() {
self.setStrike();
}
iframeBar.appendChild(button);
// [*вырезано*]
}
</script>
</head>
<body>
<form action="#" method="post">
<textarea name="content" cols="48" rows="4"></textarea>
</form>
<script type="text/javascript">
wysiwyg = new WYSIWYG({"target" : "content"});
wysiwyg.replace();
</script>
</body>
</html>
Меня не устраивают повторяющиеся фрагменты кода, пробовал в массив загонять, но там eval'ом приходиться выполнять, а ещё баг получается что у всех элементов при onclick один и тот же последний метод. Довольно тупой язык...
