Внедрение CodeMirror в бэкэнд-форму Widget без обновления texarea - PullRequest
Новая
       7

Внедрение CodeMirror в бэкэнд-форму Widget без обновления texarea

0 голосов
/ 28 ноября 2018

Я пытаюсь обдумать, как это на самом деле работает в WordPress на административной стороне для виджета, который я пытаюсь создать (аналогично пользовательскому HTML-виджету).Я прочитал несколько учебных пособий, но информация, кажется, меняется, и я чувствую, что просто запутался.

Все отлично работает при инициализации codemirror и применяется к текстовой области, но у меня возникают следующие ошибки:

  1. Когда новый код HTML вводится в codemirror, кнопка сохранения для виджета не активируется.

  2. Если я изменяю другое поле, чтобы активировать кнопку сохранения, данные из codemirrorне отправлено или сохранено. 

    (function ($) {
    $(document).ready( function(){
        var editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {};
        editorSettings.codemirror = _.extend(
            {},
            editorSettings.codemirror,
            {
                lineNumbers: true,
                mode: "text/html",
                indentUnit: 2,
                tabSize: 2,
                autoRefresh:true,
            }
        );
        var editor = wp.codeEditor.initialize( $('#<?php echo $textarea_id; ?>'), editorSettings );  
    });
})(jQuery);
</script>

    Я также попытался добавить: 

     $(document).on('keyup', '.CodeMirror-code', function(){
      editor.codemirror.save();
      $('#<?php echo $textarea_id; ?>').html(editor.codemirror.getValue());
  });

но editor.codemirror.getValue () возвращать пустой, когда я отображаю через console.log

Код для Textarea 

   <p>
       <label for="<?php echo $textarea_id; ?>"><?php _e( 'Locked Content:' ); ?></label>
       <textarea id="<?php echo $textarea_id; ?>" name="<?php echo $this->get_field_name( 'locked-content' ); ?>" class="widefat"><?php echo esc_textarea( $instance['locked-content'] ); ?></textarea>
    </p>

Любая помощь (ссылки на надлежащий учебник, советы и т. д.) будет высоко ценится JS не мой самый сильныйязык.

1 Ответ

0 голосов
/ 28 ноября 2018

Я полагаю, что это привело меня к тому, что я идиот. Я вызывал этот же блок кода из другого виджета, когда пытался превратить оба виджета в текстовые области в codemirrors.

Я изменил имя 2 переменныхчтобы быть более конкретным в отношении виджета, например: 

var editorSettings    
var editor

, где изменилось на: 

var cm_editorSettings    
var cm_editor

Это позволило мне cm.editor.codemirror.getValue () и вернуть фактическое значение,Все еще не уверен, что это правильный способ реализации, поэтому, пожалуйста, исправьте меня, если я ошибаюсь, но в настоящее время рабочий код для обновления текстовой области и включения кнопки сохранения выглядит следующим образом: 

<script type="text/javascript">
(function ($) {
    $(document).ready( function(){
          var cm_editorSettings = wp.codeEditor.defaultSettings ? _.clone( wp.codeEditor.defaultSettings ) : {};
            cm_editorSettings.codemirror = _.extend(
                {},
                cm_editorSettings.codemirror,
                {
                    lineNumbers: true,
                    mode: "text/html",
                    indentUnit: 2,
                    tabSize: 2,
                    autoRefresh:true,
                }
            );
        var cm_editor = wp.codeEditor.initialize($('#<?php echo $textarea_id; ?>') , cm_editorSettings );
        $(document).on('keyup', '.CodeMirror-code', function(){
            $('#<?php echo $textarea_id; ?>').html(cm_editor.codemirror.getValue());
            $('#<?php echo $textarea_id; ?>').trigger('change');
        });

    });
})(jQuery);

...