froala / wysiwyg-editor

The next generation Javascript WYSIWYG HTML Editor.
https://www.froala.com/wysiwyg-editor
Other
5.3k stars 675 forks source link

Set fontFamily on Firefox doesn't work #4702

Open florincod opened 1 year ago

florincod commented 1 year ago
Expected behavior.

On Chrome and other browsers it works, i expect to get this (code view): <p><span style="font-family: Arial, Helvetica, sans-serif;">test</span></p>

Actual behavior.

On Firefox it doesn't set the font family: <p>test</p>

Steps to reproduce the problem.
<froala
      ref="froala"
      :value="text"
      :config="selectedConfig"
      :tag="tag"
      @update:value="textChangeHandler($event)"
  />

....

import { Froala } from 'vue-froala-wysiwyg/src/vue-froala';

....
onInitialized() {
  if (!this.$refs.froala) {
      // Could happen when navigating away quickly and Froala isn't initialed yet
      return false;
  }

  this.froalaInstance = this.$refs.froala.getEditor();
  this.froalaInstance.events.focus();
  // Set a default font
  this.froalaInstance.fontFamily.apply('Arial, Helvetica, sans-serif');
},

it happens also when addin a setTimeout if I add this for test it works: editor.html.insert('Your text here');

Editor version.

"vue-froala-wysiwyg": "4.1.0" or 4.1.3

OS.

Windows 10 (it happens on Macbook too)

Browser.

Firefox 118.0.2 (64-bit)

florincod commented 1 year ago

I found a fix in events, after many tries with events and options:

events: {
  keydown: async function () {
      // set default font family, fix for Firefox
      if (!this.html.get()) {
          this.fontFamily.apply('Arial, Helvetica, sans-serif');
      }
  }
}