Прост, базов RTF редактор за сайт
Дълго съм се чудил кой е най-подходящия JavaScript Wysiwyg редактор с най-много възможности за напасване към сайт. Ползвал съм NicEdit, TinyMCE и други, които сам съм писал, неподдържащи rich text format (RTF). Обаче напасването на тези редактори към различни дизайни е развибащо от към бачкане и тестване в различните браузери. Реших да почопля няколко такива редактора и да разбера кое е толкова загадъчно и сложно, за да се напише подобен редактор. Истината е тривиална и се казва – iFrame. Този таг се ползва в почти всички подобни редактори, точно заради поддръжката му на RTF. При събмитване на формата, цялото съдържание на iform се подава на textarea, който си седи удобно скрит.
Това е моят редактор, без CSS-форматиране, като в примера добавям и опция за обработка на текста от базата данни, където присъства без тагове, с ексейпнати малко по-рискови символи.
<?php $field = '<a href="aloooha">Test\'ed. kavicha</a> dyra, byra.<br />Още текст и още "кирилица".'; $clearpost = $field; if(isset($_POST['button'])){ echo $_POST['myTextArea']; $clearpost = $_POST['myTextArea']; } //$clearpost = preg_replace('@delete|select|insert|update|where@i',"", $clearpost); // Почистване на //$clearpost = preg_replace('/[\x7f-\xff]/', "", $clearpost); // Clear Dirty Data $clearpost = preg_replace("/;/", ";", $clearpost); $clearpost = preg_replace("/\*/", "*", $clearpost); $clearpost = preg_replace("/\r\n/", "<br />", $clearpost); $clearpost = preg_replace("/\r/", "<br />", $clearpost); $clearpost = preg_replace("/\n/", "<br />", $clearpost); $clearpost = preg_replace("/</", "<", $clearpost); $clearpost = preg_replace("/=/", "=", $clearpost); $clearpost = preg_replace("/>/", ">", $clearpost); $clearpost = preg_replace("/\'/", "'", $clearpost); $clearpost = preg_replace("/\`/", "`", $clearpost); $clearpost = preg_replace("/\"/", """, $clearpost); if (!get_magic_quotes_gpc()) $clearpost = preg_replace('@\\\@', "\", $clearpost); else { $clearpost = stripslashes($clearpost); $clearpost = preg_replace('@\\\@', "\", $clearpost); } $clearpost = preg_replace("/'/", "\'", $clearpost); // Ескейпване на единичната кавичка, за да може да се показва в iframe!!! ?> <!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" xml:lang="en" lang="en"> <head> <meta http-equiv="content-type" content="text/html; charset=windows-1251" /> <script src="wiswyg_ned/nedEditor.js"></script> <script type="text/javascript"> window.onload=function(){ iFrameOn(); if(isIE){ var myFrame = document.getElementById('richTextField'); var frameDoc = myFrame.contentDocument || myFrame.contentWindow; if (frameDoc.document){ frameDoc = frameDoc.document; } frameDoc.write ('<?php echo html_entity_decode($clearpost, ENT_QUOTES); ?>') ; } else { window.frames['richTextField'].document.body.innerHTML = '<?php echo html_entity_decode($clearpost, ENT_QUOTES); ?>' ; } } </script> </head> <!-- <body onLoad="iFrameOn();" > --> <body> <form action="" enctype="multipart/form-data" name="myForm" id="myform" method="post"> <div id="wysiwyg_cp" style="padding:8px; width:700px;"> <input type="button" onClick="iBold()" value="B"> <input type="button" onClick="iUnderline()" value="U"> <input type="button" onClick="iItalic()" value="I"> <input type="button" onClick="iFontSize()" value="Text Size"> <input type="button" onClick="iForeColor()" value="Text Color"> <input type="button" onClick="iHorizontalRule()" value="HR"> <input type="button" onClick="iUnorderedList()" value="UL"><br /> <input type="button" onClick="iOrderedList()" value="OL"> <input type="button" onClick="iLink()" value="Link"> <input type="button" onClick="iUnLink()" value="UnLink"> <input type="button" onClick="iImage()" value="Image"> <input type="button" onClick="iRemoveFormat()" value="Remove Format"> </div> <!-- Hide(but keep)your normal textarea and place in the iFrame replacement for it --> <textarea style="display:none;" name="myTextArea" id="myTextArea" cols="100" rows="14"></textarea> <iframe name="richTextField" id="richTextField" ></iframe> <br /> <input type="submit" name="button" id="button" value="Make Changes" onClick="javascript:submit_form();"/> </form> </body> </html> |
Съдръжанието на JavaScript файла:
// Check Browser var isOpera = !!(window.opera && window.opera.version); // Opera 8.0+ var isFirefox = testCSS('MozBoxSizing'); // FF 0.8+ var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0; // At least Safari 3+: "[object HTMLElementConstructor]" var isChrome = !isSafari && testCSS('WebkitTransform'); // Chrome 1+ var isIE = /*@cc_on!@*/false || testCSS('msTransform'); // At least IE6 function testCSS(prop) { return prop in document.documentElement.style; } //==================== function iFrameOn(){ richTextField.document.designMode = 'On'; //window.frames['richTextField'].document.body.innerHTML = '<a href="aloooha">Aloha</a> dyra, byra.<br />Още текст има тук.'; } function iRemoveFormat(){ richTextField.document.execCommand('removeformat',false,null); } function iBold(){ richTextField.document.execCommand('bold',false,null); } function iUnderline(){ richTextField.document.execCommand('underline',false,null); } function iItalic(){ richTextField.document.execCommand('italic',false,null); } function iFontSize(){ var size = prompt('Enter a size 1 - 7', ''); richTextField.document.execCommand('FontSize',false,size); } function iForeColor(){ var color = prompt('Define a basic color or apply a hexadecimal color code for advanced colors:', ''); richTextField.document.execCommand('ForeColor',false,color); } function iHorizontalRule(){ richTextField.document.execCommand('inserthorizontalrule',false,null); } function iUnorderedList(){ richTextField.document.execCommand("InsertOrderedList", false,"newOL"); } function iOrderedList(){ richTextField.document.execCommand("InsertUnorderedList", false,"newUL"); } function iLink(){ var linkURL = prompt("Enter the URL for this link:", "http://"); richTextField.document.execCommand("CreateLink", false, linkURL); } function iUnLink(){ richTextField.document.execCommand("Unlink", false, null); } function iImage(){ var imgSrc = prompt('Enter image location', ''); if(imgSrc != null){ richTextField.document.execCommand('insertimage', false, imgSrc); } } function submit_form(){ var theForm = document.getElementById("myform"); theForm.elements["myTextArea"].value = window.frames['richTextField'].document.body.innerHTML; theForm.submit(); } |
Сорс кода: wiswyg_by_ned.rar
Demo нa кода.