Tinymce not loading in toogle condition (livewire)

mahbub 0
Viewed 21

component view:

@if ($rich)
    <textarea name="content" class="tinymce">{{ $content }}</textarea>
@else
    <textarea name="content">{{ $content }}</textarea>
@endif

I want that, if "$rich" found then show tinymce if not then show plain text. condition working fine. but the problem is first time load tinymce toolbar. after that in reverse the tinymce toolbar not loading.

So i don't understand how to load this.

thanks.

livewires tinymce-4 tinymce laravel-livewire
1 Answers

I solved my problem this way -

  1. I made two separate child livewire and put the textarea code as per component.

    a. simple (livewire)
b. tinymce (livewire)

  2. these child livewire i called from one parent livewire in "if else" condition which i mentioned above post.

    @if ($rich)
    <livewire:common.tinymce>
@else
    <livewire:common.simple>
@endif

  3. in 'tinymce livewire' component view i wrote tinymce init script in "script" tag before content.

EXAMPLE: (tinymce component view)

<div>
    <script>
        tinymce.init({
            selector: "textarea.tinymce",
            menubar: false,
            statusbar: true,
            height: "159px",

            paste_data_images: true,

            plugins: [
                "advlist lists link preview hr paste table",
            ],

            toolbar: "styleselect bold italic bullist | blockquote hr | alignleft aligncenter alignright underline alignjustify | link unlink table",

            autosave_interval: "30s",
            browser_spellcheck: true,
            style_formats: [
                {title: "Header 1", format: "h1"},
                {title: "Header 2", format: "h2"},
                {title: "Header 3", format: "h3"},
                {title: "Header 4", format: "h4"},
                {title: "Header 5", format: "h5"},
                {title: "Header 6", format: "h6"},
                {title: "paragraph", format: "p"},
            ],

        });
    </script>

    <div class="editorpad">
        <p class="nm"> content </p>
        <textarea name="content" class="tinymce">{{ $content ?? '' }}</textarea>
    </div>

</div>

done!

all is working fine.

mahbub0
Related