Issue #1622💬 RespondidoAbierto el 30 de noviembre de 2018por deviseropsReacciones 0

Emisión de fuente seleccionada por defecto para fuente personalizada en la tipografía.

Respuesta rápidapor jrking4

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)

jrking421 de diciembre de 2018

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.
artf27 de diciembre de 2018

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

deviserops28 de diciembre de 2018

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.

Plugins de pago que cumplen con este problema

Seleccionado por temas clave y relevancia de etiquetas para ayudarte a enviar más rápido.

Ver todos los plugins

Cargando recomendaciones de plugins de pago...

Opción gratuita

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 →
Opción premium

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.

Todos los tutoriales →

Explorar categorías de plugins

Ve directamente a las páginas de categorías de plugins en el marketplace.