ment.io - 模型未在鼠标上更新

Question

我正在使用来自 http://jeff-collins.github.io/ment.io/#/examples 的 ment.io 插件和 tinyMce 来支持编辑器。

一切都很好，直到我发现当我使用鼠标 select 菜单项时，模型不会自动更新，尽管在编辑器中它可以正确显示 selected 文本。

进一步调查，发现当我们用鼠标 selection 后在编辑器中执行一些关键事件时，模型正在更新。

当 select 使用箭头键和 select 使用 enter 或 tab 时，模型正在正确更新。这可能是因为，这是编辑在前面的案例中寻找的关键事件。

这里是 link 的 fiddle 屏幕 https://jsfiddle.net/vikasnale/2p6xcssf/5/

<div ng-app="App">

<script type="text/ng-template" id="/tag-mentions.tpl">
  <ul class="list-group user-search">
    <li mentio-menu-item="Tag" ng-repeat="Tag in items" class="list-group-item">
      <span class="text-primary" ng-bind-html="Tag.name | mentioHighlight:typedTerm:'menu-highlighted' | unsafe"></span>
    </li>
  </ul>
</script>

<textarea mentio-id="'tinyMceTextArea'" ui-tinymce="tinyMceOptions" mentio mentio-typed-text="typedTerm" mentio-require-leading-space="true" ng-model="Content" mentio-iframe-element="iframeElement"></textarea>


<mentio-menu id="hastmenu" mentio-for="'tinyMceTextArea'" mentio-trigger-char="'#'" mentio-items="tags" mentio-template-url="/tag-mentions.tpl" mentio-search="searchTags(term)" mentio-select="getTagTextRaw(item)"></mentio-menu>

<br/>
<p>Output Model: {{Content}}</p>

angular.module('App', ['mentio', 'ui.tinymce'])

.controller("Ctrl", ['$scope', 'mentioUtil', 功能（$scope，mentioUtil）{

  $scope.getTagTextRaw = function(item) {
    return '<i class="mention-tag-text" style="color:#a52a2a;">' + item.name + '</i>';
  };

  $scope.searchTags = function(term) {
    var tagsList = [];
    angular.forEach($scope.allTagList, function(item) {
      if (item.id.toUpperCase().indexOf(term.toUpperCase()) >= 0) {
        if (tagsList.length <= 5) {
          tagsList.push(item);
        }
      }
    });

    $scope.tags = tagsList;
    return tagsList;
  };

  $scope.allTagList = [{
    "id": "ctp",
    "name": "#ctp"
  }, {
    "id": "earningRelease",
    "name": "#earningRelease"
  }, {
    "id": "presssrelease",
    "name": "#presssrelease"
  }, {
    "id": "inversor-conference",
    "name": "#inversor-conference"
  }, {
    "id": "live release",
    "name": "#IACLive"
  }, {
    "id": "reval",
    "name": "#reval"
  }, {
    "id": "margin",
    "name": "#margin"
  }, {
    "id": "phonecall",
    "name": "#phonecall"
  }, {
    "id": "Q4",
    "name": "#Q4"
  }];

  $scope.tinyMceOptions = {
    init_instance_callback: function(editor) {
      $scope.iframeElement = editor.iframeElement;
    },
    resize: false,
    width: '100%',
    height: 150,
    plugins: 'print textcolor',
    toolbar: "bold italic underline strikethrough| undo redo",
    toolbar_items_size: 'small',
    menubar: false,
    statusbar: false
  };

}

]);

Note : This behavior is observed while using ment.io with tinymce

无法解决这个问题..

请指教...

Answer 1

我遇到了同样的问题，在搜索时遇到了这个 post。由于没有解决方案，我想我会深入挖掘。这是我的发现，如果您可以在此基础上添加以找到解决方案，那将会有很大帮助。

(1) 我在 angularJS 中使用 MEAN 框架。并尝试 implementMent.io 使用 Tiny MCE

(2) 问题：为什么它使用 codepen Ment.io 示例而不使用 jsfiddle 中的实现..

回答或观察, 在 codepen 实现中，如果您看到它们包含了 tinymce 但从未将其与 div.

一起使用

他们还实施了一个指令，该指令适用于 ment.io 的侦听器，称为 "contenteditable" 这有助于正确替换值..

在 Vikas Nale 的 Jsfiddle 示例中。文本区域包括 tinymce 编辑器。因此，一旦我们应用 Tinymce 编辑器，模型就会在回车键或鼠标单击时停止更新，必须按下 space 栏才能正确更新模型。

(3) 可能的原因 现在我想我还要添加 contenteditable 指令，它将处理事件。但似乎当我们应用tinymce编辑器时，提及菜单、文本区域等被放置在一个iframe元素中。因此事件无法正确传播。

我也尝试了 tinymce 的 Setup: 选项。但是一旦我们开始，Ment.io 的@菜单就停止工作了。

这是我能理解的。我需要在项目中实现它，因此欢迎任何讨论、提示和指点。

Answer 2

通过从 tinymce 的活动编辑器而不是分配给 ment.io 文本区域的数据模型获取数据，我解决了上述无法从指定数据模型获取最新文本的问题（参见附上屏幕截图）。

ment.io - 模型未在鼠标上更新

ment.io - model is not updating on mouse

mouse

angularjs

mention