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);
}
}
