Generating an in-page anchor using CKeditor 5

We are currently integrating CKEditor 5 into one of our projects. Our goal is to enable the end-user to generate an in-page anchor tag that can be accessed through other links (e.g., <a name='internalheading'> which can be navigated to via

<a href="#internalheading">
). I am curious if it is possible to utilize CKEditor's native link features to produce both the anchor link and the corresponding navigation link. If this is achievable, could you please provide guidance on how to do so?

Answer №1

There is a high demand for the ability to add in-page links with anchor names or IDs, and it seems that this feature will be included in CKEditor 5 soon. However, no specific date has been promised yet. You can follow the progress on this issue here: https://github.com/ckeditor/ckeditor5/issues/1944

If you are looking for a solution right now, there is already a CKEditor 5 package available that provides this anchor feature. You can check it out here: https://github.com/bvedad/ckeditor5-anchor

In fact, this package has been so useful that there is even an adaptation of it specifically designed for Drupal sites using CKEditor 5. You can find it here: https://github.com/northernco/ckeditor5-anchor-drupal

If you are facing issues during the update from CKEditor 4 to 5 in Drupal, particularly with the Anchor button, these resources may be able to help address the problem.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Exploring Angular 6: Unveiling the Secrets of Angular Specific Attributes

When working with a component, I have included the angular i18n attribute like so: <app-text i18n="meaning|description"> DeveloperText </app-text> I am trying to retrieve this property. I attempted using ElementRef to access nativeElement, bu ...

Receive the outcome once the form is submitted

Can someone provide quick assistance? I am looking to allow users to upload a CSV file for me to parse and analyze. Once the processing is done, I need to display the results back to the users. While uploading the file, I also need to ensure that the file ...

Regular expression that detects a phone number which does not consist of a repetition of the same digit throughout

Looking for a regex pattern to match phone numbers that do not consist of the same number repeated throughout every part. Specifically, I need it to target 10-digit phone numbers in the format (123)123-1234. I have tried using this pattern, but it's ...

Tips for determining whether a value is present in an array or not

I'm trying to prevent duplicate values from being pushed into the selectedOwners array. In the code snippet below, the user selects an owner, and if that owner already exists in the selectedOwners array, I do not want to push it again. How can I imple ...

Unable to synchronize Rijdnael encryption across C# and Javascript/Node platforms

I have encountered an issue while trying to convert a Rijndael encryption function from C# to Node. Despite using the same Key, IV, Mode, and Block Size, I am unable to achieve matching results. What could be causing this discrepancy? C# MRE: using System ...

[entity: undefined prototype] { type: 'clip', info: 'Watch my latest video!!' } using nodejs - multer

import routes from "./routes"; import multer from "multer"; const multerVideo = multer({ dest: "videos/" }); export const localsMiddleware = (req, res, next) => { res.locals.siteName = "Webtube"; res.locals.routes = routes; res.locals.user = { isA ...

Limiting the length of parameters in an Angular directive

Is there a character limit for the parameter being sent to this directive? I'm encountering an issue with my code: header = JSON.stringify(header); columnObj = JSON.stringify(columnObj); $compile('<div column-filter-sort header=' + heade ...

Encountering difficulty accessing the router during testing in Next.js

Hello, I'm currently attempting to test a scenario where when a button is pressed, it should redirect to '/'. Normally this works fine, but during testing it fails and shows the following error: Cannot read properties of null (reading ' ...

Plugin for Vegas Slideshow - Is there a way to postpone the beginning of the slideshow?

Is there a way to delay the start of a slideshow in JavaScript while keeping the initial background image visible for a set amount of time? I believe I can achieve this by using the setTimeout method, but I'm struggling to implement it correctly. Be ...

What is the best way to display a list of items in Vue JS while maintaining the

Looking to display my Vue.js list in reverse order using v-for without altering the original object. The default HTML list displays from top to bottom, but I want to append items from bottom to top on the DOM. Telegram web messages list achieves this wit ...

Retrieve specialized information from a json file

I have a JSON variable called json which contains some data in JSON format. I am attempting to extract a specific portion of that data. One way to do this is by using the index as demonstrated below: var newdata = json[listid].Taxonomies[0]; However, my ...

Issue with integrating the jquery tokeniput plugin in asp.net mvc 3

Having trouble integrating the jQuery Tokeninput plugin into my MVC application. Something seems off with the setup... The Code I'm Using: <input type="text" id="MajorsIds" name="MajorsIds" /> <script type="text/jav ...

What is the reason for multiple ajax functions being triggered when submitting a form through ajax?

I have a Drupal form with an AJAX submit. Additionally, I have another jQuery $.get function that sends a request every 2 minutes and inserts the response into an HTML element. The form and this JavaScript code are independent of each other, performing sep ...

Next.js Head component will not repeat the same Meta Tags

In my Next.js project, I have implemented different meta tags with various media targets in the Head section: <Head> <meta name="theme-color" media="(prefers-color-scheme: light)" content="#7f8fa6"/> <meta name= ...

Awaiting the completion of Promises within a for-loop (Typescript)

I'm struggling with a for-loop and promises in my angular2 project. I have multiple methods that return promises, and after these promises are resolved, I want to populate an array in the class using Promise.all(variable).then(function(result){....... ...

What are the steps for utilizing JSON data retrieved from an ajax response?

After successfully making an ajax request and receiving JSON data, I am struggling with how to use it effectively. The response I am getting looks like this: [{ "id": "5", "reviewID": "2389", "serviceID": "50707", "title": "well d ...

Deploying React application to Heroku resulted in an Application Error even though there were no errors during the build

I'm facing some issues while deploying my React app on Heroku. Even though the app compiles and builds successfully on both my local server and Heroku, it still shows an error. I've added https://github.com/mars/create-react-app-buildpack.git to ...

Enhancing Real-time Communication with NodeJS and NowJs Servers

Recently, I stumbled upon NodeJS and NowJS and I'm fascinated by the technology. My goal is to develop a Facebook-style instant commenting application where users can post comments that will instantly appear on the feed. After watching the screencast ...

Tips on submitting an Array from a Textarea to mongoDB

I have a question regarding posting an array of serial numbers. When I try to post the serial numbers added in the textarea, they are posted as a single string. Here is my form: <form class="" id="serialsForm" action="/serialsnew" method="post"> &l ...

Adjust the size of the mouse cursor in real time

I'm currently in the process of developing a project where I want to create a web application with a mouse cursor that appears as a circle with a customizable radius, which can be altered by the user. The main requirement is for this custom cursor to ...