Is there a way to remove <font> tags using Javascript designMode?

Question

Is there a way to remove <font> tags using Javascript designMode?

Currently, I am in the process of developing a WYSIWYG editor as a hobby project. My approach involves utilizing an iframe with design mode enabled and leveraging the execcommand feature in JavaScript to implement the editor functionalities. For instance, I have incorporated the following code snippet to adjust the font size within the editor:

richTextField.document.execCommand('fontSize',false,slctdValue);

Upon execution, this particular piece of code modifies the content within the Iframe to something like this:

<div><font size="4" color="red">This is a test!</font></div>

However, I prefer not to utilize the font tag and instead opt for the following format:

<div style="font-size:22px;color:red;">This is a test!</div>

My query pertains to whether there exists a method through which I can identify instances similar to the initial example and replace them with the preferred format shown in the second example?

javascript jquery html css fonts

Answer 1

Answer №1

$(document).ready(function(){
  $('div').css({'font-size':'100%'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size:22px;color:red;">This is a unique example!</div>

Answer 2

$(document).ready(function(){
  $('div').css({'font-size':'100%'});
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="font-size:22px;color:red;">This is a unique example!</div>

Answer 3

Answer №2

Check out this live example on jsfiddle:

https://jsfiddle.net/jonolayton/0851d2uk/4/

The following code is designed to locate all "font" tags in the HTML and substitute them with corresponding "div" tags as specified.

Here's a breakdown of the process:

HTML:

<div>
    <font size="4" color="red">This is a test!</font>
    <font size="4" color="green">This is a test!</font>
    <font size="4" color="blue">This is a test!</font>
    <font size="4" color="pink">This is a test!</font>
    <font size="4" color="yellow">This is a test!</font>
    <font size="4" color="brown">This is a test!</font>
</div>

Javascript:

$(document).ready(function() {
    $('font').each(function() {
        var size = $(this).attr('size');
        var color = $(this).attr('color');
        var text = $(this).text();

        $('<div></div>').insertAfter($(this)).css({
            'font-size' : '22px',
            'color' : color
        }).text(text);
        $(this).remove();
    });
});

Answer 4

Check out this live example on jsfiddle:

https://jsfiddle.net/jonolayton/0851d2uk/4/

The following code is designed to locate all "font" tags in the HTML and substitute them with corresponding "div" tags as specified.

Here's a breakdown of the process:

HTML:

<div>
    <font size="4" color="red">This is a test!</font>
    <font size="4" color="green">This is a test!</font>
    <font size="4" color="blue">This is a test!</font>
    <font size="4" color="pink">This is a test!</font>
    <font size="4" color="yellow">This is a test!</font>
    <font size="4" color="brown">This is a test!</font>
</div>

Javascript:

$(document).ready(function() {
    $('font').each(function() {
        var size = $(this).attr('size');
        var color = $(this).attr('color');
        var text = $(this).text();

        $('<div></div>').insertAfter($(this)).css({
            'font-size' : '22px',
            'color' : color
        }).text(text);
        $(this).remove();
    });
});

Is there a way to remove <font> tags using Javascript designMode?

Answer №1

Answer №2

Similar questions

Struggling to find a solution for changing the color of a select box when an option is chosen

Guide to using Ajax to load a partial in Ruby on Rails

How can we efficiently iterate through an array in Node.js while making asynchronous calls?

How can information be seamlessly transferred between two HTML pages using a script?

Tips for keeping a reading item in place while scrolling

Vanishing ShareThis Link After Postback in JavaScript

Create a link for editing in a data table that can filter based on multiple column values and also enable global search on specific custom

the most efficient and speedy way to execute an AJAX request on a server

The issue with anchor links not functioning correctly in Chrome's desktop browser has been identified

Bring the element into view by scrolling horizontally

Preventing Data Duplicates When Inserting in ASP.NET MVC

Using numerous background images can lead to issues in Safari browser

avoid selecting a d3 table

Guide to adding a checkbox to a JavaScript list

Tips for determining the height of the entire webpage using jQuery

Adding an external link in the `require()` function within the `src` attribute of an `<img>` tag

What steps should I take to resolve the "You do not have authorization to access this directory or page" error in Azure App Services?

Resolve the route expression before the API request is fully processed

Customize your application with Kendo UI localization features

Updating the original form upon hiding the popover within the Bootstrap framework