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 的字体系列是等宽字体。

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

Wrong cursor position of Ace Editor inside a dialog

html

javascript

css

dialog

ace-editor