18

私は優れたMedium Editorを試してきました。私が抱えていた問題は、「仕事」へのリンクを取得できないように見えることです。

簡単に言うと、問題を示すために使用する HTML/JS を次に示します。

HTML:

<html>
<head>
  <script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
  <link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/themes/beagle.min.css" type="text/css">
</head>
<body>
  <div class='editable'>
    Hello world.  <a href="http://www.google.com">link</a>
  </div>
</body>
</html>

Javascript:

var editor = new MediumEditor('.editable');

このフィドルは問題を示しています (上記のコードを使用)。

  • リンクにカーソルを合わせると、ポップアップが表示されます。
  • リンクをクリックしても何も起こりません。
  • ポップアップをクリックすると、リンクを編集できるフォームが表示されます。

リンクをクリックすると、リンクhrefがターゲットにしている場所に移動できるように思えます。リンクを使用する唯一の方法は、右クリックして新しいタブまたは新しいウィンドウで開くことです。これはユーザーに求めたくありません。

構成に単純なものが欠けているように感じます (アンカー プレビュー オプションまたはアンカー フォーム オプション)。残念ながら、私はそれを見ていません。

私の実際のアプリケーションでは、を使用していませんjQueryが、使用していangularjsます。厳密にミディアム エディターの回答が存在しない場合は、基本的な JS または angularjs が提供するものを使用するようにフォールバックできます。

4

4 に答える 4

3

そのため、ミディアム エディターは、contenteditable要素に対する組み込みのブラウザー サポートの上に構築されています。medium-editor をインスタンス化すると、指定したcontenteditable=true要素に属性が追加されます。

デフォルトでは、テキストが編集可能になったため (contenteditable属性によりブラウザは WYSIWYG テキストとして扱われます)、ブラウザはリンクをクリックして移動することをサポートしなくなりました。そのため、メディア エディタはこれらのリンク クリックの発生をブロックしていません。ブラウザは、テキストを編集可能にする一環として本質的にブロックしています。

medium-editor には、リンクを操作するための拡張機能が組み込まれています。

  • アンカー延長
    • リンクの追加/削除が可能
  • アンカープレビュー拡張
    • リンクにカーソルを合わせるとツールチップが表示されます
    • ツールチップをクリックすると、アンカー拡張機能を介してリンクの href を編集できます

編集者の根底にある目標は、ここでの誤解だと思います。エディターではテキストを編集できます。リンクを追加/削除/更新するには、自動的に移動せずにクリックできる必要があります。これは、私が「編集」モードと考えているものです。

ただし、編集の結果として生成された html は有効な html であり、その html を取得して属性を持たない要素内に配置するとcontenteditable=true、すべてが期待どおりに機能します。私はこれを「公開モード」と考えています

word や google docs などのエディターを見てみると、ドキュメントを編集するときに、リンクをクリックしたときにリンクが離れてしまうだけでなく、別の方法で実際に移動することを選択する必要があるという、同様の種類の動作が見られます。リンクをクリックした後のアクション。ただし、ドキュメントの「公開」バージョンでは、リンクをクリックすると、実際にはブラウザー ウィンドウが開き、そこに移動します。

これは、既存のアンカー プレビュー拡張機能の拡張として、良い提案になると思います。おそらく、リンクにカーソルを合わせたときに表示されるツールチップには、複数のオプションが含まれている可能性があります (リンクの編集 | リンクの削除 | URL に移動)。

tldr;

組み込みの WYSIWYG サポート ( ) を介してブラウザでテキストを「編集」する場合、リンクをクリックしてもナビゲートできませんcontenteditable。「編集」モードでない場合、リンクは期待どおりに機能します。これは、中規模エディターのアンカー プレビュー拡張機能の優れた機能強化になる可能性があります。

于 2015-12-31T19:31:29.030 に答える
0

質問をしたときに本当に欲しかったのは、「編集」モードのときの Google Docs と同様の動作でした ( Nate Mielnik の説明による)。私はメディア エディター トラッカーに関するイシューを開いたところ、彼らはそれをコア メディア エディターの一部として実装しないことを決定しましたが、誰かがその機能を拡張機能として追加してくれることを喜んでいると述べました。

そこで、提案どおりにその機能を拡張機能として実装することにしました。これは、 MediumTools 1の一部として見つかります。プロジェクトはまだ非常に初期の段階にあります (たとえば、スタイリングをより良くしたり、より良い縮小方法を使用したりするなどのことは何もしていませんが、そのためのプル リクエストは喜んで受け付けます)。

コードの中身は次のようになります。

var ClassName = {
  INNER: 'medium-editor-toolbar-anchor-preview-inner',
  INNER_CHANGE: 'medium-editor-toolbar-anchor-preview-inner-change',
  INNER_REMOVE: 'medium-editor-toolbar-anchor-preview-inner-remove'
}

var AnchorPreview = MediumEditor.extensions.anchorPreview;
GdocMediumAnchorPreview = MediumEditor.Extension.extend.call(
  AnchorPreview, {

    /** @override */
    getTemplate: function () {
      return '<div class="medium-editor-toolbar-anchor-preview">' +
        '  <a class="' + ClassName.INNER + '"></a>' +
        '  -' +
        '  <a class="' + ClassName.INNER_CHANGE + '">Change</a>' +
        '  |' +
        '  <a class="' + ClassName.INNER_REMOVE + '">Remove</a>' +
        '</div>';
    },

    /** @override */
    createPreview: function () {
      var el = this.document.createElement('div');

      el.id = 'medium-editor-anchor-preview-' + this.getEditorId();
      el.className = 'medium-editor-anchor-preview';
      el.innerHTML = this.getTemplate();

      var targetBlank =
          this.getEditorOption('targetBlank') ||
          this.getEditorOption('gdocAnchorTargetBlank');
      if (targetBlank) {
        el.querySelector('.' + ClassName.INNER).target = '_blank';
      }

      var changeEl = el.querySelector('.' + ClassName.INNER_CHANGE);
      this.on(changeEl, 'click', this.handleClick.bind(this));

      var unlinkEl = el.querySelector('.' + ClassName.INNER_REMOVE);
      this.on(unlinkEl, 'click', this.handleUnlink.bind(this));

      return el;
    },

    /** Unlink the currently active anchor. */
    handleUnlink: function() {
      var activeAnchor = this.activeAnchor;
      if (activeAnchor) {
        this.activeAnchor.outerHTML = this.activeAnchor.innerHTML;
        this.hidePreview();
      }
    }
  });

AnchorPreview説明として、元の/組み込みの拡張機能を「サブクラス化」するために、メディアのプロトタイプ継承のフレーバーを使用するだけです。メソッドをオーバーライドしてgetTemplate、追加のリンクをマークアップに追加します。次に、 の基本実装から多くを借用しましたがgetPreview、必要に応じて新しいアクションを各リンクにバインドしました。最後に、「削除」をクリックしたときにリンクを「リンク解除」するアクションが必要だったので、そのためのメソッドを追加しました。unlink メソッドはおそらく contenteditable マジックを使用して (ブラウザーの取り消しスタックの一部であることを確認するために) もう少しうまく行うことができますが、私はそれを理解するのに時間を費やしませんでした (ただし、それは良いプルリクエストになります)興味のある人:-)。

1現在はその部分だけですが、いずれ変更されることを願っています。. .

于 2016-01-29T01:45:18.233 に答える
0

コメントで @Valijon からのいくつかのアイデアに取り組み、次のコードを使用して機能させることができました。

var iElement = angular.element(mediumEditorElement);

iElement.on('click', function(event) {
  if (
      event.target && event.target.tagName == 'A' &&
      event.target.href && !event.defaultPrevented) {
    $window.open(event.target.href, '_blank');
  }
});

重要なのは、どうやらエディターがイベントを祖先要素に伝達できるようにすることだと思うので、最上位のエディター要素のクリックをリッスンすることができました。

ここに$windowAngularのサービスがあります - を使用し$windowていない場合は、トリックを実行し、以前はイベントリスナーレジストリを簡単にしましたが、昔ながらの方法で（または選択したJSフレームワークを使用して）実行できます。angularjswindowangular.element

于 2015-12-29T20:44:19.897 に答える