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

Converting HTML divs into a single page PDF document using DinkToPdf

Issue with Angular 6 subscribe event not being caught by subject?

Interactive ASP.NET MVC4 Dialog Box for Input Text

Angular 13 does not currently have support for the experimental syntax 'importMeta' activated

What is preventing obj from being iterable?

How to display logged-in user information on the homepage

Assistance with Php: Need help with remote addresses (I'm a complete beginner in php, apologies)

Experiencing issues with transferring JSON response from Axios to a data object causing errors

AJAX Promises Ignoring Completion Status

Guide to adding a line break following each set of 200 characters utilizing jQuery

Switching between languages dynamically with Angular JS using $translateProvider and JSON files

Clicking a button in React requires two clicks to update a boolean state by triggering the onClick event

Processing multiple forms with jQuery

I am experiencing difficulties in installing JavaScript libraries

Is there a way to replicate the Vista Command Link in HTML?

Is it possible for CSS to accurately crop images by pixels [Sprite Box]?

Manually reloading the page causes issues with AngularJS routing functionality

Is the sidebar hidden only in Internet Explorer 7 and specifically not shown on one particular page?

Navigate to a specific section in an Accordion with the help of jQuery

What could be the reason for the handleOpen and handleClose functions not functioning as expected?