0

Estou com uma necessidade no tinyMCE, já passei várias vezes pela documentação mas não consegui achar uma solução.

Com o editor estou permitindo inserir inputs dentro do editor, o conteúdo salvo vai se tornar um formulário que poderá ser preenchido posteriormente por usuários.

Consegui fazer a inserção sem problema, porém como são campos personalizados (como tamanho, tipo de input, etc), seria bom ter a opção de editar este input depois de criado. Tentei adicionar um evento de dblclick() pra tentar abrir de novo a modal, mas sem sucesso (visto que roda dentro do iframe, qualquer função javascript/jquery que eu faça não irá alcançar o editor).

Alguém tem uma dica do que posso fazer? Tentei criar um plugin pra isso mas sem sucesso. Qualquer exemplo de plugin é exclusivamente por acesso via um botão de menu, não consegui de forma alguma criar um evento de escuta pros inputs diretamente.

Aqui um link do codepen CodePen No codepen só tem um botão que é pra adicionar input, que exemplifica como está funcionando no momento.

Meu javascript contém essas funções

<script>
edtInputText = `
  <div class="custom-panel">
   <label>Define um nome do campo <input id="iname" type="text" name="iname"></label>
   <label>Exemplo <input id="iexemp" type="text" name="iexemp"></label>
   <div class="inline">
     <label>Mínimo de caracteres <input id="imin" type="number" name="imin"></label>
     <label>Máximo de caracteres <input id="imax" type="number" name="imax"></label>
   </div>
  </div> `;

  let editorOpt = {
selector: '#editor',
plugins: [
  'advlist', 'anchor', 'autolink', 'fullscreen', 'help',
  'image', 'lists', 'link', 'media', 'preview', 'visualchars', 'pagebreak',
  'searchreplace', 'table', 'visualblocks', 'wordcount',     ],
images_file_types: 'png,jpg,svg,webp',
file_picker_types: 'file image media',
automatic_uploads: true,
inlinecss: true,
draggable_modal: true,
valid_elements: '@[id|class|style|onclick|ondblclick|contenteditable],sup[class|style],u[class|style],s[class|style],sub[class|style],span[class|style],table[class|style|colspan|rowspan],tr[class|style|colspan|rowspan],td[class|style|colspan|rowspan],tbody[class|style|colspan|rowspan],b[class|style],a[class|style|href|src],p[class|style],-div[id|dir|class|align|style],ins[datetime|cite],-ul[class|style],-li[class|style],code[class|style|contenteditable],img[class|style|src|width|height|data],var[class|style|src|data|contenteditable],hr[class|style], input[style|class|type],textarea[style|class|rows|cols]',
extended_valid_elements: 'input[class|style|type|name|minlength|maxlength|min|max|placeholder|required|ondblclick],textarea[rows|cols|class|style|required]',
toolbar: 'addField ',
pagebreak_separator: '<p style="text-align:center" class="page-break">-------- QUEBRA DE PÁGINA --------</p>',
font_size_formats: '8pt 10pt 12pt 14pt 16pt 18pt 20pt 24pt 28pt 30pt 36pt 48pt 56pt 70pt 80pt 90pt',
formats: {
  bold: { inline: 'b', 'classes': 'bold' },
  italic: { inline: 'i', 'classes': 'italic' },
  underline: { inline: 'u', 'classes': 'underline', exact: true },
  forecolor: { inline: 'span', classes: 'forecolor', styles: { color: '%value' } },
  hilitecolor: { inline: 'span', classes: 'hilitecolor', styles: { backgroundColor: '%value' } },
},
my_custom_variable: 'test',
line_height_formats: '0 0.5 0.8 1 1.2 1.4 1.6 2',
table_sizing_mode: 'auto',
table_column_resizing: 'resizetable',

setup: (editor) => {

  /* Custom Field button */
  editor.ui.registry.addMenuButton('addField', {
    icon: 'paste-row-before',
    tooltip: 'Adicionar campos',
    fetch: function (callback) {

      let fieldoptions = [
        {
          type: 'menuitem',
          text: 'Campo Texto',
          onAction: function () {
            tinymce.activeEditor.windowManager.open({
              title: 'Adicionar campo do Tipo Texto',
              level: 'info',
              body: {
                type: 'panel',
                name: 'text_field',
                items: [
                  {
                    type: 'htmlpanel', // an HTML panel component
                    html: edtInputText
                  },
                ]
              },
              buttons: [
                { type: 'cancel', text: 'Fechar' },
                { type: 'submit', buttonType: 'primary', text: 'Inserir campo' }
              ],
              onSubmit: function () {
                let required = $('#imin').val() >= 1 ? 'required' : ''
                editor.insertContent(`<input
                        placeholder="` + $('#iexemp').val() + `"
                        minlength="` + $('#imin').val() + `"
                        maxlength="` + $('#imax').val() + `"
                        name="` + $('#iname').val() + `"
                        ${required}
                        ondblclick="edtField(this)"
                        type="text"
                  /> `)
                tinymce.activeEditor.windowManager.close()
              }
            })
          }
        }
      ]

      callback(fieldoptions)

    }

  })
  /* End Custom Field button */
 },
}

tinymce.init(editorOpt);
</script>

Alguma ideia de como posso editar estes inputs criados?

1 Resposta 1

0

Consegui de uma maneira alternativa.

Dentro do meu javascript criei a função pra abrir a modal assim:

edtField = function(ob) { //ob será o elemento do duplo click
    tinymce.activeEditor.windowManager.open({
        //As options utilizadas na modal.
    });
}

E ao inserir um input eu gravo com dbclick usando o parent, o que faz ele utilizar uma função fora do iframe do tinyMCE.

ondblclick="parent.edtField(this)"

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .