Sujet Précédent Sujet Suivant

Rich Text Editor pb modif

Résolu
jotrash Messages postés 373 Date d'inscription mardi 31 décembre 2002 Statut Membre Dernière intervention 19 juin 2007 - 24 août 2004 à 11:06
jotrash Messages postés 373 Date d'inscription mardi 31 décembre 2002 Statut Membre Dernière intervention 19 juin 2007 - 24 août 2004 à 14:09
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

Réponse 1 / 2
jotrash Messages postés 373 Date d'inscription mardi 31 décembre 2002 Statut Membre Dernière intervention 19 juin 2007
24 août 2004 à 14:09
g trouve la solution michi qd mm

@++
JoTrAsH
3
Réponse 2 / 2
coucou747 Messages postés 12303 Date d'inscription mardi 10 février 2004 Statut Membre Dernière intervention 30 juillet 2012 44
24 août 2004 à 13:30
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.
0

Discussions similaires

Partie entiére d'un nombre
stephbb75 -
stephbb75 -

2 réponses
integrer une variable javascript dans un lien hypertext
rabixpvb -
Stopub -

4 réponses
est-ce que "goto" existe en javascript ?
dmk04 -
bultez -

4 réponses
Partie entière d'un nombre
Sniper_Vgaerr -
DeAtHCrAsH -

2 réponses
Redirection par header ou javascript?
Evangun -
Anthomicro -

8 réponses
Rejoignez-nous