【Summernote v0.8.8】画像にリンクをつける | 株式会社エンタースクウェア

WYSIWYGエディタのSummenoteで画像にリンクをつけたり、外したりできるようカスタマイズしました。

デフォルトで画像アップロードの際にリンクをつける機能はあるのですが、
ファインダーを別途つけており、カスタマイズする必要がありました。

summernote.jsを直接編集しています。カスタマイズは慎重に。自己責任でお願いします。

今回は、アップロードした画像をクリックした時に、センタリングなどのボタンと合わせて「リンク」と「リンクを外す」アイコンを追加したいと思います。

環境

summernote　v0.8.8。
bootstrap　v4.0.0

Summernoteで画像にリンクさせる簡単な流れ

ボタンを作る流れ

uiオブジェクトにリンクボタンとリンク解除ボタンを追加
画像をクリックした時に表示されるポップオーバーに作ったボタンを追加
ポップオーバーの動作を定義した変数を作る
その変数をSummernoteのモジュールに追加

画像にリンクをつける流れ

リンクボタンをクリックした時のダイアログの変数を作る
それをSummernoteのモジュールに追加
画像リンク処理、リンク解除処理をEditorクラスに追加
ボタンと処理を紐付け

「リンク」ボタンを追加する

ボタンを作成

uiオブジェクトにに新しいボタンを定義します。

var ui = {
    editor: editor,

　〜〜〜〜〜〜〜〜〜〜〜

  $.extend($.summernote.lang, {
    'en-US': {
      　〜〜〜〜〜〜〜〜〜〜〜
      image: {
        〜〜〜〜〜〜〜〜〜〜〜
        maximumFileSizeError: 'Maximum file size exceeded.',
        //ここにリンクボタンを追加します-----
        //新たにinsertLinkというボタンを作って、リンクのアイコンを使います
        insertLink: 'Link Image',
        //unlinkというボタンを作って、アンリンクのアイコンを使います。
        unlink: 'Unlink',
　　　　　//ここにリンクボタンを追加します-----
        url: 'Image URL',
        remove: 'Remove Image'
      },

Summernoteのポップオーバーに追加

ポップオーバーはSummernoteにもともと付いている機能です。

uiオブジェクトで新しく作成したボタンを、そのポップオーバーで表示するように追加します。

$.summernote = $.extend($.summernote, {
    version: '0.8.8',
    ui: ui,
    dom: dom,
　　　　〜〜〜〜〜

      // popover
      popover: {
        image: [
          ['imagesize', ['imageSize100', 'imageSize50', 'imageSize25']],
          ['float', ['floatLeft', 'floatRight', 'floatNone']],
　　　　　　//作ったボタンを追加--------
          ['image', ['insertLink','unlink' ]],
          //作ったボタンを追加--------
          ['remove', ['removeMedia']]
        ],
        〜〜〜〜〜

ポップオーバーの処理をする変数を作成

ポップオーバーでの振る舞いを処理する変数を作成します。

var ImagePopover = function (context) {
    var self = this;
    var ui = $.summernote.ui;

    var $editable = context.layoutInfo.editable;
    var editable = $editable[0];
    var options = context.options;

    this.events = {
      'summernote.disable': function () {
        self.hide();
      }
    };

    this.shouldInitialize = function () {
      return !list.isEmpty(options.popover.image);
    };

    this.initialize = function () {
      this.$popover = ui.popover({
        className: 'note-image-popover'
      }).render().appendTo('body');
      var $content = this.$popover.find('.popover-content,.note-popover-content');

      context.invoke('buttons.build', $content, options.popover.image);
    };

    this.destroy = function () {
      this.$popover.remove();
    };

    this.update = function (target) {
      if (dom.isImg(target)) {
        var pos = dom.posFromPlaceholder(target);
        var posEditor = dom.posFromPlaceholder(editable);

        this.$popover.css({
          display: 'block',
          left: pos.left,
          top: Math.min(pos.top, posEditor.top)
        });
      } else {
        this.hide();
      }
    };

    this.hide = function () {
      this.$popover.hide();
    };
  };

それをsummernoteのモジュールに追加

$.summernote = $.extend($.summernote, {
    version: '0.8.8',
    ui: ui,
    dom: dom,

    plugins: {},

    options: {
      modules: {
       〜〜
        'linkDialog': LinkDialog,
        'linkPopover': LinkPopover,

　　　　　//作った変数を追加-------
        'imagePopover': ImagePopover,
        //作った変数を追加-------

        〜〜〜〜
      },

リンクボタンをクリックした時に、ダイアログを表示させる

次に、リンクボタンをクリックした時に、ダイアログを表示させてURLを入力できるようにします。

ダイアログを作成

ダイアログを処理する変数を作ります。ダイアログのhtml、振る舞い、全てここに入っています。

var ImageLinkDialog = function (context) {
    var self = this;
    var ui = $.summernote.ui;

    var $editor = context.layoutInfo.editor;
    var options = context.options;
    var lang = options.langInfo;

    this.initialize = function () {
      var $container = options.dialogsInBody ? $(document.body) : $editor;

      var body = '<div class="form-group note-form-group">' +
          '<label class="note-form-label">' + lang.link.url + '</label>' +
          '<input class="note-link-url form-control note-form-control ' +
          'note-input" type="text" value="http://" />' +
          '</div>' +
          (!options.disableLinkTarget ?
              $('<div/>').append(ui.checkbox({ id: 'sn-checkbox-open-in-new-window', text: lang.link.openInNewWindow, checked: true }).render())
                  .html()
              : '');
      var footer = '<button href="#" class="btn btn-primary note-btn note-btn-primary ' +
          'note-link-btn disabled" disabled>' + lang.link.insert + '</button>';

      this.$dialog = ui.dialog({
        className: 'note-image-link-dialog',
        title: lang.link.insert,
        fade: options.dialogsFade,
        body: body,
        footer: footer
      }).render().appendTo($container);
    };

    this.destroy = function () {
      ui.hideDialog(this.$dialog);
      this.$dialog.remove();
    };

    this.bindEnterKey = function ($input, $btn) {
      $input.on('keypress', function (event) {
        if (event.keyCode === key.code.ENTER) {
          $btn.trigger('click');
        }
      });
    };

    /**
     * toggle update button
     */
    this.toggleLinkBtn = function ($linkBtn, $linkText, $linkUrl) {
      ui.toggleBtn($linkBtn, $linkText.val() && $linkUrl.val());
    };
    /**
     * Show link dialog and set event handlers on dialog controls.
     *
     * @param {Object} linkInfo
     * @return {Promise}
     */
    /**
     * Show link dialog and set event handlers on dialog controls.
     *
     * @param {jQuery} $dialog
     * @param {Object} linkInfo
     * @return {Promise}
     */
    this.showImageLinkDialog = function (linkInfo) {
      return $.Deferred(function (deferred) {
        var $linkUrl = self.$dialog.find('.note-link-url'),
            $linkBtn = self.$dialog.find('.note-link-btn'),
            $openInNewWindow = self.$dialog.find('input[type=checkbox]');

        ui.onDialogShown(self.$dialog, function () {
          context.triggerEvent('dialog.shown');

          var handleLinkUrlUpdate = function () {
            ui.toggleBtn($linkBtn,  $linkUrl.val());
          };

          $linkUrl.on('input', handleLinkUrlUpdate).on('paste', function () {
            setTimeout(handleLinkUrlUpdate, 0);
          }).val(linkInfo.url).trigger('focus');

          ui.toggleBtn($linkBtn,  $linkUrl.val());
          self.bindEnterKey($linkUrl, $linkBtn);

          var isChecked = linkInfo.isNewWindow !== undefined ?
              linkInfo.isNewWindow : context.options.linkTargetBlank;

          $openInNewWindow.prop('checked', isChecked);

          $linkBtn.one('click', function (event) {
            event.preventDefault();

            deferred.resolve({
              range: linkInfo.range,
              url: $linkUrl.val(),
              isNewWindow: $openInNewWindow.is(':checked')
            });
            ui.hideDialog(self.$dialog);
          });
        });

        ui.onDialogHidden(self.$dialog, function () {
          // detach events
          $linkUrl.off('input paste keypress');
          $linkBtn.off('click');

          if (deferred.state() === 'pending') {
            deferred.reject();
          }
        });

        ui.showDialog(self.$dialog);

      }).promise();
    };

    /**
     * @param {Object} layoutInfo
     */
    this.show = function () {
      var linkInfo = context.invoke('editor.getLinkInfo');
      context.invoke('editor.saveRange');
      this.showImageLinkDialog(linkInfo).then(function (linkInfo) {
        context.invoke('editor.restoreRange');
        context.invoke('editor.createImageLink', linkInfo);
      }).fail(function () {
        context.invoke('editor.restoreRange');
      });
    };
    context.memo('help.linkDialog.show', options.langInfo.help['linkDialog.show']);
  };

2020/1/1追記リンク情報取得を修正

リンクを編集する際に、カーソルが画像の前後にないと、リンク情報（hrefなど）が取得できていませんでした。

そこで、リンク情報取得する関数を追加します。

 var Editor = function (context) {

   〜〜〜〜〜〜〜〜〜〜〜
   //画像をクリックした際に、画像に貼ってあるリンク情報を取得する
   /**
     * returns Link link info
     *
     * @return {Object}
     * @return {WrappedRange} return.range
     * @return {String} return.text
     * @return {Boolean} [return.isNewWindow=true]
     * @return {String} [return.url=""]
     */
    this.getImgLinkInfo = function () {
      var $handle = context.layoutInfo.editingArea,
          target = $handle.find('.note-control-selection').data('target'),
          $target = $(target),
          $target_anchor = $target.parent('a');

      var startRange = range.createFromNodeBefore($target.get(0));
      var startPoint = startRange.getStartPoint();
      var endRange = range.createFromNodeAfter($target.get(0));
      var endPoint = endRange.getEndPoint();

      var rng = range.create(
          startPoint.node,
          startPoint.offset,
          endPoint.node,
          endPoint.offset
      ).select();

      var linkInfo = {
        range: rng,
        url: $target_anchor.length ? $target_anchor.attr('href') : ''
      };

      // Define isNewWindow when anchor exists.
      if ($target_anchor.length) {
        linkInfo.isNewWindow = $target_anchor.attr('target') === '_blank';
      }

      return linkInfo;
    };
   〜〜〜〜〜〜〜〜〜〜〜
}

var ImageLinkDialogのshow()でリンク情報を取得しているので、そこを差し替えます。

this.showImageLinkDialog = function (linkInfo) {
   〜〜〜〜〜〜〜〜〜〜〜
     this.show = function () {
      //ここのgetLinkInfoを作成したgetImgLinkInfoへ差し替え
      var linkInfo = context.invoke('editor.getLinkInfo');
      //↓↓↓↓↓↓↓これに差し替え↓↓↓↓↓↓↓↓
      var linkInfo = context.invoke('editor.getImgLinkInfo');
      //↑↑↑↑↑↑↑/これに差し替え↑↑↑↑↑↑↑↑
      context.invoke('editor.saveRange');
      this.showImageLinkDialog(linkInfo).then(function (linkInfo) {
        context.invoke('editor.restoreRange');
        context.invoke('editor.createImageLink', linkInfo);
      }).fail(function () {
        context.invoke('editor.restoreRange');
      });
    };
   〜〜〜〜〜〜〜〜〜〜〜
}

summernoteのモジュールに追加

$.summernote = $.extend($.summernote, {
    version: '0.8.8',
    ui: ui,
    dom: dom,

    plugins: {},

    options: {
      modules: {
       〜〜
        'linkDialog': LinkDialog,
        'linkPopover': LinkPopover,
        'imagePopover': ImagePopover,
　　　　　//作った変数を追加-------
　　　　　'imageLinkDialog':ImageLinkDialog,
        //作った変数を追加-------
        〜〜〜〜
      },

これでリンクボタンをクリックした時に、URLを入れるダイアログが表示されるようになりました。

画像にリンクを貼る処理を行う

Editorクラスの中に、画像にリンクを貼る処理を入れます。

これらの処理は、前項で作成したダイアログ（var ImageLinkDialog）の処理の中で発火させます。

var ImageLinkDialogの中にある、context.invoke(‘editor.createImageLink’, linkInfo);がそれです。

 /**
   * @class Editor
   */
  var Editor = function (context) {
    var self = this;

　　〜〜〜〜〜〜〜〜〜〜〜
　　//ダイアログでsubmitを押した後の処理を入れます。
　　//ここで、画像にリンクを張っています。
　　this.createImageLink = this.wrapCommand(function (linkInfo) {
      var linkUrl = linkInfo.url;
      var isNewWindow = linkInfo.isNewWindow;
      var rng = linkInfo.range || this.createRange();
      var $handle = context.layoutInfo.editingArea,
          target = $handle.find('.note-control-selection').data('target'),
          $target = $(target);

      if (typeof linkUrl === 'string') {
        linkUrl = linkUrl.trim();
      }

      if (options.onCreateLink) {
        linkUrl = options.onCreateLink(linkUrl);
      } else {
        // if url doesn't match an URL schema, set http:// as default
        linkUrl = /^[A-Za-z][A-Za-z0-9+-.]*\:[\/\/]?/.test(linkUrl) ?
            linkUrl : 'http://' + linkUrl;
      }
    
      //2020/1/1修正
      rng = rng.deleteContents();
      var anchors = [];
      var anchor = rng.insertNode($('<A>' + $target.prop('outerHTML')+ '</A>')[0]);
      anchors.push(anchor);

      $.each(anchors, function (idx, anchor) {
        $(anchor).attr('href', linkUrl);
        if (isNewWindow) {
          $(anchor).attr('target', '_blank');
        } else {
          $(anchor).removeAttr('target');
        }
      });
　　　//2020/1/1修正

      var startRange = range.createFromNodeBefore(list.head(anchors));
      var startPoint = startRange.getStartPoint();
      var endRange = range.createFromNodeAfter(list.last(anchors));
      var endPoint = endRange.getEndPoint();

      range.create(
          startPoint.node,
          startPoint.offset,
          endPoint.node,
          endPoint.offset
      ).select();
    });
　　〜〜〜〜〜〜〜〜〜〜〜

2020/1/1
※Nodeを追加する、リンクをつける箇所を修正しています。

リンク解除の処理

同じくEditorクラスの中にリンク解除の処理も入れます。

this.unlinkImageLink = function () {
      var rng = this.createRange();
      if (rng.isOnAnchor()) {
        var anchor = dom.ancestor(rng.sc, dom.isAnchor);
        rng = range.createFromNode(anchor);
        rng.select();

        beforeCommand();
        document.execCommand('unlink');
        afterCommand();
      }
    };

最後に、ボタンと動作を紐付けます。

this.addToolbarButtons = function () {

　　〜〜〜〜〜〜〜〜〜〜〜
　　//ポップオーバーのボタンを追加-----
　　this.addLinkPopoverButtons = function () {
      //リンクをつけるリンクボタンとその処理
      context.memo('button.insertLink', function () {
        return ui.button({
          contents: ui.icon(options.icons.link),
          tooltip: lang.link.edit,
          click: context.createInvokeHandler('imageLinkDialog.show')
        }).render();
      });
     //リンクを解除するアイコンボタンとその処理
　    context.memo('button.unlink', function () {
        return ui.button({
          contents: ui.icon(options.icons.unlink),
          tooltip: lang.link.unlink,
          click: context.createInvokeHandler('editor.unlinkImageLink')
        }).render();
      });
    };
　〜〜〜〜〜〜〜〜〜〜〜

これで、画像をクリックした時にリンクボタンが表示されて、そこからリンクをつける事ができます。