Имеем область основанную на iframe для редактирования в стиле WYSIWYG | Код |
byid('MessageArea').innerHTML = '<input type="hidden" name="PostText"><IFRAME id="EditFrame" style="width:'+EditorWidth+'px; height:'+EditorHeight+'px;" frameborder="0" contenteditable="true"></IFRAME>';
if (IE) EditField = frames['EditFrame'].document;
else if (FF || OP) EditField = byid('EditFrame').contentDocument;
else BadBr = true;
EditField.designMode = 'On';
|
Визуальное редактирование происходит с помощью команд execCommand Как с наименьшими усилиями вставить в место под курсором свой html? Триггер для вставки html находится в функции setStyle (помечен коментом и алертом). На панели самая правая кнопка. В IE можно сделать так | Код |
var tr = EditField.selection.createRange();
tr.pasteHTML('html code');
|
Но нужен крос-браузерный вариант рабочий пример можно посомтреть тутИли просто скопировать отсюда: | Код |
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<script>
/* Определяем браузеры */
var sAgent = navigator.userAgent.toLowerCase() ;
var IE = false;
var IE6 = false;
var FF = false;
var OP = false;
var NC = (document.layers); // Netscape?
if ( document.all && document.getElementById && !window.opera ) {
IE = true;
}
if ( !document.all && document.getElementById && !window.opera ) {
FF = true;
}
if ( document.all && document.getElementById && window.opera ) {
OP = true;
}
if ( sAgent.indexOf("msie 6.") != -1 && sAgent.indexOf("mac") == -1 && sAgent.indexOf("opera") == -1 )
IE6 = true;
/* Конец Определяем браузеры */
var EditContent = '';
var FormName = '';
var EditFieldHeader =
"<html><head>\n" +
"<style>\n" +
"body,td {font-family:Verdana,sans-serif;font-size:11px;}\n" +
"td { border:1px dotted #dddddd;}" +
"p {margin-top:0px;margin-bottom:0px;}\n" +
"a:link {text-decoration:underline;color:#444444}\n" +
"a:hover {text-decoration:none;color:#444444}\n" +
"</style></head>\n" +
"<body leftmargin=1 rightmargin=0 topmargin=1 bottommargin=0 marginwidth=1 marginheight=1>\n";
var EditFieldHeaderOut =
"<html><head>\n" +
"<style>\n" +
"body,td {font-family:Verdana,sans-serif;font-size:11px;}\n" +
"p {margin-top:0px;margin-bottom:0px;}\n" +
"a:link {text-decoration:underline;color:#444444}\n" +
"a:hover {text-decoration:none;color:#444444}\n" +
"#TalkCut {color:#444444}\n" +
"</style></head>\n";
var EditFieldFooter = "\n</body><html>";
var EditFieldFooterOut = "\n<html>";
var EditField;
var PanelStyle = "<style>\n" +
"body,td {font-family:Verdana,sans-serif;font-size:11px;}\n" +
"form {margin-top:0px;margin-bottom:0px;}\n" +
"textarea,input {font-weight:normal; font-size:11px; color:#000000; font-family:Tahoma,Arial; margin-top:0px; margin-bottom:0px; border-style: solid; border-width: 1px; border-color:#666666;}\n" +
"\n" +
"</style>\n";
function byid(id){return document.getElementById(id);}
function Toolkit (tools) {
var TStyle = '';
TStyle = ['Bold','Italic','Underline','StrikeThrough','CreateLink','InsertImage','JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','InsertUnorderedList','TalkCut'];
var TImage = ['b','i','u','s','a','img','l','c','r','j','ol','tc'];
// TODO: lang
var TTitle = new Array('Полужирный','Курсив','Подчеркнутый','Перечеркнутый','Гиперссылка','Вставить изображение','По левому краю','По центру','По правому краю','По ширине','Маркированный список','Расделитель описания');
var ts = '';
var Toolkit = "<Table cellpadding=0 cellspacing=1 border=0><Tr>\n";
for (i = 0; i < TStyle.length; i++) {
ts = ((FF || OP) ? TStyle[i].toLowerCase() : TStyle[i]);
if (TStyle[i] != 'separator') Toolkit += "<Td><img src=\"/img/editor/"+TImage[i]+".gif\" onmousemove=\"javascript:this.src='/img/editor/"+TImage[i]+"_h.gif'\" onmouseout=\"javascript:this.src='/img/editor/"+TImage[i]+".gif'\" onclick=\"setStyle('"+ts+"')\" title=\""+TTitle[i]+"\" style=\"cursor: pointer;\" ></Td>\n";
else Toolkit += "<Td width=1></Td>\n";
}
tools.innerHTML = Toolkit+"</Tr></Table>";
}
function setStyle (TStyle) {
if (TStyle.match(/insertimage/i)) {
//window.opener.EditField.execCommand('insertimage',false,document.forms['imgform'].elements['img'].value);
} else if (TStyle.match(/^talkcut$/i)) {
// Триггер для кнопка которая вставляет html
alert('Триггер для кнопка которая вставляет html');
} else if (TStyle.match(/^createlink$/i)) {
// TODO: lang
var Url = prompt('Введите адрес','http://');
EditField.execCommand('CreateLink',false,Url);
} else {
EditField.execCommand(TStyle,false,null);
}
}
function SaveEditorContent(_e) {
var cnt;
if (EditField) {
cnt = EditField.body.innerHTML;
} else if (document.forms[FormName].elements['PostText']) {
cnt = document.forms[FormName].elements['PostText'].value;
}
alert(cnt);
if (document.forms[FormName].elements[_e]) {
document.forms[FormName].elements[_e].value = cnt;
return true;
}
return false;
}
function showEditor(EditorWidth, EditorHeight) {
if (!IE && !FF && !OP) {
byid('MessageArea').innerHTML = '<textarea name="PostText" style="width:'+EditorWidth+'px; height:'+EditorHeight+'px;"></textarea>';
} else {
if (!EditorWidth)
EditorWidth = 500;
if (!EditorHeight)
EditorHeight = 100;
Toolkit(byid('tools'));
byid('MessageArea').innerHTML = '<input type="hidden" name="PostText"><IFRAME id="EditFrame" style="width:'+EditorWidth+'px; height:'+EditorHeight+'px;" frameborder="0" contenteditable="true"></IFRAME>';
if (IE) EditField = frames['EditFrame'].document;
else if (FF || OP) EditField = byid('EditFrame').contentDocument;
else BadBr = true;
EditField.designMode = 'On';
EditField.open();
EditField.write(EditFieldHeader);
EditField.write(EditContent);
EditField.write(EditFieldFooter);
EditField.close();
EditField.execCommand('fontname',false,'Verdana');
EditField.execCommand('fontsize',false,'2');
}
}
</script>
</head>
<body>
<TABLE style="width:500px;" height="100" cellpadding="0" cellspacing="1" border="1"><TR><TD height="25"><div id="tools"></div></TD></TR><TR><TD id="MessageArea">
</TD></TR></TABLE>
<script type="text/javascript">
showEditor();
</script>
</body>
</html>
|
|
Сделать вставку html в место где находится курсор 
Загрузка ...
