2

我正在使用来自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("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
  };

}

]);

注意：在使用 ment.io 和 tinymce 时会观察到此行为

无法解决这个问题..

请指教...

4

2 回答 2

1

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

(1) 我正在使用带有 angularJS 的 MEAN 框架。并尝试使用 Tiny MCE 实现 Ment.io

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

回答或观察，在 codepen 实现中，如果您看到它们包含 tinymce 但从未将其与 div 一起使用。

Codepen 实现

他们还实现了一个带有监听器的指令，该指令与 ment.io 一起应用，称为“contenteditable”，这有助于正确替换值..

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

在 jsfiddle 上使用 tinymce 的示例

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

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

设置：设置选项

这是据我所知。我需要在一个项目中实现这一点，所以欢迎任何讨论、提示和指针。

于 2019-12-20T07:35:10.380 回答
1

在此处输入图像描述

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

于 2019-12-30T09:32:55.710 回答