How to Disable Automatic Link Detection in a Visual HTML Editor

A Froala user inquired about customizing the link detection feature within the visual HTML editor. They explained that whenever text is typed and recognized as a URL, pressing enter automatically converts it into a hyperlink. While this is acceptable for body text, the user wishes to prevent this automatic conversion for text in the title. They specifically asked how to disable this functionality within the editor.

In a visual HTML editor, the “disable link detection” configuration typically refers to a setting that stops the automatic creation of hyperlinks for URLs entered in the text. Although convenient in many cases, there are instances where users may prefer to disable this behavior for specific elements or contexts, such as the title in this case.

Plugins

The user can solve the problem by turning off the Froala URL plugin. The Froala documentation informs that this plugin has a function to “convert text to URL as you type.”

Plugin events: url.linked (link). Triggered after auto-linking a URL while typing.

The developer can use the pluginsEnabled option to turn off that plugin. 

There is no option just to mention the plugins you want to disable. If the plugin name is not in the pluginsEnabled, it is disabled. For example:

pluginsEnabled: [‘image’, ‘link’, ‘url’, ‘align’]

This code only enables image, link, URL, and align plugins. Other plugins will be disabled. 

Froala has numerous default plugins (listed below). It is possible to create new ones, too.

• Align
• Char Counter
• Code Beautifier
• Code View
• Colors
• Draggable
• Embedly
• Emoticons
• Entities
• Files Manager
• File
• Font Awesome
• Font Family
• Font Size
• Fullscreen
• Help
• Image
• Image Manager
• Image Tui
• Inline Class
• Inline Style
• Line Breaker
• Line Height
• Link
• Lists
• Markdown Support
• Paragraph Format
• Paragraph Style
• Print
• Quick Insert
• Quote
• Save
• Special Characters
• Spell Checker
• Table
• URL
• Video
• Word Paste

React Project

To show the complete answer to the question, let’s create a project in React integrated with the Froala editor to demonstrate the example.

npx create-react-app froala-disable-link

cd froala-disable-link

npm start

The developers need to install Froala WYSIWYG Editor. They can do this by running the following command in the project directory:

npm install react-froala-wysiwyg –save

This package provides a React wrapper for the Froala editor, making it easy to integrate into your React application.

Let’s create a simple React component that includes the Froala editor. Utilize the file App.js.

import './App.css';

import FroalaEditorComponent from "react-froala-wysiwyg";

import "froala-editor/css/froala_style.min.css";

import "froala-editor/css/froala_editor.pkgd.min.css";

import "froala-editor/js/plugins.pkgd.min.js";


function App() {


  let model = '<p>Froala.com</p>';
 
  return (
    <div id="froala-editor">
      <h1>Froala</h1>
      <FroalaEditorComponent
        tag="textarea"
        model={model}
        config={{
        }}
      />
    </div>
  )
}

export default App;

In the config, write the following code of the pluginsEnable configuration. Let’s include the plugins image, link, URL, and align:

        pluginsEnabled: [‘image’,‘link’,‘url’,‘align’]

In this example, the link detection is working, as you can see in the gif below:

The Froala user, however, wants the opposite. He wants this behavior not to happen.

For the Froala editor to have this configuration, just remove the term “URL,” as in the code below.

    <FroalaEditorComponent
        tag="textarea"
        model={model}
        config={{
          pluginsEnabled: ['image','link','align']
        }}
      />
    </div>

With the code change, when typing a word that looks like a link like “froala.com,” the editor does not automatically turn the word into a link. 

At the same time, the user can still place a link as the link plugin remains in the code.

Conclusion

Configuring the Froala Editor with an option like turning off link detection gives users control over link handling within the editor. 

Following the steps outlined in this guide, you can easily integrate Froala Editor into your project and tailor its behavior to suit your specific requirements. 

Whether you need to turn off automatic link detection or customize link behavior, Froala Editor offers comprehensive features to meet your needs.

If you have questions about Froala like this, you can contact us, and we can answer them here as a blog post on Froala’s blog: [email protected].