How to convert textarea tinymce RTE in the page

#1

What seems to be the problem:
I need to be able to add questions ad answers dynamically using a “add another question” button.
Each question has a title and an answer and both need to be entered using Tinymce editors.
I can add, remove questions using textareas but I can’t figure out how to convert them to rich text editors.
I believe I need to run the conversion script after the rendering of the component. How can I do this?

Steps to Reproduce:

Are you using the latest version of Livewire:
2

Do you have any screenshots or code examples:
I can convert my textarea to tinymce using the following script

    function addTinyMCE(){

        // Initialize
        tinymce.init({
            selector: '.tiny_question_title',
            themes: 'modern',
            height: 200
        });
    }

UPDATE:
I have the editor to display now using

    public function render()
    {

        $this->dispatchBrowserEvent('componentUpdated');

        return view('livewire-form');
        
    }

and in my component

    window.addEventListener('componentUpdated', event => {
        addTinyMCE();
    });

    // Add TinyMCE
    function addTinyMCE(){

        // Initialize
        tinymce.init({
            selector: '.tiny_question_title',
            themes: 'modern',
            height: 200,
            setup: function(editor) {
                editor.on('blur', function(e) {
                    @this.set('XXX', tinymce.get("YYY").getContent());
                });
            }

        });

Can someone help me figure out

        @this.set('XXX', tinymce.get("YYY").getContent());

my code for the questions is

                    @foreach($relatedQuestions as $key => $relatedQuestion)

                        <div class="form-group">
                            <input type="textarea" class="form-control tiny_question_title" placeholder="Enter title"  name="relatedQuestions[{{$key}}]['title']" wire:model.lazy="relatedQuestions.{{$key}}.title">
                            @error('relatedQuestions.'.$key.'.title')<span class="text-danger error">{{ $message }}</span>@enderror

                            <input type="textarea" class="form-control tiny_question_answer" placeholder="Enter text"  name="relatedQuestions[{{$key}}]['text']" wire:model.lazy="relatedQuestions.{{$key}}.text">
                            @error('relatedQuestions.'.$key.'.text')<span class="text-danger error">{{ $message }}</span>@enderror
                        </div>

                        <button class="btn btn-danger btn-sm" wire:click.prevent="removeRelatedQuestion({{$key}})">remove</button>

                    @endforeach

                    <button class="btn text-white btn-info btn-sm" wire:click.prevent="addRelatedQuestion({{$relatedQuestionsIteration}});">Add a question</button>
#2

can i see the function addRelatedQuestion ?

#3

@ramdoni

Sure. Here the functions I use in relation to the questions

    public $relatedQuestionsIteration = 1;
    public $relatedQuestions = [];

    public function mount(String $action, Content $content)
    {

        $this->relatedQuestions = $this->content->relatedQuestions->toArray();
   }

    /**
     * Add a question
     */
    public function addRelatedQuestion()
    {
        $this->relatedQuestions[] = ['title' => '', 'text' => ''];

    }


    /**
     * Remove a question
     */
    public function removeRelatedQuestion($relatedQuestionsIteration)
    {
        unset($this->relatedQuestions[$relatedQuestionsIteration]);
    }
#4

I think at this function addRelatedQuestion() it must add Dispatching Browser Events, just edit function like this

public function addRelatedQuestion()
{
    $this->relatedQuestions[] = ['title' => '', 'text' => ''];
    $this->dispatchBrowserEvent('componentUpdated');   
}