Rich Text Editor pb modif [Résolu]

Signaler
Messages postés
373
Date d'inscription
mardi 31 décembre 2002
Statut
Membre
Dernière intervention
19 juin 2007
-
Messages postés
373
Date d'inscription
mardi 31 décembre 2002
Statut
Membre
Dernière intervention
19 juin 2007
-
bonjour a tous et merci de lire ce message...
Debutant en js g un pb de modification dun script trouve
//init variables
var isRichText = false;
var rng;
var currentRTE;
var allRTEs = "";

var isIE;
var isGecko;
var isSafari;
var isKonqueror;

var imagesPath;
var includesPath;
var cssFile;

function initRTE(imgPath, incPath, css) {
//set browser vars
var ua = navigator.userAgent.toLowerCase();
isIE = ((ua.indexOf("msie") != -1) && (ua.indexOf("opera") == -1) && (ua.indexOf("webtv") == -1));
isGecko = (ua.indexOf("gecko") != -1);
isSafari = (ua.indexOf("safari") != -1);
isKonqueror = (ua.indexOf("konqueror") != -1);

//check to see if designMode mode is available
if (document.getElementById && document.designMode && !isSafari && !isKonqueror) {
isRichText = true;
}

if (!isIE) document.captureEvents(Event.MOUSEOVER | Event.MOUSEOUT | Event.MOUSEDOWN | Event.MOUSEUP);
//on appelle les fonctions un peux plus loins
document.onmouseover = raiseButton;
document.onmouseout = normalButton;
document.onmousedown = lowerButton;
document.onmouseup = raiseButton;

//set paths vars
imagesPath = imgPath;
includesPath = incPath;
cssFile = css;

if (isRichText) document.writeln('<style type="text/css">@import "' + includesPath + 'rte.css";</style>');

//for testing standard textarea, uncomment the following line
//isRichText = false;
}

function writeRichText(rte, html, width, height, buttons, readOnly) {
if (isRichText) {
if (allRTEs.length > 0) allRTEs += ";";
allRTEs += rte;
writeRTE(rte, html, width, height, buttons, readOnly);
} else {
writeDefault(rte, html, width, height, buttons, readOnly);
}
}

function raiseButton(e) {
if (isIE) {
var el = window.event.srcElement;
} else {
var el= e.target;
}

className = el.className;if (className 'rteImage' || className 'rteImageLowered') {
el.className = 'rteImageRaised';
}
}

function normalButton(e) {
if (isIE) {
var el = window.event.srcElement;
} else {
var el= e.target;
}

className = el.className;if (className 'rteImageRaised' || className 'rteImageLowered') {
el.className = 'rteImage';
}
}

function lowerButton(e) {
if (isIE) {
var el = window.event.srcElement;
} else {
var el= e.target;
}

className = el.className;if (className 'rteImage' || className 'rteImageRaised') {
el.className = 'rteImageLowered';
}
}

function writeRTE(rte, html, width, height, buttons, readOnly) {
if (readOnly) buttons = false;

//adjust minimum table widths
if (isIE) {
if (buttons && (width < 600)) width = 600;
var tablewidth = width;
} else {
if (buttons && (width < 500)) width = 500;
var tablewidth = width + 4;
}

if (buttons == true) {
document.writeln('');
document.writeln(' ----
');
document.writeln(' ');
document.writeln(' <select id="formatblock_' + rte + '" onchange="Select(\'' + rte + '\', this.id);">');
document.writeln(' <option value="">[Style]</option>');
document.writeln(' <option value="">Paragraph</option>');
document.writeln(' <option value="<h1>">Heading 1 <h1></option>');
document.writeln(' <option value="<h2>">Heading 2 <h2></option>');
document.writeln(' <option value="">Address </option>');
document.writeln(' <option value="">Formatted </option>');
document.writeln(' </select>');
document.writeln(', ');
document.writeln(' ');
document.writeln(' <select id="fontname_' + rte + '" onchange="Select(\'' + rte + '\', this.id)">');
document.writeln(' <option value="Arial, Helvetica, sans-serif">Arial</option>');
document.writeln(' <option value="Courier New, Courier, mono">Courier New</option>');
document.writeln(' <option value="Times New Roman, Times, serif">Times New Roman</option>');
document.writeln(' <option value="Verdana, Arial, Helvetica, sans-serif">Verdana</option>');
document.writeln(' </select>');
document.writeln(', ');
document.writeln(' ');
document.writeln(' <select unselectable="on" id="fontsize_' + rte + '" onchange="Select(\'' + rte + '\', this.id);">');
document.writeln(' <option value="1">1</option>');
document.writeln(' <option value="2">2</option>');
document.writeln(' <option value="3">3</option>');
document.writeln(' <option value="4">4</option>');
document.writeln(' <option value="5">5</option>');
document.writeln(' <option value="6">6</option>');
document.writeln(' <option value="7">7</option>');
document.writeln(' </select>');
document.writeln(', ');
document.writeln(' ');
document.writeln(', ');
document.writeln(' ');
document.writeln('
');
document.writeln('');
document.writeln(' ----
');

document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');

document.writeln(' , ');

document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');

document.writeln(' , ');
document.writeln(' , ');

document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');

document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');

document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');
document.writeln(' , ');

document.writeln(' ');
document.writeln('
');
}
document.writeln(' ');
if (!readOnly)
document.writeln('');
document.writeln('');
document.getElementById('hdn' + rte).value = html;
enableDesignMode(rte, html, readOnly);
}

function enableDesignMode(rte, html, readOnly) {
var frameHtml = "<html id="" + rte + "">\n";
frameHtml += "<head>\n";
//to reference your stylesheet, set href property below to your stylesheet path and uncomment
if (cssFile.length > 0) {
frameHtml += "<link media="all" type="text/css" href="" + cssFile + "" rel="stylesheet">\n";
} else {
frameHtml += "<style>\n";
frameHtml += "body {\n";
frameHtml += " background: #FFFFFF;\n";
frameHtml += " margin: 0px;\n";
frameHtml += " padding: 0px;\n";
frameHtml += "}\n";
frameHtml += "</style>\n";
}
frameHtml += "</head>\n";
frameHtml += "\n";
frameHtml += html + "\n";
frameHtml += "\n";
frameHtml += "</html>";

if (document.all) {
var oRTE = frames[rte].document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if (!readOnly) oRTE.designMode = "On";
} else {
try {
if (!readOnly) document.getElementById(rte).contentDocument.designMode = "on";
try {
var oRTE = document.getElementById(rte).contentWindow.document;
oRTE.open();
oRTE.write(frameHtml);
oRTE.close();
if (isGecko && !readOnly) {
//attach a keyboard handler for gecko browsers to make keyboard shortcuts work
oRTE.addEventListener("keypress", kb_handler, true);
}
} catch (e) {
alert("Error preloading content.");
}
} catch (e) {
//gecko may take some time to enable design mode.
//Keep looping until able to set.
if (isGecko) {
setTimeout("enableDesignMode('" + rte + "', '" + html + "', " + readOnly + ");", 10);
} else {
return false;
}
}
}
}

//Fonction pour le gras italique souligne de la textbox
function FormatText(rte, command, option) {
var oRTE;
if (document.all) {
oRTE = frames[rte];

} else {
oRTE = document.getElementById(rte).contentWindow;

//get currently selected range
var selection = oRTE.getSelection();
rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
}

try {if ((command "forecolor") || (command "hilitecolor")) {
//save current values
parent.command = command;
currentRTE = rte;

//position and show color palette
buttonElement = document.getElementById(command + '_' + rte);
// Ernst de Moor: Fix the amount of digging parents up, in case the RTE editor itself is displayed in a div.
document.getElementById('cp' + rte).style.left = getOffsetLeft(buttonElement, 4) + "px";
document.getElementById('cp' + rte).style.top = (getOffsetTop(buttonElement, 4) + buttonElement.offsetHeight + 4) + "px";
if (document.getElementById('cp' + rte).style.visibility == "hidden") {
document.getElementById('cp' + rte).style.visibility = "visible";
document.getElementById('cp' + rte).style.display = "inline";
} else {
document.getElementById('cp' + rte).style.visibility = "hidden";
document.getElementById('cp' + rte).style.display = "none";
}
} else {
oRTE.focus();
oRTE.document.execCommand(command, false, option);
oRTE.focus();
}
} catch (e) {
alert(e);
}
}

//Function pour la couleur
function setColor(color) {
var rte = currentRTE;
var oRTE;
if (document.all) {
oRTE = frames[rte];
} else {
oRTE = document.getElementById(rte).contentWindow;
}

var parentCommand = parent.command;
if (document.all) {
//retrieve selected range
var sel = oRTE.document.selection;if (parentCommand "hilitecolor") parentCommand "backcolor";
if (sel != null) {
var newRng = sel.createRange();
newRng = rng;
newRng.select();
}
}
oRTE.focus();
oRTE.document.execCommand(parentCommand, false, color);
oRTE.focus();
document.getElementById('cp' + rte).style.visibility = "hidden";
document.getElementById('cp' + rte).style.display = "none";
}

function getOffsetTop(elm, parents_up) {
var mOffsetTop = elm.offsetTop;
var mOffsetParent = elm.offsetParent;

if(!parents_up) {
parents_up = 10000; // arbitrary big number
}
while(parents_up>0 && mOffsetParent) {
mOffsetTop += mOffsetParent.offsetTop;
mOffsetParent = mOffsetParent.offsetParent;
parents_up--;
}

return mOffsetTop;
}

function getOffsetLeft(elm, parents_up) {
var mOffsetLeft = elm.offsetLeft;
var mOffsetParent = elm.offsetParent;

if(!parents_up) {
parents_up = 10000; // arbitrary big number
}
while(parents_up>0 && mOffsetParent) {
mOffsetLeft += mOffsetParent.offsetLeft;
mOffsetParent = mOffsetParent.offsetParent;
parents_up--;
}

return mOffsetLeft;
}

function Select(rte, selectname) {
var oRTE;
if (document.all) {
oRTE = frames[rte];

var selection = oRTE.document.selection;
if (selection != null) {
rng = selection.createRange();
}
} else {
oRTE = document.getElementById(rte).contentWindow;

var selection = oRTE.getSelection();
rng = selection.getRangeAt(selection.rangeCount - 1).cloneRange();
}

var idx = document.getElementById(selectname).selectedIndex;
if (idx != 0) {
var selected = document.getElementById(selectname).options[idx].value;
var cmd = selectname.replace('_' + rte, '');
oRTE.focus();
oRTE.document.execCommand(cmd, false, selected);
oRTE.focus();

}
}
//po sur de lutilite mais sinon ya une erreur
function kb_handler(evt) {
var rte = evt.target.id;

if (evt.ctrlKey) {
var key = String.fromCharCode(evt.charCode).toLowerCase();
var cmd = '';
switch (key) {
case 'b': cmd = "bold"; break;
case 'i': cmd = "italic"; break;
case 'u': cmd = "underline"; break;
};

if (cmd) {
FormatText(rte, cmd, true);
evt.preventDefault();
evt.stopPropagation();
}
}
}

je voudrais ajouter une case pour les smileys.. ce que g fait en ajoutant
document.writeln(' <td>

</td>');

mais je ne trouve po le code pour afficher l'iframe des smileys (smiley.htm) comme pour les couleurs (palette.htm)

comment faire svp

merci davance

@++
JoTrAsH

2 réponses

Messages postés
373
Date d'inscription
mardi 31 décembre 2002
Statut
Membre
Dernière intervention
19 juin 2007

g trouve la solution michi qd mm

@++
JoTrAsH
Messages postés
12303
Date d'inscription
mardi 10 février 2004
Statut
Modérateur
Dernière intervention
30 juillet 2012
41
pour commencer, je serais étonné que ça marche avec mozilla (event) et pour finir, expliques pluotto ce que tu veux faire avec ce scritp... En js, on a souvent 2, 3 ou 4 façon d'arriver au même endroit alors expliqie ce quetu veux faire, on poura peut-être passer par un chemin plus portable...
les vars au début ne sercvent a rien.