Question

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

如何仅更改选定的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

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

动态添加的CodeMirror：更改语言模式

1 个答案: