How to Use the Froala Editor’s Disable Link Detection Option

A Froala user sent us a question about configuring the link detection.

The user says that whenever he types text in the Froala WYSIWYG HTML Editor, the text automatically becomes a link if it is recognized as one when pressing the enter key.

“For text in the body, it is okay, but for the text in the title, I don’t want any text to be transferred into linked text. How can we disable this thing?” the user asked.

In an editor, the “disable link detection” configuration typically refers to a setting that prevents the editor from automatically creating hyperlinks for URLs entered into the text.

This function can be convenient in many cases. However, there are situations where the user might not want this behavior.

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].