我正在设法解决我要创建的小部件(类似于自定义HTML小部件)在admin后端的wordpress中的实际工作方式。我看过一些教程,但信息似乎有所变化,我感到自己很困惑。
初始化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不是我最强的语言。
答案 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);