Avatar billede dotnewbi Juniormester
14. oktober 2008 - 13:16 Der er 9 kommentarer og
1 løsning

problem med getSelection

Hej eksperter,
jeg er igang med en wysiwyg og er løbet ind i to problemmer.

1. jeg har en funktion (insertImage) som skal indsætte et billedet/eller andet html som table o.s.v ind wysiwyg. (jeg ved godt at men kan bruge (Editor.execCommand('InsertImage', false, url) til at indsætte et billedet men den giver ikke mulighed for at sætte atl text og højde og bredde). Det virker som om at funktionen ikke fanger selectionen i wysiwyg'en.

2. Jeg har en funktion (doToggleView) som skal skifte mellem html og text view og den virker fint i ie men jeg kan ikke få den til at virke i firefox.

mit script:

var Editor; // the Editor variable
var viewMode = 1;
var EditorId ="";
var isMSIE = navigator.appName == "Microsoft Internet Explorer" ? true : false;
var isFF = !document.all && document.getElementById && !this.isOpera;
var isOpera = navigator.appName == "Opera" ? true : false;
var rememberContent = "";

function create(id){
    doc = document.getElementById(id);
   
    doc.style.display ="none";
   
    EditorId = id + "text"
   
    if(doc == null) {
            alert("Det er ingen TEXTAREA med id'et :" + id );
            return;
        }
       
    if(doc.innerHTML != null && doc.innerHTML != "")
        rememberContent = doc.innerHTML;   
       
    var newElm = document.createElement("div");
    newElm.setAttribute( "id", "editor" );    
   
    newElm.innerHTML = "<iframe id='"+ EditorId +"' name='"+ EditorId +"' style='width: 450px; height: 300px; border: 1px solid #ddd;'></iframe>";
   
    doc.parentNode.insertBefore(newElm,doc);;
   
    Editor = document.getElementById(EditorId).contentWindow.document; // textbox is the area where the user types
   
   
    Editor.open();
    Editor.write(rememberContent);
    Editor.close();
   
   
    Editor.designMode = "on"; // Allows us to make it a WYSIWYG editor
    }


function format(action){ // function for stuff like bold, italics, underline...
    Editor.execCommand(action, false, null);
}
function Hformat(hType){ // function for headlins, paragrafs
Editor.execCommand('formatblock', false, hType);
}

function addImage(url){

Editor.execCommand('InsertImage', false, url)
   
}


function insertImage(src, width, height, align, border, alt, hspace, vspace) {
   
       
        doc = Editor;
       
        var sel = document.getSelection(EditorId);
        var range = document.getRange(sel);
        //alert(range);
       
        var img = document.findParent("img", range);
       
       
        var update = (img == null) ? false : true;
        if(!update) {
            img = Editor.createElement("img");
        }
       
        // set the attributes
        setAttribute(img, "src", src);
        setAttribute(img, "style", "width:" + width + ";height:" + height);
        if(align != "") {setAttribute(img, "align", align); } else { img.removeAttribute("align"); }
        setAttribute(img, "border", border);
        setAttribute(img, "alt", alt);
        setAttribute(img, "hspace", hspace);
        setAttribute(img, "vspace", vspace);
        img.removeAttribute("width");
        img.removeAttribute("height");
       
       
        if(update) { return; } 
       
       
        if (isMSIE) {
            range.pasteHTML(img.outerHTML); 
        }
        else {
            this.insertNodeAtSelection(img, n);
        }
}


function forecolour(color){ // function to color text
    Editor.execCommand("forecolor",false, color);
}

function backcolour(color){ // function to color text
    Editor.execCommand("backcolor",false, color);
}

function html(html){// function to add html
   
if (document.all) {
var iselect = Editor.selection.createRange( );
iselect.pasteHTML(html);
iselect.collapse(false);
iselect.select();
} else {
Editor.execCommand('insertHTML', false, html);
}

}// htlm function end


function doToggleView()

{

if(viewMode == 1)

{

iHTML = Editor.body.innerHTML;

Editor.body.innerText = iHTML;


Editor.focus();



viewMode = 2; // Code

}

else

{

iText = Editor.body.innerText;

Editor.body.innerHTML = iText;




Editor.focus();



viewMode = 1; // WYSIWYG

}

}

function getRange(sel) {
        return sel.createRange ? sel.createRange() : sel.getRangeAt(0);
    }
   
function setAttribute(node, attr, value) {
        if(value == null || node == null || attr == null) return;
        if(attr.toLowerCase() == "style") {
            this.setStyleAttribute(node, value);
        }
        else {
            node.setAttribute(attr, value);
        }
    }
   
function setStyleAttribute(node, style) {
        if(style == null) return;
        var styles = style.split(";");
        var pos;
        for(var i=0;i<styles.length;i++) {
            var attributes = styles[i].split(":");
            if(attributes.length == 2) {
                try {
                    var attr = trim(attributes[0]);
                    while((pos = attr.search(/-/)) != -1) {
                        var strBefore = attr.substring(0, pos);
                        var strToUpperCase = attr.substring(pos + 1, pos + 2);
                        var strAfter = attr.substring(pos + 2, attr.length);
                        attr = strBefore + strToUpperCase.toUpperCase() + strAfter;
                    }
                    var value = trim(attributes[1]).toLowerCase();
                    node.style[attr] = value;
                }
                catch (e) {
                    alert(e);
                }
            }
        }
    }
   
function trim(str) {
        return str.replace(/^\s*|\s*$/g,"");
    }   
   
function removeAttribute(node, attr) {
        node.removeAttribute(attr, false);
    }
   
   
function getAttribute(node, attr) {
        if(node == null || attr == null) return;
        if(attr.toLowerCase() == "style") {
            return this._getStyleAttribute(node);
        }
        else {
            return node.getAttribute(attr);
        }
    }
Avatar billede olebole Juniormester
14. oktober 2008 - 15:04 #1
<ole>

Det var da også noget rod  =)
getSelection er ikke en metode på dokument objektet, men på window objektet. Prøv noget i stil med:
        var sel = window.getSelection();
        var range = sel.getRangeAt(0);

/mvh
</bole>
Avatar billede dotnewbi Juniormester
14. oktober 2008 - 15:31 #2
nu virker linjen  var sel = window.getSelection(); men sel er tom så var range = sel.getRangeAt(0); fejler?
Avatar billede dotnewbi Juniormester
14. oktober 2008 - 15:32 #3
men skal var sel = window.getSelection(); ikke have en ref. til den iframe der udgør wysiwyg eller ? og hvis ja hvordan gør man det
Avatar billede w13 Novice
14. oktober 2008 - 15:34 #4
Jeg kunne forestille mig, referencen skulle laves nogenlunde sådan her:

var sel = document.getElementById("iframe-id").contentWindow.getSelection();

Så skal du bare rette til iframets id.
Avatar billede dotnewbi Juniormester
14. oktober 2008 - 15:55 #5
det virker :)nu fanger den "selection" men hvordan sætter jeg mine html elementer ind på det valgte sted.
Avatar billede olebole Juniormester
14. oktober 2008 - 22:34 #6
var oDoc = document.getElementById("iframe-id").contentWindow.document;
var sStr = "<div>Noget tekst i et div</div>";
oDoc.execCommand("inserthtml", false, sStr);
Avatar billede olebole Juniormester
14. oktober 2008 - 22:35 #7
- men det skal du vel ikke bruge en selection til  =)
Avatar billede dotnewbi Juniormester
15. oktober 2008 - 08:10 #8
du har fuldstændig ret ! Jeg har oven ikøbet den function i mit script iforvejen men jeg kunne på grund af en lille " vs ' fejl som jeg lige har fundet ikke få den til at virke men den køre nu perfect! dog en lille sidebemærkning ie er ikke så vild med execCommand("inserthtml", false, sStr), så til dem der kunne have interesse så skal det se sådan her ud for at virke i IE7 :

if (document.all) {
var iselect = Editor.selection.createRange( );
iselect.pasteHTML(html);
iselect.collapse(false);
iselect.select();
} else {
Editor.execCommand('insertHTML', false, html);
}

men jeg har desværre problemmer med min text til html toggle function den virker i IE7 og den kan godt gå fra text til html i safari men ikke tilbage og i firefox virker den slet ikke !
var viewMode = 1;
function doToggleView()
{
if(viewMode == 1)
{
iHTML = Editor.body.innerHTML;
Editor.body.innerText = iHTML;
Editor.focus();
viewMode = 2; // Code
}
else
{
iText = Editor.body.innerText;
Editor.body.innerHTML = iText;
Editor.focus();
viewMode = 1; // WYSIWYG
}
}
Avatar billede olebole Juniormester
15. oktober 2008 - 09:11 #9
Det er helt korrekt, at Mozilla og Microsoft har ret forskellige implementeringer af en HTML-editor. Her er lidt links, som forhåbentlig gør arbejdet lidt lettere:

Mozilla:
    http://www.mozilla.org/editor/midas-spec.html
    http://developer.mozilla.org/En/DOM:range
    http://www.mozilla.org/editor/midasdemo/

Microsoft:
    http://msdn.microsoft.com/en-us/library/ms536419(VS.85).aspx
    http://msdn.microsoft.com/en-us/library/ms533049(VS.85).aspx
    http://msdn.microsoft.com/en-us/library/ms535869(VS.85).aspx
    http://msdn.microsoft.com/en-us/library/ms535872(VS.85).aspx
Avatar billede olebole Juniormester
15. oktober 2008 - 10:08 #10
Tak for points  =)
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester