Question

我一直试图将主题从默认更改为钴，并且忘记了我做错了什么。任何人都可以帮助指导我正确的方向，并解释我做错了什么吗？

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<link rel="stylesheet" href=http://codemirror.net/doc/docs.css>
<script src="http://codemirror.net/lib/codemirror.js"></script>
<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<script src="http://codemirror.net/mode/xml/xml.js"></script>
<script src="http://codemirror.net/mode/javascript/javascript.js"></script>
<script src="http://codemirror.net/mode/css/css.js"></script>
<script src="http://codemirror.net/mode/htmlmixed/htmlmixed.js"></script>
<script src="http://codemirror.net/keymap/extra.js"></script>

<link rel="stylesheet" href="http://codemirror.net/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror.net/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror.net/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror.net/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror.net/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror.net/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror.net/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror.net/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror.net/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror.net/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror.net/theme/neat.css">
</head>
<body>
  <textarea id=code name=code>
&lt;!doctype html&gt;
&lt;html&gt;
  &lt;head&gt;
    &lt;meta charset=utf-8&gt;
    &lt;title&gt;HTML5 canvas demo&lt;/title&gt;
    &lt;style&gt;p {font-family: monospace;}&lt;/style&gt;
  &lt;/head&gt;
  &lt;body&gt;
    &lt;p&gt;Canvas pane goes here:&lt;/p&gt;
    &lt;canvas id=pane width=300 height=200&gt;&lt;/canvas&gt;
    &lt;script&gt;
      var canvas = document.getElementById('pane');
      var context = canvas.getContext('2d');

      context.fillStyle = 'rgb(250,0,0)';
      context.fillRect(10, 10, 55, 50);

      context.fillStyle = 'rgba(0, 0, 250, 0.5)';
      context.fillRect(30, 30, 55, 50);
    &lt;/script&gt;
  &lt;/body&gt;
&lt;/html&gt;</textarea>
    <iframe id=preview></iframe>

    <p>Select a theme: <select onchange="selectTheme()" id=select>
        <option value="0" selected>default</option>
        <option value="1">3024-day</option>
        <option value="2">3024-night</option>
        <option value="3">ambiance</option>
        <option value="4">base16-dark</option>
        <option value="5">base16-light</option>
        <option value="6">blackboard</option>
        <option value="7">cobalt</option>
        <option>eclipse</option>
        <option>elegant</option>
        <option>erlang-dark</option>
        <option>lesser-dark</option>
        <option>midnight</option>
        <option>monokai</option>
        <option>neat</option>
        <option>night</option>
    </select></p>

  <button id="changetheme" onclick="themechange()" style="margin-top: -35px; float: right;">Cobalt</button>
</body>
</html>

CSS

.CodeMirror {
    float: left;
    width: 50%;
    border: 1px solid black;
}

iframe {
    width: 49%;
    float: left;
    height: 300px;
    border: 1px solid black;
    border-left: 0px;
}

的Javascript

// Initialize CodeMirror editor with a nice html5 canvas demo.
var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
    lineNumbers: true,
    styleActiveLine: true,
    matchBrackets: true
});

// Sets the theme
var input = document.getElementById("select");

function selectTheme() {
    var theme = input.options[input.selectedIndex].innerHTML;
    editor.setOption("theme", theme);
}

function themechange() {
    var cobalt = input.options[input.value = "7"].innerHTML;
    editor.setOption("theme", cobalt);}

Answer 1

将最底部的代码更改为：

$(function() {
    $('#changetheme').click(toggletheme);

    function toggletheme() {
        $("#select").val(8).trigger('change');
    }
});

它无法正常工作的原因是因为您选择了a元素且标识为changetheme，而实际按钮是button元素。另一个问题是只更改选择菜单的值不会触发更改事件，因此您必须手动触发它。

CodeMirror从Button更改主题

1 个答案: