Jan 20, 2023

Level 1

TinyMCE dynamic ID , javascript and Laravel

Hi, I'm having mulitple textareas on a page with dynamic generated id. To be able to save the data in the database from one textarea I need an ID of the textarea I'm editing to be present in my javascript.

Help would be appreciated as I have used days on this now.

<script src="https://cdn.tiny.cloud/1/86.............../tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>
<script>
   function saveagreement(inst){
            var _token = $('input[name="_token"]').val();
            var doneText = tinyMCE.activeEditor.getContent();
            var worksheetId = ?????;
		.
		Some ajax code.
   }
</script>
.
.
@foreach($worksheet as $key => $ws)
.
   <script>
		tinymce.init({selector:'.form-controll',toolbar:  ' styleselect ', menubar: false, plugins: 				 
                                 'link',link_context_toolbar: true, height: 200,
                                 init_instance_callback: function(editor) {
                                          editor.on('KeyUp', function(e) {
                                                                saveagreement(e);
                                                            });                                                            
                                                        }
                                           });
    </script>

     <textarea class="form-controll" rows="4" cols="70" name="task"  
	   	 id={{"updateWorksheetdonetext".$loop->index}} overflow-y: scroll;
                  placeholder="Link til  ..... !!">{{$ws->doneText}}
     </textarea>
.
@endforeach

Yorki

3 years ago

Level 11

You need to place ID somewhere, so eg. add data-worksheet-id on textarea:

<textarea 
  data-worksheet-id="{{ $ws->id }}"
  class="form-controll" 
  rows="4" 
  cols="70" 
  name="task"  
  id="{{ "updateWorksheetdonetext".$loop->index }}"
  placeholder="Link til  ..... !!"
>{{$ws->doneText}}</textarea>

Then get this info from tiny MC instance by:

function saveagreement (inst){
  var _token = $('input[name="_token"]').val();
  var doneText = tinyMCE.activeEditor.getContent();
  var worksheetId = inst.getElement().dataset.worksheetId;
}

However I belive you need to alter init_instance_callback to pass editor variable:

saveagreement(e, editor);

and then in saveagreement:

function saveagreement (inst, editor){
  var worksheetId = editor.getElement().dataset.worksheetId;
}

steen

3 years ago

Level 1

Thanks. I'm getting nothing on the screen now using alert:

After editing my code looks like this.

 function saveagreement(inst, editor){

            var worksheetId = editor.getElement().dataset.worksheetId;

            alert(worksheetId);

       ------------------------
                tinymce.init(
                          init_instance_callback: function(editor) {
                          editor.on('KeyUp', function(e) {
                          saveagreement(e, editor);
                                                            });
         ----------------------------
<textarea class="form-controll" style="align: left"  rows="4" cols="70" name="task" data-worksheet-id="{{ $ws->id }}"

Yorki

3 years ago

Level 11

@steen did you try both versions? I mean this one:

var worksheetId = inst.getElement().dataset.worksheetId;

steen

3 years ago

Level 1

@Yorki

Then I'm getting

   Uncaught TypeError: inst.getElement is not a function

Yorki

3 years ago

Level 11

Well then just go for direct passing the id to the function :)

editor.on('KeyUp', function(e) {
  saveagreement(e, {{ $ws->id }});
});

So you have saveagreement function like this:

function saveagreement(inst, worksheetId) {
  alert(worksheetId);
}

steen

3 years ago

Level 1

 function saveagreement(inst, worksheetId){
            alert(worksheetId);



tinymce.init({selector:'.form-controll',toolbar:  '.....
                                                        init_instance_callback: function(editor) {
                                                            editor.on('KeyUp', function(e) {
                                                                saveagreement(e, {{ $ws->id }});
                                                            });

Doing this gives me: undefined

I have then tryed : saveagreement(e, {!! $ws->id !!}); does not work

But saveagreement(e, 1);

It works of course,. So using blade inside the script does not work

Yorki

3 years ago

Best Answer

Level 11

@steen I though $worksheet is collection of models having IDs. However if you want the id of texarea then just go for:

editor.on('KeyUp', function(e) {
  saveagreement(e, 'updateWorksheetdonetext.{{ $loop->index }}');
});

Then you have id in saveagreement:

function saveagreement(inst, textareaId) {
  // access to textarea element
  const textarea = document.getElementById(textareaId);

  alert(textareaId);
}

<textarea 
  ...
  id="{{ "updateWorksheetdonetext".$loop->index }}"
>{{$ws->doneText}}</textarea>

steen

3 years ago

Level 1

@yorki

Thanks for helping out. Much appreciated.

Please or to participate in this conversation.