将焦点设置王牌编辑器王牌、编辑器、焦点

2023-09-13 04:24:43 作者:温馨式、告别

我使用的NG-网格。在NG-格我有一个按钮,几一起文本框。通过点击按钮,一是王牌编辑器要打开在那里我可以编辑/添加文本。但是,当我点击按钮,没有焦点(无光标闪烁)的编辑,我要对编辑器中手动点击获取焦点。以下是部分我的HTML和JS文件code

I am using ng-grid. In ng-grid I have few textbox along with a button. By clicking the button, one ace editor is going to open where I can edit/add the text. But when I am clicking the button, there is no focus(no cursor blink) on the editor, I have to manually click on the editor to get the focus. Here are portion of my html and js file code

HTML

<div class="modal fade" id="valueModal" role="dialog" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button id="mbx-procsr-properties-closeFile" type="button" class="close" data-dismiss="modal" aria-hidden="true">X</button>
                            <h4 class="modal-title">Edit Value</h4>
                        </div>
                        <div class="modal-body">
                            <div ui-ace="{onLoad : loadValueData,
                  theme : 'chaos',
                  useWrapMode : true,
                  showGutter: true,
                  mode: 'json'
                }">
                            </div>
                            <div class="modal-footer">
                                <button id="mbx-procsr-properties-close" type="button" class="btn btn-default" data-dismiss="modal" ng-click="close()">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

使用Javascript:

Javascript:

 $scope.loadValueData = function (_editor) {
 editor = _editor;
 _editor.getSession().setUseWorker(false);
 _editor.focus();
 };

我想重点/上王牌编辑光标闪烁

I want the focus/cursor blink on ace editor

我给你的代码片段code NG-电网gridOptionsForProcessor ​​

I am giving you the snippet code of ng-grid-gridOptionsForProcessor

<textarea  class="form-control"  ng-model="COL_FIELD" style="width:90%;height:45px" placeholder="required" />\n\
                                    <a ng-click="isModal(row)" data-toggle="modal" data-backdrop="static" data-keyboard="false" data-target="#valueModal"  class="right">\n\
                                    <i class="glyphicon glyphicon-new-window"></i>

\\ n \\

和isModal的含量为

and the content of isModal is

$scope.isModal = function (row) {
                rowObj = row;
                editor.setValue(row.getProperty('value').toString());

所以是有可能设置在isModal焦点

so is it possible to set the focus in isModal

推荐答案

所以,你所遇到的问题是,你想拥有的模式已被证实后的焦点发生。你需要把对焦(和gotoLine)在$超时模式已被证明了。该解决方案是有点哈克,因为我们只是假设模式和编辑将准备一点从点击isModal被触发后。

So the problem you are having is that you want to have the focus happen after the modal has been shown. You need to put the focus (and gotoLine) in a $timeout after the modal has been shown. This solution is kinda hacky since we are just assuming that the modal and editor will be ready a little after the isModal from the click is fired.

  // make sure you include the $timeout dependency

  var editor;
  $scope.loadValueData = function (_editor) {
    editor = _editor;
    editor.getSession().setUseWorker(false);
    editor.setReadOnly(true);
  };

  var enableAndFocusEditor = function() {
    if (editor) {
      editor.focus();
      var session = editor.getSession();
      //Get the number of lines
      var count = session.getLength();
      //Go to end of the last line
      editor.gotoLine(count, session.getLine(count-1).length);
      editor.setReadOnly(false);
    }
  };

  $scope.isModal = function (row) {
    $scope.rowObj = row;
    $timeout(enableAndFocusEditor,500);
    //editor.setValue(row.getProperty('value').toString());
  };

  $scope.close = function() {
    $scope.rowObj = null;
    editor && editor.setReadOnly(true);
  };

我得到了code为把着眼点从这个答案到底。

查看示例: http://plnkr.co/edit/KqgY32?p = preVIEW

我可以看到你正在使用的引导JavaScript才能打开和关闭模式,所以我认为你该用例的作品,虽然这在我看来是得到它做的哈克的方式一个答案。做正确的方法是使用角度的UI库引导才能有一个AngularJS控制器内使用一个更好的API - 在那里你会再有机会知道什么时候实际上是显示的模式。它可以挂接到引导的'shown.bs.modal'事件但你必须编写自己的指令。

I can see that you are using the Bootstrap Javascript in order to open and close the modal so I you an answer that works for that use case, although this is in my opinion a hacky way of getting it done. The right way to do it would be to use the angular-ui bootstrap library in order to have a better api for use within an AngularJS controller -- where you will then have access to know when the modal was actually shown. It is possible to hook into Bootstrap's 'shown.bs.modal' event but for that you would have to write your own directive.