Tengo una instancia de CKEditor en una página. Estoy tratando de dar al cuerpo del CKEditor una clase o ID para que coincida con algunos estilos que he definido en una hoja de estilos.

Hay una documentación de la API que debería dar acceso al DOM correspondiente elementos, pero parece que no puedo hacer que funcione. Todos los objetos que intento consultar de esa manera resultan indefinidos.

¿Alguien sabe cómo hacer esto o cómo abordar adecuadamente los elementos dom de CKEditor?

Editar : Gracias amigos, la respuesta de Nemisj lo hizo por mí, pero por alguna razón, no puedo establecer la marca de verificación "aceptada" en esta pregunta.

12
Pekka 4 dic. 2009 a las 05:57

7 respuestas

La mejor respuesta

Aunque esa parte de la API no se transfirió desde 2.x en el momento en que se realizó esta pregunta, ahora es más fácil usar bodyId y bodyClass opciones de configuración.

Por supuesto, la explicación de nemisj es buena y puede ser útil para otras cosas, pero debe recordar que cada vez que cambia del diseño (a la vista de origen), el iframe se destruye, por lo que deberá reasignar sus atributos si lo haces manualmente

13
AlfonsoML 17 may. 2010 a las 16:55

En config.js, escribe este código

config.bodyId = 'contents_id';

Entonces verá la identificación del cuerpo en Ckeditor, pero cuando desee acceder a esta identificación, utilice

$('#parent_id').find('iframe').contents().find('#within_iframe')

Allí $('#parent_id') significa form_id o cualquier padre que es simplemente una forma de acceder al iframe. siga este código para acceder al elemento en iframe

0
Abhinav Srivastav 14 feb. 2015 a las 13:16

Sus consultas pueden volver indefinidas porque las instancias del editor se colocan dentro de un iFrame y su consulta no se ve allí.

0
Upperstage 15 dic. 2009 a las 20:42

No conozco ese editor, pero como todos funcionan de la misma manera, probablemente no pueda acceder a los elementos DOM creados por la instancia porque se crean una vez que la página ha terminado de cargarse, y el DOM también está listo. Entonces, cualquier elemento DOM nuevo agregado después de eso, teóricamente no existirá.

Aún así, puede probar editor TinyMCE, que tiene una "asociación" con la biblioteca jQuery javascript para manipular todo lo que desee , y el editor en sí es bastante fácil de cambiar en casi todos los sentidos.

0
yoda 4 dic. 2009 a las 03:04

Del Manual:

<static> {String|Array} CKEDITOR.config.contentsCss

Los archivos CSS que se utilizarán para aplicar estilo a los contenidos. Debe reflejar el CSS utilizado en las páginas finales donde se utilizarán los contenidos.

config.contentsCss = '/css/mysitestyles.css';
config.contentsCss = ['/css/mysitestyles.css', '/css/anotherfile.css'];

Valor predeterminado:

<CKEditor folder>/contents.css

2
Sampson 15 dic. 2009 a las 20:48

Tuve el mismo problema hoy al tratar de configurar el bodyClass de esta manera:

CKEDITOR.replace ('editor1', {fullPage: true, bodyClass: 'myClass'

});

Lo que encontré es que en esta versión (3.3.1), si configura fullpage = true, establecer bodyId o bodyClass no funciona, pero si configura fullPage = false, sí funciona.

Espero que esto ayude.

3
Mark Landson 14 jul. 2010 a las 04:22

Si está hablando de CKEditor (versión 3), existe la posibilidad de obtener cualquier instancia DOM dentro del editor. Cada instancia de CKEditor tiene referencia a su documento a través de la propiedad "document".

var documentWrapper = edit.document; 

Esta referencia representa un contenedor público para todos los nodos CKEditor, pero también tiene la referencia directa a su nodo. Puede recuperar obteniendo la propiedad ["$"].

var documentNode = documentWrapper.$; // or documentWrapper['$'] ;

DocumentNode representará la instancia DOM del nodo del documento dentro del iframe. Después de tener la instancia DOM, puede hacer lo que quiera con la estructura DOM, anexar, eliminar, reemplazar clases, reconstruir, etc. Por ejemplo

documentNode.body.className = "zork";

Espero que esto sea suficiente.

11
nemisj 8 dic. 2009 a las 15:41