[es] - Unos elementa na poziciji kursora u textareu: radi u IE, ali ne i Mozilli

pakito
Paun Es Durlic
kustos etnolog (u penziji!) i programer
naivac
Majdanpek * Pančevo

Član broj: 91953
Poruke: 273
*.dynamic.isp.telekom.rs.

Sajt: www.PaunDurlic.com

+3 Profil

Unos elementa na poziciji kursora u textareu: radi u IE, ali ne i Mozilli

^{27.08.2011. u 18:17 - pre 154 meseci}

PROJEKAT: Vlaski on-line rečnik, MySQL, PHP, JavaScript
http://www.paundurlic.com/vlaski.recnik/ispravke-test.php

Na gornjem linku nalazi se test fajl sa javascript WYSIWYG_Editorom u koji sam ugradio paletu »dugmica« sa raznim sadrzajima koje je neophodno uneti u jedno »textarea« polje. Sve savršeno funkcioniše u IE, ali ne i u Mozilli, koja je, za baksuz, browser svih saradnika na projektu. Pokušao sam da za Mozillu prekrojim funkciju kojom se u tekstareu bez problema umeće tabela, ali mi nije do kraja uspelo. Pošto je rešenje za nas programere sluhiste previše komplikovano, molim za pomoć. Zadatak je dakle, urediti funkciju .. insert_element_mozilla() da radi u Mozilli onako dobro kao što u IE radi funkcija insertMyText(). (Nemojte me samo terati da "guglam", jer upravo odande dolazim, i to sav znojav! ;) )

Code:

/******************
* WYSIWYG_Editor:insertMyText
* umetanje karaktera u tekstareu editora na poziciji kursora
* savšreno radi u IE ali ne i u Mozilli
****/
WYSIWYG_Editor.prototype.insertMyText = function (text, textarea) {

    if (this.isMSIE()) {
       document.getElementById(this.wysiwyg_content).contentWindow.focus();
       var znak = text;
       var textarea=document.getElementById(this.wysiwyg_content).contentWindow.document.selection.createRange();
       textarea.pasteHTML(znak);
       document.getElementById(this.wysiwyg_content).contentWindow.focus();
    } else {
        textarea=document.getElementById(this.wysiwyg_content).contentWindow;
        this.insert_element_mozilla(textarea, text);
    }
}

Funkcija koja dobro služi u Mozilli za unos tabele u textareu, i koja treba da se preradi da isto tako dobro unese i karakter na poziciju kursora:

Code:

/**
*   WYSIWYG_Editor::insert_element_mozilla
*   @param win prozor u koji se umece element
*   @param elem - element koji se umece u prozor
*   U editoru sluzi za unos tabele!
**/
WYSIWYG_Editor.prototype.insert_element_mozilla = function (win, elem){

   var sel = win.getSelection();           // get current selection
   var range = sel.getRangeAt(0);          //
   sel.removeAllRanges();                  // deselect everything //poništite sve
   range.deleteContents();                 // remove content of current selection from document

    var container = range.startContainer;  // get location of current selection -
    var pos = range.startOffset;
    range=document.createRange();          // make a new range for the new selection

    if (container.nodeType==3 && elem.nodeType==3) {
        // if we insert text in a textnode, do optimized insertion
        container.insertData(pos, elem.nodeValue);

        // put cursor after inserted text -
        range.setEnd(container, pos+elem.length);
        range.setStart(container, pos+elem.length);
    }else{
        var afterNode;

        if (container.nodeType==3) {
          //when inserting into a textnode we create 2 new textnodes and put the elem in between
          var textNode = container;
          container = textNode.parentNode;
          var text = textNode.nodeValue;
          var textBefore = text.substr(0,pos);  // text before the split
          var textAfter = text.substr(pos);     // text after the split
          var beforeNode = document.createTextNode(textBefore);
          var afterNode = document.createTextNode(textAfter);

          // insert the 3 new nodes before the old one
          container.insertBefore(afterNode, textNode);
          container.insertBefore(elem, afterNode);
          container.insertBefore(beforeNode, elem);
           // remove the old node
          container.removeChild(textNode);

        }else {

          // else simply insert the node
          afterNode = container.childNodes[pos];
          container.insertBefore(elem, afterNode);
        }
    }
}