как устроены wysiwyg редакторы?
здрасте, есть два вида: редактирование кода - текстареа и визауальный редактор - iframe, не могу понять каким образом в iframe и отображается код преобразованный из текстареа (с визуальными эффекстами) и в тоже время его можно редактировать? спасибо
|
Во всем виноваты contentEditable и designMode.
http://tinyurl.com/2fbwmr9 |
B@rmaley.e><e, круто посылаешь!:lol:
|
вово
B@rmaley.e><e, сенкс |
может быть есть еще какойто способ вывести на страницу текст для редактирования, с возможностью заранее выделить к примеру цветом определенные строки
|
Учитесь прикладывать хоть какие-то усилия, для поиска материала:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ru" dir="ltr">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>WYSIWYG</title>
<style type="text/css">
iframe {
border: 2px inset #DDDDDD;
margin-bottom:5px;
width:500px;
height:300px;
}
input {
margin: 3px;
padding: 2px 8px;
}
div {
margin: 0px auto;
width:500px;
height:300px;
text-align: center;
}
#bold {
font-weight: bold;
}
#italic {
font-style: italic;
}
#underline{
text-decoration: underline;
}
</style>
</head>
<body>
<div>
<h1>WYSIWYG</h1>
<form name="#" action="#" method="post">
<input type='button' value='B' id='bold' />
<input type='button' value='I' id='italic' />
<input type='button' value='U' id='underline' />
</form>
<iframe scrolling='no' frameborder='no' src='#' id='frame' name='frame'></iframe><br/>
</div>
<script type="text/javascript">
(function(){
function $(id){
if (typeof id == 'string'){
return document.getElementById(id)
}
return id;
}
var isGecko = navigator.userAgent.toLowerCase().indexOf('gecko') != -1;
var isIframe = (isGecko) ? document.getElementById('frame') : frames['frame'];
var isWindow = (isGecko) ? isIframe.contentWindow : isIframe.window;
var isPath = (isGecko) ? isIframe.contentDocument : isIframe.document;
(!isPath.designMode) ? alert("WYSIWYG режим не поддерживается") : isPath.designMode = (isGecko) ? "on" : "On";
$("bold").onclick = function(){
isWindow.focus();
isWindow.document.execCommand("bold", null, "");
};
$("italic").onclick = function(){
isWindow.focus();
isWindow.document.execCommand("italic", null, "");
};
$("underline").onclick = function(){
isWindow.focus();
isWindow.document.execCommand("underline", null, "");
};
})();
</script>
</body>
</html>
|
не туда запостил, только сейчас заметил :D
|
| Часовой пояс GMT +3, время: 06:24. |