Question

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

初始化Codemirror时一切正常，并应用于文本区域，但是我遇到的错误是：

将新的html输入到codemirror中时，该小部件的保存按钮不会激活。

如果我更改另一个字段来激活保存按钮，则不会发送或保存来自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不是我最强的语言。

Answer 1

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

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

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

1 个答案: