动态添加的CodeMirror:更改语言模式
Dynamically added CodeMirror: Change Language Mode
我正在尝试更改动态创建的 CodeMirrors 上的语言模式,但是当我尝试更改一个时,它会更改每个实例。
如何只更改 selected CodeMirror,即与更改后的 Selection 元素位于同一小部件中的代码镜像?
我不想使用 ID,我希望 jQuery 能够知道我正在更改哪个小部件编辑器,但我不知道如何在更改时重新初始化编辑器select。我曾尝试在 change
事件中重置变量 var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
,但这只是附加了另一个 CodeMirror
元素...
$(function() {
$(document).on('click', '.add-editor', function() {
var widget = $('<div class="widget" data-widget="code" style="">' +
'<div class="widget-settings">' +
'<select class="form-control form-control-sm code-mode">' +
'<option data-lang="JavaScript">JavaScript</option>' +
'<option data-lang="HTML mixed-mode">HTML</option>' +
'<option data-lang="CSS">CSS</option>' +
'</select>' +
'</div>' +
'<div class="new-inner" data-language="js">' +
'<textarea class="demotext" style="display: none;"></textarea>' +
'</div>' +
'</div>');
$('body').append(widget);
var theme = 'pastel-on-dark';
var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
editor.setOption('mode', 'JavaScript');
editor.setOption('theme', theme);
editor.setOption('lineNumbers', true);
editor.setOption('smartIndent', true);
editor.setOption('indentWithTabs', true);
editor.setOption('matchBrackets', true);
location.hash = "#" + theme;
editor.save();
mirrorSettings(editor);
});
function mirrorSettings(editor) {
$(document).on('change', '.code-mode', function() {
var widget = $(this).closest('.widget');
var language = $(this).find(':selected').attr('data-lang');
console.log(language);
editor.setOption("mode", language);
console.log(editor); // shows the mode in options
switch (language) {
case 'HTML mixed-mode':
widget.find('.CodeMirror').attr('data-language', 'html');
console.log('true');
break;
case 'JavaScript':
widget.find('.CodeMirror').attr('data-language', 'js');
break;
case 'CSS':
widget.find('.CodeMirror').attr('data-language', 'css');
break;
}
});
}
});
.widget {
width: 500px;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
}
/* Lang: JavaScript */
[data-language='js'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='js'] .cm-def {
color: white !important;
}
[data-language='js'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='js'] .cm-property {
color: #9b87fd !important;
}
[data-language='js'] .cm-string {
color: #ffba76 !important;
}
[data-language='js'] .cm-operator {
color: #ffba76 !important;
}
/* Lang: HTML */
[data-language='html'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='html'] .cm-def {
color: white !important;
}
[data-language='html'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='html'] .cm-property {
color: #9b87fd !important;
}
[data-language='html'] .cm-string {
color: #ffba76 !important;
}
[data-language='html'] .cm-operator {
color: #ffba76 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
<link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
<button class="add-editor">add</button>
您可以做的一件事是将对编辑器的引用保存为小部件元素上的道具。您也不需要 mirrorSettings 功能。我认为它没有按照您的预期运行。相反,您可以只拥有 onChange
处理程序。
$(function() {
$(document).on('click', '.add-editor', function() {
var widget = $('<div class="widget" data-widget="code" style="">' +
'<div class="widget-settings">' +
'<select class="form-control form-control-sm code-mode">' +
'<option data-lang="JavaScript">JavaScript</option>' +
'<option data-lang="HTML mixed-mode">HTML</option>' +
'<option data-lang="CSS">CSS</option>' +
'</select>' +
'</div>' +
'<div class="new-inner" data-language="js">' +
'<textarea class="demotext" style="display: none;"></textarea>' +
'</div>' +
'</div>');
$('body').append(widget);
var theme = 'pastel-on-dark';
var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
var textArea = widget.find('textarea')
widget[0].editor = editor
editor.setOption('mode', 'JavaScript');
editor.setOption('theme', theme);
editor.setOption('lineNumbers', true);
editor.setOption('smartIndent', true);
editor.setOption('indentWithTabs', true);
editor.setOption('matchBrackets', true);
location.hash = "#" + theme;
editor.save();
});
$(document).on('change', '.code-mode', function() {
var widget = $(this).closest('.widget');
var language = $(this).find(':selected').attr('data-lang');
var editor = widget[0].editor
console.log(language);
editor.setOption("mode", language);
switch (language) {
case 'HTML mixed-mode':
widget.find('.CodeMirror').attr('data-language', 'html');
console.log('true');
break;
case 'JavaScript':
widget.find('.CodeMirror').attr('data-language', 'js');
break;
case 'CSS':
widget.find('.CodeMirror').attr('data-language', 'css');
break;
}
});
});
.widget {
width: 500px;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
}
/* Lang: JavaScript */
[data-language='js'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='js'] .cm-def {
color: white !important;
}
[data-language='js'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='js'] .cm-property {
color: #9b87fd !important;
}
[data-language='js'] .cm-string {
color: #ffba76 !important;
}
[data-language='js'] .cm-operator {
color: #ffba76 !important;
}
/* Lang: HTML */
[data-language='html'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='html'] .cm-def {
color: white !important;
}
[data-language='html'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='html'] .cm-property {
color: #9b87fd !important;
}
[data-language='html'] .cm-string {
color: #ffba76 !important;
}
[data-language='html'] .cm-operator {
color: #ffba76 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
<link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
<button class="add-editor">add</button>
我正在尝试更改动态创建的 CodeMirrors 上的语言模式,但是当我尝试更改一个时,它会更改每个实例。
如何只更改 selected CodeMirror,即与更改后的 Selection 元素位于同一小部件中的代码镜像?
我不想使用 ID,我希望 jQuery 能够知道我正在更改哪个小部件编辑器,但我不知道如何在更改时重新初始化编辑器select。我曾尝试在 change
事件中重置变量 var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
,但这只是附加了另一个 CodeMirror
元素...
$(function() {
$(document).on('click', '.add-editor', function() {
var widget = $('<div class="widget" data-widget="code" style="">' +
'<div class="widget-settings">' +
'<select class="form-control form-control-sm code-mode">' +
'<option data-lang="JavaScript">JavaScript</option>' +
'<option data-lang="HTML mixed-mode">HTML</option>' +
'<option data-lang="CSS">CSS</option>' +
'</select>' +
'</div>' +
'<div class="new-inner" data-language="js">' +
'<textarea class="demotext" style="display: none;"></textarea>' +
'</div>' +
'</div>');
$('body').append(widget);
var theme = 'pastel-on-dark';
var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
editor.setOption('mode', 'JavaScript');
editor.setOption('theme', theme);
editor.setOption('lineNumbers', true);
editor.setOption('smartIndent', true);
editor.setOption('indentWithTabs', true);
editor.setOption('matchBrackets', true);
location.hash = "#" + theme;
editor.save();
mirrorSettings(editor);
});
function mirrorSettings(editor) {
$(document).on('change', '.code-mode', function() {
var widget = $(this).closest('.widget');
var language = $(this).find(':selected').attr('data-lang');
console.log(language);
editor.setOption("mode", language);
console.log(editor); // shows the mode in options
switch (language) {
case 'HTML mixed-mode':
widget.find('.CodeMirror').attr('data-language', 'html');
console.log('true');
break;
case 'JavaScript':
widget.find('.CodeMirror').attr('data-language', 'js');
break;
case 'CSS':
widget.find('.CodeMirror').attr('data-language', 'css');
break;
}
});
}
});
.widget {
width: 500px;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
}
/* Lang: JavaScript */
[data-language='js'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='js'] .cm-def {
color: white !important;
}
[data-language='js'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='js'] .cm-property {
color: #9b87fd !important;
}
[data-language='js'] .cm-string {
color: #ffba76 !important;
}
[data-language='js'] .cm-operator {
color: #ffba76 !important;
}
/* Lang: HTML */
[data-language='html'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='html'] .cm-def {
color: white !important;
}
[data-language='html'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='html'] .cm-property {
color: #9b87fd !important;
}
[data-language='html'] .cm-string {
color: #ffba76 !important;
}
[data-language='html'] .cm-operator {
color: #ffba76 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
<link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
<button class="add-editor">add</button>
您可以做的一件事是将对编辑器的引用保存为小部件元素上的道具。您也不需要 mirrorSettings 功能。我认为它没有按照您的预期运行。相反,您可以只拥有 onChange
处理程序。
$(function() {
$(document).on('click', '.add-editor', function() {
var widget = $('<div class="widget" data-widget="code" style="">' +
'<div class="widget-settings">' +
'<select class="form-control form-control-sm code-mode">' +
'<option data-lang="JavaScript">JavaScript</option>' +
'<option data-lang="HTML mixed-mode">HTML</option>' +
'<option data-lang="CSS">CSS</option>' +
'</select>' +
'</div>' +
'<div class="new-inner" data-language="js">' +
'<textarea class="demotext" style="display: none;"></textarea>' +
'</div>' +
'</div>');
$('body').append(widget);
var theme = 'pastel-on-dark';
var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]);
var textArea = widget.find('textarea')
widget[0].editor = editor
editor.setOption('mode', 'JavaScript');
editor.setOption('theme', theme);
editor.setOption('lineNumbers', true);
editor.setOption('smartIndent', true);
editor.setOption('indentWithTabs', true);
editor.setOption('matchBrackets', true);
location.hash = "#" + theme;
editor.save();
});
$(document).on('change', '.code-mode', function() {
var widget = $(this).closest('.widget');
var language = $(this).find(':selected').attr('data-lang');
var editor = widget[0].editor
console.log(language);
editor.setOption("mode", language);
switch (language) {
case 'HTML mixed-mode':
widget.find('.CodeMirror').attr('data-language', 'html');
console.log('true');
break;
case 'JavaScript':
widget.find('.CodeMirror').attr('data-language', 'js');
break;
case 'CSS':
widget.find('.CodeMirror').attr('data-language', 'css');
break;
}
});
});
.widget {
width: 500px;
/* position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%,-50%); */
}
/* Lang: JavaScript */
[data-language='js'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='js'] .cm-def {
color: white !important;
}
[data-language='js'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='js'] .cm-property {
color: #9b87fd !important;
}
[data-language='js'] .cm-string {
color: #ffba76 !important;
}
[data-language='js'] .cm-operator {
color: #ffba76 !important;
}
/* Lang: HTML */
[data-language='html'] .cm-keyword {
color: #ffcc99 !important;
}
[data-language='html'] .cm-def {
color: white !important;
}
[data-language='html'] .cm-variable-2,
[data-language='js'] .cm-variable {
color: #6a51e6 !important;
}
[data-language='html'] .cm-property {
color: #9b87fd !important;
}
[data-language='html'] .cm-string {
color: #ffba76 !important;
}
[data-language='html'] .cm-operator {
color: #ffba76 !important;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css"/>
<link rel="stylesheet" href="https://codemirror.net/theme/pastel-on-dark.css"/>
<button class="add-editor">add</button>