custom Fonts for quillsjs

[everythinginjs]

Hello there,

Is it possible to add my own RTL fonts to the toolbar option of quillsJs in AdminBro?

thanks for any assistance,

[wojtek-krysiak]

you will need to write your own edit component which render quill with this option (if there is any option for RTL in quill)

[everythinginjs]

Thanks a lot for the reply,

Although I am new to react, I could write a component .tsx to render quill.

but something is going wrong. As soon as I type a letter or do an action like removing other field's text the quill toolbar gets incremented by one!!!!!!

the following is my EDIT components:

import * as React from "react";
import Quill from "quill";

const EditFont = () => {

    var quill = new Quill('#editor', {
        modules: {
            toolbar: [
                [{ header: [1, 2, false] }],
                ['bold', 'italic', 'underline'],
                ['image', 'code-block']
            ]
        },
        theme: 'snow'
    });
    return (
        <div id="editor"></div>
    )
}

export default EditFont

I would be immensely grateful for any hints

[everythinginjs]

I solved the above problem by changing to .jsx and returning html element instead toolbar Array. it works perfectly I can add and edit toolbar but when I would like to update or publish the data. It gives back with validation Error message it seems to me it doesn't have any connections to the DataBase.

I also have an error in my console log which says = "quill Invalid Quill container #editor"

the following is my edit jsx component

import * as React from "react";
import Quill from "quill";

const EditFont = () => {
    var Font = Quill.import('formats/font');
    // We do not add Aref Ruqaa since it is the default
    Font.whitelist = ['mirza', 'roboto', 'iranYekan'];
    Quill.register(Font, true);

    var quill = new Quill('#editor', {
        modules: { toolbar: '#toolbar' },
        theme: 'snow'
    });
    return (
        <div id="tollbox">
            <div id="toolbar">
                <button class="ql-bold">Bold</button>
                <button class="ql-italic">Italic</button>
                <select class="ql-font">
                    <option selected>Aref Ruqaa</option>
                    <option value="mirza">Mirza</option>
                    <option value="roboto">Roboto</option>
                    <option value="iranYekan">IranYekan</option>
                </select>
                <select class="ql-header">
                    <option value="1"></option>
                    <option value="2"></option>
                    <option value="3"></option>
                    <option value="4"></option>
                    <option selected></option>
                </select>
                <select class="ql-size">
                    <option value="small"></option>
                    <option selected></option>
                    <option value="large"></option>
                    <option value="huge"></option>
                </select>
                <button class="ql-underline"></button>
            </div>
            <div id="editor">
                <p>Hello World</p>
            </div>
        </div>
    )
}


export default EditFont

be grateful of any assistance,

[wojtek-krysiak]

basically in EditFont component you will have to handle onChange callback:

const EditFont = (props) => {
  const { onChange } = props

  // your current code + invoke the onChange callback when quill changes content. Otherwise changes you do in the editor wont affect the database
}

you can take a look at the source code of the original quill implementation: https://github.com/SoftwareBrothers/admin-bro/blob/master/src/frontend/components/property-type/richtext/edit.tsx - it is done with regular class component but it should give you a good starting point.

Also, you can watch https://www.youtube.com/watch?v=wOSPDtvJcyQ (or even all 3 movies about adminbro) - it should give you a better look at how you can write a custom components

[everythinginjs]

thanks a lot for hints I could get through of the problem.

to the ones who would like to change quillsJs editor to their need. I have to say just make an edit component with .tsx format then copy all the codes from https://github.com/SoftwareBrothers/admin-bro/blob/master/src/frontend/components/property-type/richtext/edit.tsx to the components then import all the necessary modules and finally edit quill Toolbar to their need.

thanks a lot wojtek krysiak,