Add In-Document Navigation to Your Editor with the Link to Anchor Plugin
Long-form content needs structure. Whether your users are writing technical documentation, course materials, or detailed reports, they need a way to help readers navigate to specific sections without scrolling through pages of text in a WYSIWYG editor.
The Link to Anchor plugin, introduced in Froala 4.7, adds this capability directly to the editor. Users can insert named anchors at key points in their document, then create links that jump to those anchors. When readers click the link, the page scrolls smoothly to the target section.
What the Plugin Does
The plugin adds two related features to the editor toolbar.
First, users can insert named anchors at any cursor position. These anchors appear as small bookmark icons in the editor, marking locations that can be linked to.
Second, when users create a link using the standard Link plugin, a dropdown now appears listing all available anchors in the document. Selecting an anchor creates an internal link that smoothly scrolls to that position when clicked.
Both the Link plugin and Link to Anchor plugin need to be enabled for the full functionality.
Setting Up the Editor
Here’s a complete implementation using CDN resources. This approach requires no build tools and gives you a working editor in minutes:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Froala Link to Anchor Demo</title>
<link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.1/css/froala_editor.pkgd.min.css"
rel="stylesheet" type="text/css" />
<link href="https://cdn.jsdelivr.net/npm/froala-editor@4.7.1/css/plugins/link_to_anchor.min.css"
rel="stylesheet" type="text/css" />
<style>
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
max-width: 900px;
margin: 40px auto;
padding: 0 20px;
}
/* Enable smooth scrolling for anchor navigation */
html {
scroll-behavior: smooth;
}
</style>
</head>
<body>
<h1>Document Editor with Anchor Links</h1>
<div id="editor">
<h2>Getting Started</h2>
<p>This is the introduction. Add an anchor here so readers can jump back from anywhere.</p>
<h2>Main Content</h2>
<p>Your primary content goes here. Consider adding anchors at each major heading.</p>
<h2>Conclusion</h2>
<p>Wrap up your document here.</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.1/js/froala_editor.pkgd.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/froala-editor@4.7.1/js/plugins/link_to_anchor.min.js"></script>
<script>
var editor = new FroalaEditor('#editor', {
key: 'YOUR_LICENSE_KEY',
toolbarButtons: {
moreText: {
buttons: ['bold', 'italic', 'underline', 'fontSize'],
buttonsVisible: 3
},
moreParagraph: {
buttons: ['alignLeft', 'alignCenter', 'formatOL', 'formatUL', 'paragraphFormat'],
buttonsVisible: 3
},
moreRich: {
buttons: ['insertLink', 'insertAnchor', 'insertImage', 'insertTable'],
buttonsVisible: 3
},
moreMisc: {
buttons: ['undo', 'redo', 'fullscreen', 'html'],
align: 'right',
buttonsVisible: 2
}
},
pluginsEnabled: [
'align', 'fontSize', 'fullscreen', 'image', 'link',
'linkToAnchor', 'lists', 'paragraphFormat', 'table', 'codeView'
],
heightMin: 300,
heightMax: 600
});
</script>
</body>
</html>
Understanding the Configuration
The toolbarButtons configuration places insertAnchor alongside insertLink in the “moreRich” group. This keeps related functions together in the toolbar.
The pluginsEnabled array explicitly includes both link and linkToAnchor. While the packaged Froala build includes most plugins by default, being explicit helps when optimizing load times.
The CSS scroll-behavior: smooth property ensures that anchor link clicks animate the scroll rather than jumping instantly.
Handling Anchor Events
For more control over anchor behavior, you can listen to the plugin’s events:
var editor = new FroalaEditor('#editor', {
key: 'YOUR_LICENSE_KEY',
// Explicitly enabled plugins
pluginsEnabled: ['link', 'linkToAnchor', 'align', 'lists'],
// Customized toolbar layout
toolbarButtons: [
['bold', 'italic', 'underline'],
['insertLink', 'insertAnchor'], // Buttons for linking and inserting/managing anchors
['undo', 'redo']
],
// Custom event handlers for the Anchor plugin
events: {
'anchor.beforeInsert': function(link, text) {
if (text && text.length < 3) {
// Validation check
alert('Anchor names should be at least 3 characters');
return false; // Prevents the anchor from being inserted
}
console.log('Inserting anchor:', text);
return true; // Allows the anchor to be inserted
},
'anchor.beforeRemove': function(link) {
console.log('Removing anchor:', link);
// You could add a confirmation here (e.g., return confirm('Are you sure?'))
return true; // Allows the anchor to be removed
}
}
});
The anchor.beforeInsert event fires before an anchor is added. Returning false cancels the insertion, which is useful for enforcing naming conventions or limiting anchors per document.
Link Anchor in Action
Practical Use Cases
The Link to Anchor plugin fits naturally into several content types.
Documentation and help articles often run to dozens of pages. Adding anchors at each major section with a table of contents at the top lets readers jump directly to the information they need.
Course materials benefit from structured navigation within lessons. Anchors allow students to bookmark progress conceptually and return to specific concepts during review.
Long-form reports like annual reports and research papers also benefit. Stakeholders can jump to sections most relevant to their interests.
Getting Started
The Link to Anchor plugin requires Froala 4.7 or later. Add the plugin by including its JavaScript and CSS files as shown in the examples above.
For the complete API reference, see the Link to Anchor plugin documentation. The Froala 4.7 release notes cover additional features like page breaks and Word export.
If you’re new to Froala, the CDN installation guide walks through the basics, and the plugins overview explains how the modular architecture lets you include only the features you need.
For smooth scrolling behavior, the MDN documentation on scroll-behavior covers the CSS approach. If you need more control over the animation, CSS-Tricks has a detailed guide covering both CSS and JavaScript options.
No comment yet, add your voice below!