Google Fonts y TinyMCE

Question

¿Se pueden usar las fuentes de google con tinyMCE? ¿Cómo se puede hacer esto?

Answer 1

Sí, esto es posible, describiré dos formas de lograrlo.

Camino # 1: Ejemplo: fuente de Google Cantarell utilizando el propio plugin de

Con el fin de hacer que funcione tendrá que write your own tinymce plugin y colocar este código en la cabecera tinymce iframes. Use el evento onInit en su propio complemento para agregarlo.

Esto se verá así:

ed.onInit.add(function(){ 
    with(document.getElementById(iframe_id).contentWindow) 
    {   
     var h=document.getElementsByTagName("head"); 
     var newStyleSheet=document.createElement("link"); 
     newStyleSheet.rel="stylesheet"; 
     newStyleSheet.href="http://fonts.googleapis.com/css?family=Cantarell&subset=latin"; 
     h[0].appendChild(newStyleSheet); 
    } 
    }); 

Además se tendrá que añadir la fuente deseada para el CSS con el fin de aplicarlo. Puede usar el tinmyce init parameter content_css. No es necesario especificar algo como:

p { font-family: 'Cantarell', arial, serif; } 

Camino # 2: Ejemplo: fuente de Google Cantarell declaración using font-face

Puede download the font directamente de las fuentes de Google.

Coloque el archivo de fuente (es decir, Cantarell-Regular.ttf) en algún lugar de su servidor (tenga en cuenta que IE (Internet Explorer) por lo general necesita eot-files). Ahora todo lo que necesita hacer es utilizar una declaración @ font-face en su content_css

@font-face {font-family: "my_own_family"; src: url("http://mydomain.com/fonts/Cantarell-Regular.ttf");} 

y aplicarlo a un elemento css. Ejemplo:

p { font-family: 'my_own_family', helvetica, arial, serif; } 

Answer 2

También existe una más, probablemente la forma más fácil de insertar fuentes de Google en tinyMCE.

En tinyMCE.init especificar de la siguiente manera:

content_css : "/tinymce_stylesheet.css,http://fonts.googleapis.com/css?family=Sanchez" 

Y luego, en tinymce_stylesheet.css se puede utilizar cualquier fuente que ha importado desde Google.

Un consejo más: En lugar de escribir nueva hoja de estilo desde cero, duplicar el archivo:

tiny_mce/themes/advanced/skins/default/content.css 

... Y cambiar la fuente de la familia allí.

Answer 3

Es más fácil ahora después de la actualización de WordPress 3.9. No necesita tocar los archivos centrales de WordPress. Simplemente use el siguiente código para incluir nuevas fuentes en su editor de publicaciones.

Lea un tutorial más detallado aquí.

http://kvcodes.com/2014/05/how-to-add-google-webfonts-to-wordpress-tinymce-editor/

Answer 4

finalmente resuelto mi problema. Después de buscar más de dos horas y sin solución.

Acabo de añadir font-face en TinyMCE CSS.

hacer esto:

1 - Descargar la fuente Google y el pasado en su carpeta de fuentes (Cualquier ruta que desea) 2 - Ir a tinymce \ js \ tinymce \ skins \ gris claro y abierto content.min. css

añadir

@font-face { 
    font-family: Questrial; 
    src: url("fontfolder/yourfont.ttf"); 
} 

en primera línea antes de "cuerpo".

que va a ser así

@font-face { 
    font-family: Questrial; 
    src: url("../../../../../../font/questrial.ttf"); 
}body{background-color:#FFFFFF;color:#000000;font-family:Verdana,Arial,Helvetica,sans-s............. 

y aquí estamos !!!! ¡Lo tienes, simple pero HARRRRRRRRD para encontrar! Disfrútalo y comparte esta solución.

Answer 5

Comprendo que esto es una vieja pregunta, pero mi sugerencia, especialmente si se desea utilizar la fuente más de 1 web en su contenido editado con TinyMCE, a continuación, usted podría:

1. Añadir las fuentes seleccionadas Fron Google WebFonts (u otro proveedor de la fuente - use @font-face para esto)
2. definir clases selector en su hoja de estilo
3. Añadir las clases como en la configuración de custom format selectors TinyMCE (por ejemplo .font-1.).

También puede especificar cierto a la opción de configuración TinyMCE style_formats_merge, que se sumarán a sus estilos personalizados a los valores de TinyMCE, en lugar de sobrescribir ellos.

Aquí es un ejemplo de cómo se ve en un CMS que he desarrollado (aquí sólo añadí el langosta Dos fuente, pero con eficacia todas las fuentes que se podría añadir, si es necesario):

Así que en Javascript, que forma parte de la configuración de mi se ve algo como:

tinymce_options = { 
    style_formats_merge: true, 
    style_formats = [{ 
    title: "Theme", 
    items: [{ 
     title: "Fonts", 
     items: [ 
     { title: "1. Lobster Two", inline: "span", classes: "font-1"} 
     ] 
    }, { 
     title: "Styles", 
     items: [ 
     /* here add further theme styles if needed... */ 
     ] 
    }] 
    }] 
}; 

y en el estilo de mi sitio web (o tema), añadí:

.font-1 { font-family:'Lobster Two'; } 

Answer 6

Incluso más fácil de hacer iframe tinymce para cargar una fuente de Google que incluye diferentes estilos o pesos es reemplazar la coma con la versión URL codificada %2C

así que en vez algo como esto:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400,700' });

sería algo como esto:

tinyMCE.init({ selector: 'textarea', content_css : '/myLayout.css,https://fonts.googleapis.com/css?family=PT+Serif:400%2C700' });

tinymce ignorará la coma codificada y cargará la fuente muy bien.