ment.io - модель не обновляется на мышке

Question

Я использую плагин ment.io из http://jeff-collins.github.io/ment.io/ с tinyMce для поддержки редактора.

Все было хорошо, пока я не обнаружил, что когда я выбираю пункт меню с помощью мыши, модель не обновляется автоматически, хотя в редакторе она правильно отображает выделенный текст.

Далее, во время исследования, мы обнаружили, что модель обновляется, когда мы делаем какое-то ключевое событие внутри редактора после выделения мышью

При выборе с помощью клавиши со стрелкой и при помощи ввода или вкладки модель обновляется должным образом Это может быть потому, что это ключевое событие, которое редактор ищет в предыдущем случае.

Вот ссылка на скрипку для 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.

не могу понять, как исправить это..

Пожалуйста посоветуй...

Answer 1

Я столкнулся с той же проблемой и при поиске наткнулся на этот пост. Поскольку решения не было, я подумал, что копаю глубже. Вот мои выводы. Если вы можете добавить что-то еще, чтобы найти решение, это будет большим подспорьем.

(1) Я использую среду MEAN с angularJS. И пытаюсь реализовать Ment.io с Tiny MCE

(2) Вопрос: почему он работает с примером кода Ment.io и не работает с реализацией в jsfiddle ..

Ответ или наблюдение: в реализации codepen, если вы видите, что они включили tinymce, но никогда не использовали его с div.

также они реализовали директиву со слушателями, которая применяется с ment.io, под названием "contenteditable", это помогает в правильной замене значений.

В примере Jsfiddle Викаса Нейла. Текстовая область включает редактор tinymce. Таким образом, как только мы применяем редактор Tinymce, модель перестает обновляться при нажатии клавиши ввода или щелчка мыши, необходимо нажать клавишу пробела, чтобы модель обновилась должным образом.

(3) вероятная причина. Теперь я решил добавить директиву contenteditable, которая позаботится о событиях. Но кажется, что когда мы применяем редактор tinymce, меню упоминания, текстовая область и т. Д. Помещаются в элемент iframe. Из-за чего события не распространяются правильно.

Я также попробовал вариант установки: tinymce. но как только мы начинаем, меню @ в Ment.io перестает работать.

это насколько я мог понять. Мне нужно реализовать это в проекте, поэтому любые обсуждения, подсказки, указатели приветствуются.

Answer 2

Вышеупомянутая проблема отсутствия актуального текста из назначенной модели данных была решена для меня путем получения данных из активного редактора tinymce вместо модели данных, назначенной текстовой области ment.io (см. Прикрепленный снимок экрана).