ace.js實現一個在線代碼編輯器

背景

純粹為了在自己博客實現一個代碼編輯器,方便在線測試各種代碼。

ace介紹

ACE 是一個開源的、獨立的、基于瀏覽器的代碼編輯器,可以嵌入到任何web頁面或JavaScript應用程序中。ACE支持超過60種語言語法高亮,并能夠處理代碼多達400萬行的大型文檔。ACE開發團隊稱,ACE在性能和功能上可以媲美本地代碼編輯器(如Sublime Text、TextMate和Vim等)。

步驟

1.編寫代碼編輯器樣式

屏幕快照 2018-09-21 下午8.21.06.png

2.引入ace.js

    <script type="text/javascript" src="./src-noconflict/ace.js"></script>
    <script type="text/javascript" src="./src-noconflict/ext-language_tools.js"></script>

**3.調用ace api實現代碼編輯功能

<script type="text/javascript">
    (function() {
        var editor1 = ace.edit("editor1", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/html",
            wrap: true,
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var editor2 = ace.edit("editor2", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/css",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var editor3 = ace.edit("editor3", {
            theme: "ace/theme/monokai",
            mode: "ace/mode/javascript",
            autoScrollEditorIntoView: true,
            enableBasicAutocompletion: true,
            enableSnippets: true,
            enableLiveAutocompletion: true
        });
        var submit = document.querySelector('#submit');
        submit.addEventListener('click', function() {
            var htmlValue = editor1.getValue();
            var cssValue = editor2.getValue();
            var jsValue = editor3.getValue();
            var htmlStr = '<!DOCTYPE html>' +
                '<html>' +
                '<head>' +
                '<meta charset="utf-8" />' +
                '<title>代碼測試</title>' +
                '<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>' +
                '<meta name="format-detection" content="telephone=no" />' +
                '<meta name="apple-mobile-web-app-status-bar-style" content="black" />' +
                '<meta name="apple-mobile-web-app-capable" content="yes" />' +
                '<meta http-equiv="X-UA-Compatible" content="chrome=1,IE=edge"/>' +
                '<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0"/>' +
                '<style type="text/css">' +
                cssValue +
                '</style>' +
                '<script type="text/javascript" src="https://cdn.bootcss.com/vConsole/3.2.0/vconsole.min.js">' +
                '</' +
                'script>' +
                '<script type="text/javascript">' +
                'new window.VConsole();' +
                '</' +
                'script>' +
                '</head>' +
                '<body>' +
                htmlValue +
                '<script type="text/javascript">' +
                jsValue +
                '</' +
                'script>' +
                '</body>' +
                '</html>';
            document.getElementById('preview').srcdoc = htmlStr;
        })
    })()

**4.將寫好的代碼放入iframe中運行

document.getElementById('preview').srcdoc = htmlStr;

源碼

效果見我的博客https://www.sunnyshining.xyz/lab/

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容