javascript - 动态添加的CodeMirror : Change Language Mode

Question

我正在尝试更改动态创建的 CodeMirrors 上的语言模式，但是当我尝试更改一个时，它会更改每个实例。

如何只更改选定的 CodeMirror，即与已更改的 Selection 元素位于同一小部件​​中的代码镜像？

我不想使用 ID，我希望 jQuery 能够知道我正在更改哪个小部件编辑器，但我不知道如何在更改选择时重新初始化编辑器。我尝试重置变量 var editor = CodeMirror.fromTextArea(widget.find('.demotext')[0]); 在 change 事件中，但这只是添加另一个 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>

Answer 1

您可以做的一件事是将对编辑器的引用保存为小部件元素上的 Prop 。您也不需要 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>