Question

根据Ace Editor嵌入指南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的光标位置错误

1 个答案: