Question

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

一切顺利，直到我发现当我使用鼠标选择菜单项时，模型不会自动更新，但在编辑器中它正确显示所选文本。

进一步调查时，发现当用鼠标选择后在编辑器内部做一些关键事件时模型正在更新。

使用箭头键选择并使用enter或tab选择时，模型正在正确更新。这可能是因为，这是编辑在早期案例中寻求的关键事件。

以下是scrnario 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（＆＃34; Ctrl＆＃34;，[＆＃39; $ scope＆＃39;，＆＃39; mentioUtil＆＃39;， function（$ 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
  };

}

]）;

注意：使用带有tinymce的ment.io时会出现此行为

无法找到解决此问题的方法..

请建议......

Answer 1

我遇到了同样的问题，在搜索中发现了该帖子。既然没有解决方案，我想我会更深入。这是我的发现，如果您可以在此基础上添加解决方案，那将有很大帮助。

（1）我正在将MEAN框架与angularJS一起使用。并尝试使用Tiny MCE实施Ment.io

（2）问题：为什么它与Codepen Ment.io示例一起使用，而不与jsfiddle中的实现一起使用..

答案或观察，在codepen实施中，如果您看到它们包含了tinymce，但从未将其用于div。

Codepen implementation

他们还用ment.io实施了一个与侦听器一起使用的指令，称为“ contenteditable”，这有助于正确替换值。

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

Example on jsfiddle with tinymce

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

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

set:up option

据我所知。我需要在项目中实现此功能，因此欢迎任何讨论，提示和指针。

Answer 2

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

ment.io - 模型没有更新鼠标

2 个答案: