Yanor.net/
Wiki
Blog
GitHub
Sandbox
開始行:
* WYSIWYG エディタ [#a5c784f2]
** 解説 [#s53ed0e2]
** 参考 [#nfd88d84]
- http://www.mozilla-japan.org/editor/midas-spec.html
- http://arinogotokuatumarite.blog19.fc2.com/blog-entry-1...
** サンプル [#nacb065e]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<style type="text/css">
td {
vertical-align: top;
}
</style>
<script type="text/javascript">
( function () {
var isFirefox = navigator.userAgent.indexOf('Firefox')...
var isIE = navigator.appName == 'Microsoft Internet Ex...
var $ = function (id) { return document.getElementById...
var $$ = function (tagname, element) { return element....
var viewMode = ''; // 'text' or 'source'
var updateTextArea = function (form){
//var form = evt.target;
if (isFirefox) console.log(form);
form.text1.value = $('edit_iframe').contentWindow.do...
}
var viewSource = function () {
var doc = $('edit_iframe').contentWindow.document;
if (isIE) {
var iHTML = doc.body.innerHTML;
doc.body.innerText = iHTML;
} else {
var html = document.createTextNode(doc.body.innerH...
doc.body.innerHTML = "";
doc.body.appendChild(html);
}
viewMode = 'source';
};
var viewText = function () {
var doc = $('edit_iframe').contentWindow.document;
if (isIE) {
var iText = doc.body.innerText;
doc.body.innerHTML = iText;
} else {
var html = doc.body.ownerDocument.createRange();
html.selectNodeContents(doc.body);
console.log(html.toString());
doc.body.innerHTML = html.toString();
}
viewMode = 'text';
};
var replaceTextAreaWithIframe = function () {
var iframe = document.createElement('iframe');
iframe.id = 'edit_iframe';
iframe.style.width = '500px';
iframe.style.height = '150px';
$('edit_ta').style.display = 'none';
$('edit_div').insertBefore(iframe, $('edit_div').fir...
var value = $('edit_ta').value;
var doc = $('edit_iframe').contentWindow.document;
doc.open();
doc.write(value);
doc.close();
doc.body.contentEditable = true;
doc.designMode = 'on';
}
var textFormat = function (target, type, selected){
if (viewMode == 'source') {
alert ("don't do this");
return;
}
var doc = $(target);
if (isFirefox) {
doc.contentWindow.document.execCommand('styleWithC...
}
doc.contentWindow.focus();
doc.contentWindow.document.execCommand(type, false, ...
}
var test1 = function (target) {
var iframe = $(target);
var range;
if (isIE) {
range = document.selection.createRange();
} else {
range = iframe.contentWindow.getSelection().getRan...
}
if (isIE) {
var html = '<b>hello</b>';
range.pasteHTML(html);
} else {
iframe.contentWindow.document.execCommand('inserth...
}
}
var alert = function () { alert('ALERT'); }
if (!this['WEdit']) {
WEdit = {
isIE:isIE,
isFirefox:isFirefox,
updateTextArea:updateTextArea,
viewSource:viewSource,
viewText:viewText,
replaceTextAreaWithIframe:replaceTextAreaWithIfr...
textFormat:textFormat,
test1:test1,
alert:alert
};
}
})();
window.onload = function() {
WEdit.replaceTextAreaWithIframe();
if (WEdit.isIE) {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].attachEvent('onsubmit', functi...
}
} else {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].addEventListener('submit', fun...
}
}
};
</script>
</head>
<body>
<?php if ($_REQUEST) {
$req = htmlspecialchars(print_r($_REQUEST,1));
print "<pre>$req</pre>";
}?>
<form id="test_form" action="index.php" method="post">
<table>
<tr>
<td>
<div id='edit_div'><textarea name="text1" id="ed...
</td>
<td>
<ul>
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
</ul>
<ul>
<li><input type="button" onclick="WEdit.test1(...
</ul>
<ul>
<li><input type="button" onclick="WEdit.viewSo...
<li><input type="button" onclick="WEdit.viewTe...
</ul>
<ul>
<li><input type="submit"/></li>
<ul>
</td>
</tr>
</table>
</form>
</body>
</html>
終了行:
* WYSIWYG エディタ [#a5c784f2]
** 解説 [#s53ed0e2]
** 参考 [#nfd88d84]
- http://www.mozilla-japan.org/editor/midas-spec.html
- http://arinogotokuatumarite.blog19.fc2.com/blog-entry-1...
** サンプル [#nacb065e]
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; char...
<style type="text/css">
td {
vertical-align: top;
}
</style>
<script type="text/javascript">
( function () {
var isFirefox = navigator.userAgent.indexOf('Firefox')...
var isIE = navigator.appName == 'Microsoft Internet Ex...
var $ = function (id) { return document.getElementById...
var $$ = function (tagname, element) { return element....
var viewMode = ''; // 'text' or 'source'
var updateTextArea = function (form){
//var form = evt.target;
if (isFirefox) console.log(form);
form.text1.value = $('edit_iframe').contentWindow.do...
}
var viewSource = function () {
var doc = $('edit_iframe').contentWindow.document;
if (isIE) {
var iHTML = doc.body.innerHTML;
doc.body.innerText = iHTML;
} else {
var html = document.createTextNode(doc.body.innerH...
doc.body.innerHTML = "";
doc.body.appendChild(html);
}
viewMode = 'source';
};
var viewText = function () {
var doc = $('edit_iframe').contentWindow.document;
if (isIE) {
var iText = doc.body.innerText;
doc.body.innerHTML = iText;
} else {
var html = doc.body.ownerDocument.createRange();
html.selectNodeContents(doc.body);
console.log(html.toString());
doc.body.innerHTML = html.toString();
}
viewMode = 'text';
};
var replaceTextAreaWithIframe = function () {
var iframe = document.createElement('iframe');
iframe.id = 'edit_iframe';
iframe.style.width = '500px';
iframe.style.height = '150px';
$('edit_ta').style.display = 'none';
$('edit_div').insertBefore(iframe, $('edit_div').fir...
var value = $('edit_ta').value;
var doc = $('edit_iframe').contentWindow.document;
doc.open();
doc.write(value);
doc.close();
doc.body.contentEditable = true;
doc.designMode = 'on';
}
var textFormat = function (target, type, selected){
if (viewMode == 'source') {
alert ("don't do this");
return;
}
var doc = $(target);
if (isFirefox) {
doc.contentWindow.document.execCommand('styleWithC...
}
doc.contentWindow.focus();
doc.contentWindow.document.execCommand(type, false, ...
}
var test1 = function (target) {
var iframe = $(target);
var range;
if (isIE) {
range = document.selection.createRange();
} else {
range = iframe.contentWindow.getSelection().getRan...
}
if (isIE) {
var html = '<b>hello</b>';
range.pasteHTML(html);
} else {
iframe.contentWindow.document.execCommand('inserth...
}
}
var alert = function () { alert('ALERT'); }
if (!this['WEdit']) {
WEdit = {
isIE:isIE,
isFirefox:isFirefox,
updateTextArea:updateTextArea,
viewSource:viewSource,
viewText:viewText,
replaceTextAreaWithIframe:replaceTextAreaWithIfr...
textFormat:textFormat,
test1:test1,
alert:alert
};
}
})();
window.onload = function() {
WEdit.replaceTextAreaWithIframe();
if (WEdit.isIE) {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].attachEvent('onsubmit', functi...
}
} else {
for (var idx=0; idx < document.forms.length; idx++) {
document.forms[idx].addEventListener('submit', fun...
}
}
};
</script>
</head>
<body>
<?php if ($_REQUEST) {
$req = htmlspecialchars(print_r($_REQUEST,1));
print "<pre>$req</pre>";
}?>
<form id="test_form" action="index.php" method="post">
<table>
<tr>
<td>
<div id='edit_div'><textarea name="text1" id="ed...
</td>
<td>
<ul>
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
<li><input type="button" onclick="WEdit.textFo...
</ul>
<ul>
<li><input type="button" onclick="WEdit.test1(...
</ul>
<ul>
<li><input type="button" onclick="WEdit.viewSo...
<li><input type="button" onclick="WEdit.viewTe...
</ul>
<ul>
<li><input type="submit"/></li>
<ul>
</td>
</tr>
</table>
</form>
</body>
</html>
ページ名: