More formatting options in text editor

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

“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.

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();

4. 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>';
});

5. 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

Hi Johnny,

Thanks for this!

Hello @wdsandeep ,

Unfortunately no. I guess you can follow the instructions to add your own implementation for the editor. I will try to find some time to officially also document it but it will be really a copy-paste of the above.