Emisión de fuente seleccionada por defecto para fuente personalizada en la tipografía.
Al final usé algo parecido a lo siguiente para tener Lato como fuente personalizada y configurarlo como fuente predeterminada: '''js editor.on('load', function () { Añadir fuente Lato y establecer como predeterminado const fontProperty = editor. StyleManager.getProperty ('Tipografía', 'familia de fuentes'); fontProper...
Lee la respuesta completa abajo ↓Pregunta
Hay un problema de fuente: cuando hago clic en cualquier elemento no muestra la fuente actual del elemento, añadí código personalizado para añadir mis fuentes personalizadas. El código funciona perfectamente, pero no muestra la fuente seleccionada por defecto cuando selecciono un párrafo o cualquier texto.
editor.on('load', function () {
styleManager = editor. StyleManager;
fontProperty = styleManager.getProperty('Tipografía', 'familia de fuentes');
var list = [];
fontProperty.set('list', lista);
Lista = [
fontProperty.addOption({value: "'Oswald', sans-serif", nombre: 'Oswald'}),
fontProperty.addOption({value: "Helvetica Neue,Helvetica,Arial,sans-serif", nombre: 'Helvetica'}),
fontProperty.addOption({value: "sans-serif", nombre: 'sans-serif'}),
fontProperty.addOption({value: "Times New Roman", nombre: 'Times New Roman'}),
fontProperty.addOption({value: "Arial Black", nombre: 'Arial Black'}),
fontProperty.addOption({value: "Tahoma", nombre: 'Tahoma'}),
fontProperty.addOption({value: "Verdana, Geneva, sans-serif", nombre: 'Verdana'}),
fontProperty.addOption({value: "Courier New Courier, monospace", nombre: 'Courier New Courier'}),
fontProperty.addOption({value: "'Lato', sans-serif", nombre: 'Lato'}),
fontProperty.addOption({valor: "'Open Sans', sans-serif", nombre: 'Open Sans'}),
fontProperty.addOption({value: "'Montserrat', sans-serif", nombre: 'Montserrat'}),
];
fontProperty.set('list', lista);
styleManager.render();
});
Respuestas (3)
Al final usé algo parecido a lo siguiente para tener Lato como fuente personalizada y configurarlo como fuente predeterminada: '''js editor.on('load', function () { Añadir fuente Lato y establecer como predeterminado const fontProperty = editor. StyleManager.getProperty ('Tipografía', 'familia de fuentes'); fontProperty.addOption({value: 'Lato, Helvetica, Arial, sans-serif', nombre: 'Lato'}); fontProperty.set ('defaults', 'Lato, Helvetica, Arial, sans-serif'); });
de este modo, Lato se comprueba por defecto. Y, por supuesto, que el CSS del cuerpo la declare como tu fuente predeterminada también.
El problema aquí es la fuente calculada del componente seleccionado. Necesitas tener esa fuente calculada dentro de tu lista, si no, no la verás. Como ya ha sugerido @jrking4 puedes establecer tu familia de fuentes por defecto en el cuerpo
He encontrado la respuesta: Tienes que añadir la fuente entre comillas simples o dobles, si no no detectará la fuente así
editor.on('load', function () {
styleManager = editor. StyleManager;
fontProperty = styleManager.getProperty('Tipografía', 'familia de fuentes');
var list = [];
fontProperty.set('list', lista);
Lista = [
fontProperty.addOption({valor: '"Open Sans"', nombre: 'Open Sans'}),
fontProperty.addOption({value: "Montserrat", nombre: 'Montserrat'}),
fontProperty.addOption({value: "Lato", nombre: 'Lato'}),
fontProperty.addOption({value: '"Source Sans Pro"', nombre: 'Source Sans Pro'}),
fontProperty.addOption({value: "Raleway", nombre: 'Raleway'}),
fontProperty.addOption({value: "Roboto", nombre: 'Roboto'}),
fontProperty.addOption({value: "Oswald", nombre: 'Oswald'}),
fontProperty.addOption({value: '"Helvetica Neue"', nombre: 'Helvetica'}),
fontProperty.addOption({valor: '"Times New Roman"', nombre: 'Times New Roman'}),
fontProperty.addOption({value: '"Arial Black"', nombre: 'Arial Black'}),
fontProperty.addOption({value: '"Tahoma"', nombre: 'Tahoma'}),
fontProperty.addOption({value: '"Verdana"', nombre: 'Verdana'}),
fontProperty.addOption({value: '"Courier New Courier"', nombre: 'Courier New Courier'}),
];
fontProperty.set('list', lista);
styleManager.render();
});
porque escribimos fuentes en nuestro CSS como: fuente-familia: 'Oswald' HTML en Browse convierte automáticamente comillas simples en comillas dobles, cuando la fuente coincide con HTML e incluye en JS aparecerá en el desplegable, pero alguna fuente como Lato no detecta así y esta fuente en el navegador aparece como: font -family : Lato , sin comillas simples, así que escribí esta fuente solo comillas dobles. Y otras son comillas dobles dentro de comillas simples que espero que alguien que tenga este problema solucione.
Preguntas y respuestas relacionadas
Continúa investigando con debates sobre temas similares.
Issue #2715
He añadido la fuente personalizada usando el método de abajo, pero esa fuente solo funciona en unos pocos casos
Hay un problema de fuente: cuando hago clic en cualquier elemento no muestra la fuente actual del elemento, añadí código personalizado para...
Issue #1720
[PREGUNTA] Cómo añadir el botón en rasgos personalizados
Hola, intento añadir un botón a mis rasgos personalizados para mis bloques personalizados pero no funciona bien como esperaba y También hay...
Issue #1929
Carga el gestor de activos, pero los activos no funcionan
Estoy usando el icono del lápiz para activar el gestor de activos. El disparador funciona bien, pero cuando hago clic en cualquiera de las...
Issue #857
[Pregunta]: ¿Cómo añado una fuente personalizada en la Tipografía | ¿Desplegable de fuentes?
Hola, Para empezar, esto es lo que llevo mucho tiempo buscando, así que gracias por vuestro esfuerzo. A continuación, me gustaría añadir un...
Plugins de pago que cumplen con este problema
Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.
Cargando recomendaciones de plugins de pago...
Consulta los plugins de código abierto de GrapesJS en GitHub O haz una búsqueda rápida en nuestro catálogo gratuito.
Explora plugins gratuitos →Los plugins premium incluyen soporte, actualizaciones regulares y funciones listas para producción — ahorrando días de trabajo de integración.
Explora plugins premium →Tutoriales relacionados
Guías detalladas sobre el mismo tema.
Explorar categorías de plugins
Ve directamente a las páginas de categorías de plugins en el marketplace.