Problem with hyperlinks: next character inadvertently added into the <a> tag in the TinyMCE user interface

I'm facing a challenge and struggling to come up with a solution. It could be due to incorrect setup or oversight on my part, but I suspect it might also be a bug.

The issue is with the TinyMce setup applied in a Div (editable).

setup: function (editor) {
            forced_root_block: false,
            force_p_newlines: false,
            plugins: 'autolink link paste',
            valid_elements: 'a[href|rel|target=_blank],br,p',
            toolbar: false,
            menubar: false,
            statusbar: false,
            paste_auto_cleanup_on_paste: true,
            inline: true,
            default_link_target: '_blank'
        };

When entering a link in the div and pressing Enter, the next character and <br> are included within the generated <a> tag. The result looks like this: 

<a href="http://www.google.co">www.google.com<br>a</a>sda</div>

If I type Space instead of Enter, it works correctly.

Any suggestions on what might be causing this behavior?

javascriptangularjstinymceangular-ui-tinymce

Answer №1

Solution: I removed the forced_root_block setting and adjusted the styling of the <p> elements to remove margins. Additionally, I utilized innerText to avoid including any HTML elements in the content.

For more information, please visit: https://github.com/angular-ui/ui-tinymce/issues/250

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

Enhancing the angular-ui-bootstrap typeahead module

Currently, I am using the typeahead feature from angular-ui-bootstrap to allow users to select a person's name or add a new name if it is not available in the options. I have customized the getMatchesAsync function with the following code: if(scope ...

javascriptangularjsangular-ui-bootstrapangular-ui-typeahead

Dealing with req.params.url that includes "://": Best practices

Currently, I am in the process of developing a program utilizing ExpressJS. One of the key features is that the user should have the ability to submit a URL. However, I am encountering a challenge. It seems that the system is not functioning correctly beca ...

javascriptnode.jsexpress

Creating an Angular library that utilizes HTML components from the application

This is my first attempt at developing an angular library. My goal is to create a header and footer library for angular. The challenge lies in making sure that it integrates seamlessly with the HTML structure of the application it is being used in. Below ...

javascripthtmlangulartypescriptangular-library

How can you tell if a specific keyboard key is being pressed along with the CTRL button?

Is there a way to call functions when a specific key is pressed along with the CTRL key (on a Windows system)? While testing for a particular keyCode, I used event.keyCode. I researched the codes assigned to each key and assumed that 17 + 73 would represe ...

javascriptjquery

Restricting the download of data in Firebase when using the

I have implemented a Firestore listener in my app that downloads items from the database as they are added. Initially, all documents are downloaded using onSnapshot, but I want to limit this to 12 items as I am using a FlatList to render items as I scroll. ...

javascriptreactjsfirebasereact-nativegoogle-cloud-firestore

Efficiently replacing the new line character with a comma within an Angular application

One of the fields in my form allows users to input data either on a new line or separated by commas. However, when this data is sent via an API, a newline character (/n) is added for each new line which I do not want to display on the detail page. Here is ...

javascriptangulartypescriptangular8

I am encountering an issue where req.user is in the form of a list and I must access data using req.user[0].prop. Can someone explain why

I used to be able to retrieve data with req.user.property, but now I have to use req.user[0].property. It seems that req.user is now a list structured like this... user: [ { _id: '934715373258035', active: true, date: 'July 1st 2015 ...

javascriptnode.jsexpresspassport.js

Node and browser compatible JavaScript logging library for effective logging experience across platforms

Our team is utilizing Visionmedias debug library, as it seamlessly functions on both browsers and Node.js environments. We are in search of a more reliable alternative to debug that offers the same level of functionality (error, warn, info, etc) for both ...

javascriptnode.jsloggingbrowser

Node Express JS: Efficiently handling multiple fetch responses before sending data to client

My goal is to call an API that only accepts one animal name at a time, but I receive the names of multiple animals in a query separated by commas. To achieve this, I plan to call the API once for each animal, push the JSON data into an array, and then resp ...

javascriptnode.jsexpressasync-awaitfetch

Activate browser scrollbar functionality

Below is the HTML code snippet: <html> <head> <style> #parent { position : absolute; width : 500px; height : 500px; } #top { position : absolute; width : 100%; height: 100%; z-index : 5; } #bottom { position : absolute; width : 100%; ...

javascripthtmlcss

What steps can I take to stop the browser from refreshing a POST route in Express?

Currently, I am using node along with stripe integration for managing payments. My application includes a /charge route that collects various parameters from the front end and generates a receipt. I am faced with a challenge on how to redirect from a POST ...

javascriptnode.jsexpressstripe-payments

Tips on Moving a Bootstrap Modal Popup with the Arrow Keys on Your Keyboard

This example showcases the integration of Bootstrap's Default Modal Popup with jQuery UI Draggable Function. The JS fiddle link provided below contains the code snippet. $(document).ready(function() { $("#btnTest").click(function() { $(&a ...

javascriptjqueryhtmltwitter-bootstrapbootstrap-modal

JavaScript: Implementing a retry mechanism for asynchronous readFile() operation

My goal is to implement a JavaScript function that reads a file, but the file needs to be downloaded first and may not be immediately available. If an attempt to access the file using readFile() fails and lands in the catch block, I want to retry the actio ...

javascriptnode.jsasynchronouspromise

What is the best way to add table pagination at the bottom of a table?

Can someone provide guidance on implementing table pagination for the material-ui table below? The documentation is a bit unclear: <Table ria-label="a dense table"> <TableHead> <TableRow> ...

javascriptreactjsmaterial-ui

Is there a way to change an element's display to 'block'? (see more information below)

I'm having an issue with my event listener for a button that is supposed to change the css of #popUpForm. It seems to only work when I add inline css directly to #popUpForm. Is there a way to achieve this without using inline css and instead setting t ...

javascripthtmlcssdomwebpack

javascript to retrieve data by reducing

Here is the code snippet I am working with: var points = 4; var yModifier = []; for (var i = 0; i <= points; i++) { yModifier.push([]); }; yModifier.forEach( (a, j) => { var start = j; var end = start + points; fo ...

javascriptarrays

What could be the issue with my JSON file?

I am currently utilizing the jQuery function $.getJson. It is successfully sending the desired data, and the PHP script generating the JSON is functioning properly. However, I am encountering an issue at this stage. Within my $.getJSON code, my intention ...

phpjavascriptjqueryjson

Customize the React navigation SearchBar by incorporating a Segmented Control feature

Is there a way to customize the header in React Navigation by adding both a Search Bar and Segmented Control without creating a completely custom header from scratch? I would like to leverage React Navigation's built-in search component but also incor ...

javascriptreactjsreact-nativereact-navigationreact-navigation-v6

Obtain the total number of result entries

I'm working on a project involving JS and PHP. My goal is to call a PHP file using Ajax and have it return the count of result lines. I use echo for this: $connection = new PDO($source, $user); $query = "SELECT * FROM scores WHERE username = '" ...

javascriptphpajax

Retrieve and manipulate the HTML content of a webpage that has been loaded into a

Hey, let's say I have a main.js file with the following code: $("#mirador").load("mirador.html"); This code loads the HTML content from mirador.html into index.html <div id="mirador"></div> I'm wondering if there is a way to chan ...

javascriptjqueryhtml