javascript - CodeMirror Change Theme from Button - Stack Overflow|江阴雨辰互联

I've been trying to change the theme from default to cobalt and idk what I'm doing wrong. Can anyone help guide me the right direction, and explain what I'm doing wrong?

HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>CodeMirror: HTML5 preview</title>
<link rel="stylesheet" href=.css>
<script src=".js"></script>
<link rel="stylesheet" href=".css">
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>
<script src=".js"></script>

<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".css">
<link rel="stylesheet" href=".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);}

http://jsbin./uJUzU/8/edit

I've been trying to change the theme from default to cobalt and idk what I'm doing wrong. Can anyone help guide me the right direction, and explain what I'm doing wrong?

HTML

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

<link rel="stylesheet" href="http://codemirror/lib/codemirror.css">
<link rel="stylesheet" href="http://codemirror/theme/3024-day.css">
<link rel="stylesheet" href="http://codemirror/theme/3024-night.css">
<link rel="stylesheet" href="http://codemirror/theme/ambiance.css">
<link rel="stylesheet" href="http://codemirror/theme/base16-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/base16-light.css">
<link rel="stylesheet" href="http://codemirror/theme/blackboard.css">
<link rel="stylesheet" href="http://codemirror/theme/cobalt.css">
<link rel="stylesheet" href="http://codemirror/theme/eclipse.css">
<link rel="stylesheet" href="http://codemirror/theme/elegant.css">
<link rel="stylesheet" href="http://codemirror/theme/erlang-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/lesser-dark.css">
<link rel="stylesheet" href="http://codemirror/theme/midnight.css">
<link rel="stylesheet" href="http://codemirror/theme/monokai.css">
<link rel="stylesheet" href="http://codemirror/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);}

Share Improve this question edited Sep 1, 2013 at 17:46 asked Sep 1, 2013 at 14:57 Michael Schwartz 8,45514 gold badges90 silver badges153 bronze badges

Add a ment |

1 Answer 1

Sorted by: Reset to default 3

Change the code at the very bottom to this:

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

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

The reason it wasn't working was because you were selecting an a element with id changetheme, while the actual button was a button element. Another problem was that just changing the value of the select menu doesn't trigger the change event, so you have to manually trigger it.

发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745132753a4613052.html

javascript - CodeMirror Change Theme from Button - Stack Overflow

1 Answer 1

发表回复

评论列表（0条）

联系我们

400-800-8888

javascript - CodeMirror Change Theme from Button - Stack Overflow

1 Answer 1

相关推荐