RkBlog

Hardware, programming and astronomy tutorials and reviews.

Openwysiwyg w Django

Opis zastosowania rozbudowanego edytora WYSIWYG w aplikacji Django. Artykuł opisuje jak dostosować edytor do pracy w Django i sposób jego umieszczenia w szablonie frameworka

OpenWYSIWYG to jeden z wielu wizualnych edytorów HTML działający w przeglądarce i napisany w JavaScipcie. Oficjalnie działa w IE i Mozillach, lecz mi również działa pod Operą 9.01. Wadą jest błędne działanie pod Konquerorem (nie daje czystego textarea lecz kawałek edytora). Skrypt rozprowadzany jest na licencji LGPL i może być modyfikowany jak i wykorzystywany do różnych projektów. Pobrać możemy go ze strony projektu

OpenWYSIWYG i Django

// Images Directory
imagesDir = "/site_media/icons/";

// CSS Directory
cssDir = "/site_media/styles/";

// Popups Directory
popupsDir = "/site_media/popups/";
Gdzie /site_media/ to u mnie nazwa katalogu na pliki statyczne wewnątrz django.
<script language="JavaScript" type="text/javascript" src="/site_media/wysiwyg.js" />
<textarea name="textarea1" id="ID">Test</textarea>
		</textarea>
		<script language="javascript1.2">
		generate_wysiwyg('ID');
		</script>
Po tagu textarea musimy wstawić wywołanie edytora dla textarea o podanym ID. Jeżeli chcemy kilka edytorów na stronie - tworzymy kilka textarea o różnych ID i dla każdego taga wywołujemy edytor.
<form action="." method="POST" onsubmit="updateTextArea('ID');">
Zrobione

Konqueror i Safari

W przypadku konquerora i podobnej safari są problemy z obsługą edytorów WYSIWYG napisanych w JS. W przypadku tego edytora nie dostaniemy czystego textarea tylko nie działający edytor WYSIWYG blokujący edycję danych. By temu zaradzić wyłączymy działanie edytora dla tych dwóch przeglądarek. Edytuj wysiwyg.js, znajdź funkcję generate_wysiwyg(textareaID) i na jej początku wstaw IFa:
function generate_wysiwyg(textareaID) {
 if ((navigator.userAgent.indexOf('Safari') != -1 ) || !document.getElementById || !document.designMode ) 
 {   //no designMode (Safari lies) 
    return;  //leaves standard text box in place 
 } 
  	// Hide the textarea - ciąg dalszy
RkBlog

14 July 2008;

Comment article