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', 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 を使用しているときに観察されます。

これの修正方法がわかりません..

ご意見をお聞かせください...

4

2 に答える 2

1

私は同じ問題に直面し、検索でこの投稿に出くわしました。解決策がなかったので、もっと深く掘り下げようと思いました。これが私の発見です。これに加えて解決策を見つけることができれば、非常に役立ちます。

(1) angularJS で MEAN フレームワークを使用しています。そしてTiny MCEでMent.ioを実装しようとしています

(2)質問: codepen Ment.io の例で動作し、jsfiddle の実装では動作しないのはなぜですか..

回答または観察、コードペンの実装では、tinymce が含まれているが、div で使用したことがない場合。

コードペンの実装

また、「contenteditable」と呼ばれる ment.io に適用されるリスナーを含むディレクティブを実装しました。これは、値を適切に置き換えるのに役立ちます..

Vikas Nale による Jsfiddle の例。テキスト領域には、tinymce エディターが含まれています。そのため、Tinymce エディタを適用するとすぐに、Enter キーまたはマウス クリックでモデルの更新が停止します。モデルを適切に更新するには、スペース バーを押す必要があります。

tinymce を使用した jsfiddle の例

(3)考えられる理由contenteditable ディレクティブも追加すると、イベントを処理できるようになると思いました。しかし、tinymce エディタを適用すると、メンション メニュー、テキスト エリアなどが iframe 要素に配置されるようです。そのため、イベントが正しく伝播されていません。

tinymce の Setup: オプションも試してみました。しかし、開始するとすぐに、Ment.io の @ メニューが機能しなくなります。

設定:設定オプション

これは私が理解できる限りです。これをプロジェクトに実装する必要があるため、ディスカッション、ヒント、ポインターは大歓迎です。

于 2019-12-20T07:35:10.380 に答える