Using the Froala editor in a Typescript/Vue project

Question

I am attempting to use Froala in a Typescript/Vue project, and I am running into a weird import issue.

Since Froala lacks proper typings, I rolled my own in a froala.d.ts:

declare module 'froala-editor'

and in my component, import it like so:

import FroalaEditor from 'froala-editor';

In my component mounted() callback, I initialize the component:

this.editor = new FroalaEditor(`div#${this.componentId}`, {            
    theme: 'gray',
    toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', 'fontFamily', 'fontSize', 'color', 'inlineStyle', 'paragraphStyle', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', 'insertTable', 'specialCharacters', 'insertHR', 'selectAll', 'clearFormatting', 'undo', 'redo'],
    toolbarVisibleWithoutSelection: true,
    key: 'AABBFFGETYOUROWNLICENSEKEY==',
    attribution: false
});

this.editor.html.set(this.value);

The component initializes and I get a happy, well-adjusted Froala editor exactly where I expect it in my UI. The bizarre thing is that the editor object doesn't have an 'html' property, which the Froala docs insist that it should:

I'm guessing that it has something to do with how the module is getting imported, but I'm stuck.

I'm aware that Froala has a stock Vue wrapper, but since this is part of an application framework, I'd prefer to wrap Froala directly, rather than wrapping a wrapper.

Using the Froala editor in a Typescript/Vue project

0 Answers0