将CodeMirror实施到Widget后端表单中而不更新texarea

时间:2018-11-28 03:48:34

标签: javascript wordpress codemirror

我正在设法解决我要创建的小部件(类似于自定义HTML小部件)在admin后端的wordpress中的实际工作方式。我看过一些教程,但信息似乎有所变化,我感到自己很困惑。

初始化Code​​mirror时一切正常,并应用于文本区域,但是我遇到的错误是:

  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());
      });
    

但是当我通过console.log显示时,editor.codemirror.getValue()返回空

文本区域代码

   <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 :(得分:0)

我相信这是我一个白痴大声笑的原因,我试图从另一个小部件中调用相同的代码块,因为我试图将两个小部件的文本区域都变成代码镜像。

我将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);