More formatting options in text editor

Grocery CRUD Enterprise
1

Can I change the default text editor in GCE v3? I really need a text editor with better formatting options like e.g. paragraph alignment. Is there anything I can do to show such options in CKEditor?

TIA.

2

I think you are now using Quill editor in v3, right @johnny? Could you please enable the alignment option for us in the next version?

modules: {
    toolbar: [
      [{ 'align': null}, {'align': 'center'}, {'align': 'right'}, {'align': 'justify'}],
      ['image', 'code-block']
    ]
  },

TIA.

3

@johnny How can we customize the Quill text editor presented in Grocery CRUD Enterprise modal dialogs (add, edit)?
I would like to add elements to the toolbar and load additional Quill modules…

TIA.

4

Hello @bgeneto ,

That’s correct we are using Quill as text editor. Currently not able to customise it (I will keep in mind though to include the suggested changes that you’ve asked for - or include all of the elements that Quill elements anyway) but for now I want to create a documentation page of how to use your own texteditor.

@bgeneto is there any (free) texteditor that you use to see if I can guide you adding your favorite one?

Regards
Johnny

1 Like
5

“but for now I want to create a documentation page of how to use your own texteditor” - this would be great!

In the Grocery CRUD community I could view the source add classes etc… I use the texteditor a lot.

6

Hello @bgeneto ,

I have added the following for the next version (will inform you once released)

 toolbar: [
          ["bold", "italic", "underline", "strike"],
          ["image", "blockquote", "code-block"],

          [
            { align: null },
            { align: "center" },
            { align: "right" },
            { align: "justify" },
          ],

          [{ list: "ordered" }, { list: "bullet" }],

          [{ size: ["small", false, "large", "huge"] }],
          [{ header: [1, 2, 3, 4, 5, 6, false] }],

          ["clean"],
        ],

@remco for the steps you can do this (still couldn’t find time to officially document it):

  1. Make sure that the configuration of Grocery CRUD ‘publish_events’ is set to true (default is false)

  2. Add your favorite editor to your JavaScript files. Our example tinymce: https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js

  3. Use unsetAutoloadJavaScript with the below line:

$crud->unsetAutoloadJavaScript();
  1. Create a callbackEditField (same for add callbackAddField)
$crud->callbackEditField('address_line_2', function ($fieldValue) {
    return '<textarea class="tinymce-texteditor" name="address_line_2" style="width:100%">' . $fieldValue . '</textarea>';
});
  1. Load the JavaScript to have a callback on mount and unmout (very important) like this:
groceryCrudLoader(document.querySelectorAll(".grocery-crud")[0], {
    editFields: [ // works with $crud->callbackEditField
        {
            fieldName: 'address_line_2',
            onMount: function onMount() {
                tinymce.init({
                    selector: '#address_line_2-texteditor',  // change this value according to your HTML
                });
            },
            onUnmount: function onUnmount() {
                tinymce.remove();
            }
        }
    ],
});

Since I am too lazy to add extra JavaScript to my templates I am doing it like this:

$js_files[] = 'https://cdn.tiny.cloud/1/qagffr3pkuv17a8on1afax661irst1hbr4e6tbv888sz91jc/tinymce/6/tinymce.min.js';
$js_files[] = 'http://localhost/grocery-crud/grocery-crud-3/grocery-crud-3-example/custom-javascript.js';

I know that there are lot of steps but they are working. You should do the same for addFields once you have everything sorted out.

Let me know if that worked for you.

Regards
Johnny

1 Like
7

Hi Johnny,

Thanks for this!

:pray:

1 Like