CKEditor: Clase o ID para el cuerpo editor

Question

Tengo una instancia de CKEditor en una página. Estoy tratando de darle cuerpo del CKEditor una clase o identificador de modo que coincida con algunos estilos que he definido en una hoja de estilo.

Hay una documentación de la API rel="noreferrer"> que debe dar acceso a los respectivos elementos DOM, pero me parece que no puede conseguir que funcione. Todos los objetos que tratan de consulta de esa manera llegar indefinido.

¿Alguien sabe cómo hacer esto, o cómo abordar adecuadamente los elementos DOM de CKeditor?

  

Editar : Gracias amigos, la respuesta de nemisj hicieron por mí, pero por alguna razón, no se llega a establecer la marca de verificación "aceptado" en esta pregunta.

Answer 1

A pesar de que parte de la API no fue portado desde 2.x en el momento en que esta cuestión se colocó, ahora es más fácil utilizar el bodyId y bodyClass opciones de configuración.

Por supuesto, la explicación por nemisj es bueno y puede ser útil para otras cosas, pero hay que recordar que cada vez que se pasa de diseño (a vista de origen), el iframe se destruye, por lo que necesita reasignar sus atributos si se hace de forma manual.

Answer 2

Si usted está hablando de CKEditor (versión 3), entonces hay una posibilidad de obtener cualquier instancia DOM dentro del propio editor. Cada instancia tiene CKEditor referencia a ella a través del documento de propiedad "documento".

var documentWrapper = edit.document; 

Esta referencia representar algún envoltorio pública para todos los nodos CKeditor, pero también tiene la referencia directa a su nodo. Puede recuperar por conseguir [ "$"] propiedad.

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

documentNode representará la instancia DOM del nodo documento dentro del marco flotante. Después de tener el ejemplo DOM, se puede hacer lo que quiere hacer con la estructura DOM, Añadir, eliminar, reemplazar las clases, reconstrucción, etc. Por ejemplo

documentNode.body.className = "zork";

Espero que esto debería ser suficiente.

Answer 3

Yo tenía el mismo problema hoy en día para tratar de establecer la bodyClass como esto:

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

});

Lo que encontré es que en esta versión (3.3.1), si se establece FullPage = true, estableciendo el bodyId o bodyClass no funciona, pero si establece FullPage = false, que hace el trabajo.

Espero que esto ayude.

Answer 4

Manual :

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

El archivo (s) CSS que se utiliza para aplicar estilo a los contenidos. Debe reflejar la CSS utilizada en las páginas finales donde los contenidos se van a utilizar.

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

Valor por defecto:

<CKEditor folder>/contents.css

Answer 5

No sabe que el editor, pero ya que todos funcionan de la misma manera, es probable que no se puede acceder a los elementos DOM creados por la instancia, ya que se crean después de que la página ha terminado de cargar, y el DOM está listo, así . Por lo tanto, no existirán nuevos elementos DOM añadido después de eso, teóricamente.

Sin embargo, puede intentar TinyMCE editor de , cosa que tiene una "asociación" con jQuery librería javascript para manipular todo lo que quiera, y el editor en sí es bastante fácil de cambiar en casi todos los sentidos.

Answer 6

Sus consultas pueden devolver indefinido debido a que las instancias del editor se colocan dentro de un marco flotante y la consulta no se ve allí?

Answer 7

En config.js, escribir el código

config.bodyId = 'contents_id';

luego ves Identificación del cuerpo en CKeditor pero cuando se quiere acceder a este id favor utilice

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

$('#parent_id') no significa form_id o cualquier padre que es simplemente la manera de acceder iframe. seguir este código para acceder a los elementos de marco flotante