Mis propias Tags en FCKEditor

danybarco · #1 (**permalink**) 23/06/2008, 08:48

Buenas:
Alguien sabe como puedo insertar de manera correcta y con FCKEditor mis propias tags?
Me explico. Tengo unos plugins especiales que meto en un texto y al salir a la web se interpretan para que hagan cierto tipo de cosas(crearle ejercicios al usuario por ejemplo). Me creo un plugin en el FCKEditor para .net, me cojo las opciones y se las paso con:

plugin = '<myplugin opciones='+opciones+'>'+opcion1+</myplugin>';

Esto lo estoy haciendo asi para que no se vea en el editor todo el texto del plugin que a la persona que lo edita le es muy incomodo.
Al insertar el plugin hago un FCK.InsertHtml(plugin) y en firefox me va bien. Pero en IE tanto 6 como 7 el opcion1 en vez de ponerlo dentro de la etiqueta me lo pone fuera y a continuacion.
¿Alguien sabe que puede pasar?

danybarco · #2 (**permalink**) 24/06/2008, 02:50

Alguien sabe por que pasa esto en IE? Es por el explorador que no permita tags que no existe?

Panino5001 · #3 (**permalink**) 24/06/2008, 13:43

No. Seguramente el problema es que FCK debe usar inserthtml como comando de execCommand, y ese comando no funciona en Explorer.
Podrías intentar modificar la función, basándore en que si es explorer haga algo distinto, ejemplo:

Código PHP:

  function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('nop'); 
            } 
        } 
}

Quizá este ejemplo de editor te ayude a entender cómo funcionan estos editores:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style> 
input{ 
border:1px solid #000; 
background:#CCCCCC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:9px; 
margin-bottom:3px; 
} 
</style> 
<script> 
var editor; 
function $(id){ 
    return document.getElementById(id); 
} 
function formato(f){ 
    editor.execCommand(f, false, null); 
} 
function rev(t)    { 
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;"); 
} 
function insertarEnlace(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("CreateLink",false,u); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("InsertImage",false,u); 
} 
function color(c){ 
    editor.execCommand("forecolor",false,c); 
} 
 
function colorFondo(c){ 
    var h=window.ActiveXObject?'backcolor':'hilitecolor'; 
    editor.execCommand(h,false,c); 
} 
function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('nop'); 
            } 
        } 
} 
 
function htmlOEditor(e){ 
e=e || window.event; 
ob=e.target || e.srcElement 
$('edit').style.display=(ob.value=='html')?'none':'block'; 
$('ht').style.display=(ob.value!='html')?'none':'block'; 
$('ht').innerHTML=rev(editor.body.innerHTML); 
ob.value=(ob.value=='html')?'editor':'html'; 
} 
window.onload=function(){ 
     
    editor=$('edit').contentDocument || $('edit').contentWindow.document; 
    editor.designMode='on'; 
} 
</script> 
</head> 
 
<body> 
<form id="form1" name="form1" method="post" action=""> 
  <input type="button" name="Submit" value="N" onclick="formato('bold')" /> 
  <input type="button" name="Submit2" value="C" onclick="formato('italic')" /> 
  <input type="button" name="Submit3" value="S" onclick="formato('underline')" /> 
  <input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" /> 
  <input type="button" name="Submit5" value="link" onclick="insertarEnlace()" /> 
  <input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" /> 
  <input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" /> 
  <input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" /> 
  <input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" /> 
    <input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" /> 
  <input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" /> 
 
  <input type="button" name="Submit12" value="insertar html" onclick="inHTML()" /> 
  <br /> 
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe> 
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div> 
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div> 
</form> 
</body> 
</html>

danybarco · #4 (**permalink**) 24/06/2008, 15:29

Claro. Es lo primero que pense que esa funcion en IE no funcionara. Pero probe a crearme algun tag que si que existia como un <a href=...></a> y ahi si que me lo hizo bien. Me metio el texto dentro de la etiqueta y no a continuacion como con las etiquetas que me cree. Por eso crei que podia ser del tipo de tags que me invente.

Comentarte tambien que con Firefox he tenido algun otro problema, no con esto en concreto, mas bien despues de insertar, ya que el cursor queda dentro de la etiqueta y queria que se posicionara fuera de ella el foco.

Probare con lo que me comentaste y te digo. Muchas gracias.

cusiayal · #5 (**permalink**) 23/08/2010, 11:55

Cita:

Iniciado por Panino5001

No. Seguramente el problema es que FCK debe usar inserthtml como comando de execCommand, y ese comando no funciona en Explorer.
Podrías intentar modificar la función, basándore en que si es explorer haga algo distinto, ejemplo:

Código PHP:

  function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('nop'); 
            } 
        } 
}

Quizá este ejemplo de editor te ayude a entender cómo funcionan estos editores:

Código PHP:

  <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" /> 
<title></title> 
<style> 
input{ 
border:1px solid #000; 
background:#CCCCCC; 
font-family:Verdana, Arial, Helvetica, sans-serif; 
font-size:9px; 
margin-bottom:3px; 
} 
</style> 
<script> 
var editor; 
function $(id){ 
    return document.getElementById(id); 
} 
function formato(f){ 
    editor.execCommand(f, false, null); 
} 
function rev(t)    { 
    return t.split("<").join("&lt;").split(">").join("&gt;").split("\"").join("&quot;"); 
} 
function insertarEnlace(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("CreateLink",false,u); 
} 
function insertarImagen(){ 
    var u; 
    if(!(u=prompt('ingresar url','http://')))return; 
    editor.execCommand("InsertImage",false,u); 
} 
function color(c){ 
    editor.execCommand("forecolor",false,c); 
} 
 
function colorFondo(c){ 
    var h=window.ActiveXObject?'backcolor':'hilitecolor'; 
    editor.execCommand(h,false,c); 
} 
function inHTML(){ 
    var u,u2; 
    if(!(u=prompt('ingresar html')))return; 
     
        try{ 
            editor.execCommand("inserthtml",false,u); 
        }catch(e){ 
            try{ 
                u2=editor.selection.createRange(); 
                u2.pasteHTML(u); 
            }catch(E){ 
                alert('nop'); 
            } 
        } 
} 
 
function htmlOEditor(e){ 
e=e || window.event; 
ob=e.target || e.srcElement 
$('edit').style.display=(ob.value=='html')?'none':'block'; 
$('ht').style.display=(ob.value!='html')?'none':'block'; 
$('ht').innerHTML=rev(editor.body.innerHTML); 
ob.value=(ob.value=='html')?'editor':'html'; 
} 
window.onload=function(){ 
     
    editor=$('edit').contentDocument || $('edit').contentWindow.document; 
    editor.designMode='on'; 
} 
</script> 
</head> 
 
<body> 
<form id="form1" name="form1" method="post" action=""> 
  <input type="button" name="Submit" value="N" onclick="formato('bold')" /> 
  <input type="button" name="Submit2" value="C" onclick="formato('italic')" /> 
  <input type="button" name="Submit3" value="S" onclick="formato('underline')" /> 
  <input type="button" name="Submit4" value="remover formato" onclick="formato('RemoveFormat')" /> 
  <input type="button" name="Submit5" value="link" onclick="insertarEnlace()" /> 
  <input type="button" name="Submit9" value="quitar link" onclick="formato('Unlink')" /> 
  <input type="button" name="Submit6" value="imagen" onclick="insertarImagen()" /> 
  <input type="button" name="Submit7" value="texto rojo" onclick="color('#FF0000')" /> 
  <input type="button" name="Submit8" value="fondo rojo" onclick="colorFondo('#FF0000')" /> 
    <input type="button" name="Submit10" value="deshacer" onclick="formato('undo')" /> 
  <input type="button" name="Submit11" value="rehacer" onclick="formato('redo')" /> 
 
  <input type="button" name="Submit12" value="insertar html" onclick="inHTML()" /> 
  <br /> 
<iframe id="edit" width="100%" height="300" style=" border:1px solid #000;"></iframe> 
<div id="ht" style="width:100%; height:300px; overflow:auto; border:1px solid #000; display:none"></div> 
<div style="margin-top:3px;"><input name="ver" type="button" id="ver" onclick="htmlOEditor(event)" value="html" /></div> 
</form> 
</body> 
</html>

Hola me gusto tu aporte, lo estube probando y me parecio muy sencillo y practico, pero paradojicamente no he podido hacer que puede insertar tipos de fuentes y tañanos. No se si tenes alguna idea para hacer esto en este editor. Saludos. Muchas gracias.