对话框内 Ace Editor 的光标位置错误

Question

根据 Ace 编辑器嵌入指南 Ace Embedding 我将 Ace 添加到我的网站。

您也可以在这里查看 Ace Editor 最简单的工作示例（不是我的）Ace Editor jsfiddle

但我面临以下问题：

我想在对话框中添加编辑器的 div，但在键入时遇到编辑器光标在对话框中位置的问题。

光标总是显示得比它应该在的位置更正确。

有什么办法可以解决的吗？

请记住，我的网站中 Ace 编辑器的光标位置在将其添加到对话框之前效果很好。

这是我的编辑器和对话框的确切代码：

HTML

    <div id="dialog-message" title="Script Editor">
        <div id="editor" style="display:none"></div>
    </div>  

    <!--  Ace Dependencies: -->
    <script src="./ace/ace.js" type="text/javascript" charset="utf-8"></script>
    <script>
        var editor = ace.edit("editor");
        editor.setTheme("ace/theme/monokai");
        editor.getSession().setMode("ace/mode/javascript");
    </script>

CSS

        <style type="text/css" media="screen">
        #editor { 
            position: absolute;
            top: 0;
            right: 0;
            bottom: 0;
            left: 0;
        }           

    </style>

Javascript

                $("#dialog-message").dialog({
                width: 800,
                height:600,
                buttons: {
                    "Download Workitem Code": function() {
                        /*Create the content of file workitem.html*/
                        var currentEditorValue = editor.getValue();

                        /*HTTP request to get the code of sample_workitem.html*/
                        var url = 'http://patrasrv.motivian.com:8080/BPM_PRODUCT/docroot/designer_standalone/bpm_designer/sample_workitem.html';

                        $(function() {
                          $.get(url, function(data) {

                            var htmlCode = data.replace("[[[[[AAAAA]]]]]", editor.getValue());

                            /*Download workitem.html*/
                            var filename = 'workitem.html';
                            var contentType = 'application/octet-stream';
                            var a = document.createElement('a');
                            var blob = new Blob([htmlCode], {
                              'type': contentType
                            });
                            a.href = window.URL.createObjectURL(blob);
                            a.download = filename;
                            a.click();          

                          });
                        });


                    },
                    "Save Script": function() {
                        $(this).dialog("close");
                        cell.set('wi_script_on_page', $("#editor").text());
                        cell.set('wi_script_editor', false);
                        var testing = editor.getValue();
                        cell.set('wi_script_on_page', testing);
                    },
                    "Cancel": function() {
                        $(this).dialog("close");
                    }
                },
                open: function(){
                    $('#editor').show();
                    $('#editor').focus();
                },
                close: function() {
                        //When closing form by pressing 'X'
                        $('#editor').hide();
                        cell.set('wi_script_editor', false);
                }
            });

忽略 3 个对话框按钮的功能。与问题本身无关。

Answer 1

看起来您有一些 css 规则，当您将其放入对话框时会更改 ace 的字体系列。 您需要确保设置为 ace 的字体系列是等宽字体。