Tips for effectively utilizing hyperlinks in Medium Editor

Question

Tips for effectively utilizing hyperlinks in Medium Editor

Recently, I've been exploring the amazing capabilities of a tool called Medium Editor. However, I've come across an issue where I can't seem to get links to function properly.

To illustrate the problem simply, here is some HTML/JS code that showcases the issue:

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');

This example highlights the issue mentioned above (using the provided code).

When hovering over the link, a popup appears.
Clicking on the link does not redirect you to the specified URL.
By clicking on the popup, a form emerges allowing you to modify the link.

It seems logical that clicking on the link should direct the user to the target location specified by its href. Having users right-click and open in a new tab/window is not ideal for usability.

I have a feeling that there might be a simple configuration setting that I am missing, perhaps related to the Anchor Preview Options or the Anchor Form Options. Unfortunately, I haven't been able to identify it yet.

^{In my application, I am not utilizing jQuery, but I am incorporating angularjs. If there isn't a direct solution within Medium Editor, I am open to using vanilla JS or leveraging angularjs features as alternatives.}

javascript medium-editor

Answer 1

Answer №1

I have discovered a new way to attach events.

Check out this complete list of events https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md

Attempt modifying your code like this

var editor = new MediumEditor('.editable')
    .subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})

https://jsfiddle.net/fhr18gm1/

Answer 2

I have discovered a new way to attach events.

Check out this complete list of events https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md

Attempt modifying your code like this

var editor = new MediumEditor('.editable')
    .subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})

https://jsfiddle.net/fhr18gm1/

Answer 3

Answer №2

medium-editor utilizes the intrinsic browser functionality for contenteditable elements as its foundation. By initializing medium-editor, it automatically assigns the contenteditable=true attribute to the specified element(s).

Due to this attribute, which transforms the text into an editable format resembling WYSIWYG text, standard hyperlink navigation within the text is no longer supported by the browser. This behavior is not imposed by medium-editor but rather occurs naturally when making the text editable.

medium-editor comes with predefined extensions for managing links:

anchor extension
- enables addition/removal of links
anchor-preview extension
- displays a tooltip upon link hover
- allows link href editing through anchor extension on clicking the tooltip

The primary objective of the editor seems to be misconstrued here. The purpose of the editor is to facilitate text editing, and in order to modify links, users must access them without triggering immediate navigation - essentially entering 'edit' mode.

However, the resulting HTML post-editing remains valid, and transferring it to an element lacking the contenteditable=true attribute ensures normal functioning - denoting 'publish' mode.

This concept aligns with platforms like Microsoft Word or Google Docs where links require intentional actions for navigation while editing, contrasting with automatic redirection once published.

An actionable suggestion can be enhancing the existing anchor-preview extension with additional features in its hovering tooltip (e.g., Edit Link | Remove Link | Navigate to URL).

tldr;

Clickable links are disabled during text editing using browser's inherent WYSIWYG support (contenteditable). Post-editing, links will function normally outside 'edit' mode. Enhancements to medium-editor's anchor-preview extension could be beneficial.

Answer 4

medium-editor utilizes the intrinsic browser functionality for contenteditable elements as its foundation. By initializing medium-editor, it automatically assigns the contenteditable=true attribute to the specified element(s).

Due to this attribute, which transforms the text into an editable format resembling WYSIWYG text, standard hyperlink navigation within the text is no longer supported by the browser. This behavior is not imposed by medium-editor but rather occurs naturally when making the text editable.

medium-editor comes with predefined extensions for managing links:

anchor extension
- enables addition/removal of links
anchor-preview extension
- displays a tooltip upon link hover
- allows link href editing through anchor extension on clicking the tooltip

The primary objective of the editor seems to be misconstrued here. The purpose of the editor is to facilitate text editing, and in order to modify links, users must access them without triggering immediate navigation - essentially entering 'edit' mode.

However, the resulting HTML post-editing remains valid, and transferring it to an element lacking the contenteditable=true attribute ensures normal functioning - denoting 'publish' mode.

This concept aligns with platforms like Microsoft Word or Google Docs where links require intentional actions for navigation while editing, contrasting with automatic redirection once published.

An actionable suggestion can be enhancing the existing anchor-preview extension with additional features in its hovering tooltip (e.g., Edit Link | Remove Link | Navigate to URL).

tldr;

Clickable links are disabled during text editing using browser's inherent WYSIWYG support (contenteditable). Post-editing, links will function normally outside 'edit' mode. Enhancements to medium-editor's anchor-preview extension could be beneficial.

Answer 5

Answer №3

After gathering inspiration from @Valijon's suggestions in the comments, I successfully implemented the solution by utilizing the code snippet below:

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');
  }
});

It seems that the key lies in the fact that the editor allows the event to propagate to its ancestor elements, hence why I could simply listen for the click on the top-level editor element.

^{In this context, $window refers to Angular's $window service -- In case you are not using angularjs, window can be used as an alternative. I opted for angular.element to streamline the event listener registration process, but feel free to implement it using traditional methods (or with your chosen JS framework).}

Answer 6

After gathering inspiration from @Valijon's suggestions in the comments, I successfully implemented the solution by utilizing the code snippet below:

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');
  }
});

It seems that the key lies in the fact that the editor allows the event to propagate to its ancestor elements, hence why I could simply listen for the click on the top-level editor element.

^{In this context, $window refers to Angular's $window service -- In case you are not using angularjs, window can be used as an alternative. I opted for angular.element to streamline the event listener registration process, but feel free to implement it using traditional methods (or with your chosen JS framework).}

Answer 7

Answer №4

When I initially asked the question, all I wanted was a behavior similar to Google Docs while in "edit" mode (as explained by Nate Mielnik). Unfortunately, the Medium Editor team decided not to include this feature as part of the core medium editor. However, they mentioned that they would welcome it as an extension if someone were to add it.

So, taking their suggestion, I went ahead and implemented the functionality as an extension myself. You can find it as part of MediumTools. Please note that the project is still in its early stages and there are areas that require improvement such as styling and code minification. We welcome Pull Requests for enhancements.

The code structure is outlined below:

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();
      }
    }
  });

To explain further, I utilized medium's prototypical inheritance approach to "subclass" the built-in AnchorPreview extension. I customized the getTemplate method to incorporate additional links into the markup. Subsequently, I made modifications based on the base implementation of getPreview, attaching new actions to each link accordingly. Finally, I included a method to handle unlinking when the "Remove" action is triggered. This unlink method could be optimized using contenteditable features for better browser integration, but I have yet to explore that option (which could make a valuable contribution via a Pull Request).

^{¹Currently, this is the only part of the project, but hopefully, that will change in the future. . .}

Answer 8

When I initially asked the question, all I wanted was a behavior similar to Google Docs while in "edit" mode (as explained by Nate Mielnik). Unfortunately, the Medium Editor team decided not to include this feature as part of the core medium editor. However, they mentioned that they would welcome it as an extension if someone were to add it.

So, taking their suggestion, I went ahead and implemented the functionality as an extension myself. You can find it as part of MediumTools. Please note that the project is still in its early stages and there are areas that require improvement such as styling and code minification. We welcome Pull Requests for enhancements.

The code structure is outlined below:

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();
      }
    }
  });

To explain further, I utilized medium's prototypical inheritance approach to "subclass" the built-in AnchorPreview extension. I customized the getTemplate method to incorporate additional links into the markup. Subsequently, I made modifications based on the base implementation of getPreview, attaching new actions to each link accordingly. Finally, I included a method to handle unlinking when the "Remove" action is triggered. This unlink method could be optimized using contenteditable features for better browser integration, but I have yet to explore that option (which could make a valuable contribution via a Pull Request).

^{¹Currently, this is the only part of the project, but hopefully, that will change in the future. . .}

Tips for effectively utilizing hyperlinks in Medium Editor

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Angular: Promise updating array but integer remains static

Assistance Required for Making a Delicious Cookie

Attempted to incorporate a text input into the header of every column within a table using Jquery

Tips for selecting React component props based on a specific condition

How can I extract a substring from a URL and then save it to the clipboard?

In Vue, you can dynamically load a JavaScript file containing a JavaScript object during runtime

Is it possible to display data on a webpage without using dynamic content, or do I need to rely on JavaScript

Setting default zoom level for Google Map in HTML

Having issues with IE8 and SmoothGallery script errors

Challenges with the dropdown menu navigation bar

Using JavaScript to compare arrays in order to display only the distinct outcome

Initializing a resource in AngularJS by populating it with a string retrieved from an $http request

What is the reason that a peerDependency cannot be imported or required, even if it is already included in the parent module?

Retrieving information from a JSON web service can easily be done using just JavaScript and jQuery

Change the height of textarea dynamically using jQuery

Incorrect date formatting is being displayed

Struggling with filtering an array fetched from an API using VueJS

Communicating data transfer between two Node.js servers through the use of the Node Serial Port technology

What is the best way to determine if the form has been submitted?

Changing the variable value upon clicking