CSS 语法荧光笔 (ace ajax)

发布于 2024-12-17 02:23:26 字数 2952 浏览 4 评论 0原文

我已经在 ace 上工作了几天，但我仍然无法让它与 css 正确配合，一直在尝试在线寻找解决方案或 ace weki/ 文档等，但一点运气都没有。

这是我尝试用ace突出显示css，但它在firefox上有这些错误消息，

Could not load worker ace.js (line 1)
Error: Could not get domain! [Break On This Error] define("ace/mode/css",["require","expo...).call(f.prototype),b.WorkerClient=f})

有什么想法以及如何解决它吗？

整个代码，

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ace editor</title>
    <style>
    #ace-editor {
        position: absolute;
        width: 500px;
        height: 400px;
    }
    </style>

    <script src="jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/theme-eclipse.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/mode-css.js" type="text/javascript" charset="utf-8"></script>

    <script>
    $(document).ready(function(){

        var editor = ace.edit("ace-editor");
        editor.setTheme("ace/theme/eclipse");

        var CssMode = require("ace/mode/css").Mode;
        editor.getSession().setMode(new CssMode());

        //var textarea = $('.code').hide();
        var textarea = $('.code');

        // Get the value from the editor and place it into the texrarea.
        var text = editor.getSession().getValue();
        textarea.val(text);

        // Update the textarea on change.
        editor.getSession().on('change', function(){

            // Get the value from the editor and place it into the texrarea.
            var text = editor.getSession().getValue();
            textarea.val(text);
            //alert(text);
        });

        $('#form_data').submit(function(e){
            //alert($(this).serialize());

            var object = $(this);
            var path = object.attr('action');

            alert(object.serialize());

            $.post(path, object.serialize(),function(xml){

            });
            return false;
        });
    });
    </script>
</head>
<body>

<form action="data.php" method="post" enctype="multipart/form-data" id="form_data" class="set-form">

    <textarea rows="5" cols="10" class="code" name="ace-editor"></textarea>

    <div style="height:450px; border:1px solid #000;">
        <div id="ace-editor"><style>.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12px;
    cursor: text;
}</style></div>
    </div>

<input type="submit" name="submit" value="submit"/>

</form>

</body>
</html>

原文

I have been working on the ace for a few days but I still cannot get it worked with css properly, been trying to look for solutions online or ace weki/ documentation, etc, but no luck at all.

This is my attempt to highlight css with ace, but it has these error message on firefox,

Could not load worker ace.js (line 1)
Error: Could not get domain! [Break On This Error] define("ace/mode/css",["require","expo...).call(f.prototype),b.WorkerClient=f})

Any ideas what that means and how to fix it?

The entire code,

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Ace editor</title>
    <style>
    #ace-editor {
        position: absolute;
        width: 500px;
        height: 400px;
    }
    </style>

    <script src="jquery-1.7.min.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/ace.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/theme-eclipse.js" type="text/javascript" charset="utf-8"></script>
    <script src="src/mode-css.js" type="text/javascript" charset="utf-8"></script>

    <script>
    $(document).ready(function(){

        var editor = ace.edit("ace-editor");
        editor.setTheme("ace/theme/eclipse");

        var CssMode = require("ace/mode/css").Mode;
        editor.getSession().setMode(new CssMode());

        //var textarea = $('.code').hide();
        var textarea = $('.code');

        // Get the value from the editor and place it into the texrarea.
        var text = editor.getSession().getValue();
        textarea.val(text);

        // Update the textarea on change.
        editor.getSession().on('change', function(){

            // Get the value from the editor and place it into the texrarea.
            var text = editor.getSession().getValue();
            textarea.val(text);
            //alert(text);
        });

        $('#form_data').submit(function(e){
            //alert($(this).serialize());

            var object = $(this);
            var path = object.attr('action');

            alert(object.serialize());

            $.post(path, object.serialize(),function(xml){

            });
            return false;
        });
    });
    </script>
</head>
<body>

<form action="data.php" method="post" enctype="multipart/form-data" id="form_data" class="set-form">

    <textarea rows="5" cols="10" class="code" name="ace-editor"></textarea>

    <div style="height:450px; border:1px solid #000;">
        <div id="ace-editor"><style>.text-layer {
    font-family: Monaco, "Courier New", monospace;
    font-size: 12px;
    cursor: text;
}</style></div>
    </div>

<input type="submit" name="submit" value="submit"/>

</form>

</body>
</html>

分享到QQ

分享到微博