0

是否可以使用代码镜像编辑整个网页？

而不是使用 getElementById('editor') 然后创建一个<div id="editor"></div>

我有一个 index.php，我想在页面底部添加代码镜像并使用代码镜像编辑整个页面 - 就像我正在使用 firebug 检查网页并以这种方式编辑 html 并更改文本会更新我的网页。

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta http-equiv="content-type" content="text/html; charset=utf-8">

        <title>Editing the whole web page</title>

        <base href="/"> 


        <meta name="description" content="descritption here" />
        <meta name="keywords" content="keyword1, keyword2, keyword3" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="author" content="" />


        <link rel="stylesheet" href="../lib/CodeMirror/lib/codemirror.css">
<link rel="stylesheet" href="../lib/CodeMirror/theme/monokai.css">
        <script src="../lib/jquery/jquery.js"></script>
        <script src="../lib/jquery-ui/jquery-ui.js"></script>   





        <link rel="canonical" href="/" />

<style type="text/css" media="screen">
.CodeMirror {font-size: 16px; z-index: 999999999;}
</style>

    </head>

    <body>

        <h1>Hello world!</h1>
<p> some text on my page </p>



<script src="../lib/CodeMirror/lib/codemirror.js" ></script>
<script src="../lib/CodeMirror/mode/xml/xml.js" ></script>
<script src="../lib/CodeMirror/mode/javascript/javascript.js" ></script>
<script src="../lib/CodeMirror/mode/css/css.js" ></script>
<script src="../lib/CodeMirror/mode/vbscript/vbscript.js" ></script>
<script src="../lib/CodeMirror/mode/htmlmixed/htmlmixed.js" ></script>


<script type="text/javascript">
    var config, editor;

    config = {
        lineNumbers: true,
        mode : "xml",
        htmlMode: true,
        theme: "monokai",
        tabMode: "indent",
        matchBrackets: true,
        indentWithTabs: true,
        readOnly: false
    };

    // the below only retrieves the get element by id :/
    //editor = CodeMirror.fromTextArea(document.getElementById(""), config);

    function selectTheme() {
        editor.setOption("theme", "monokai");
    }
    setTimeout(selectTheme, 5000);
</script>

    </body>
</html>

谢谢，米歇尔

4

0 回答 0