Advanced text editor in HTML using TinyMCE

How to create an advanced text editor in HTML

Nov 25, 2022 - 07:57 Updated: Feb 12, 2024 - 16:29
2 2444

Advanced text editor in HTML using TinyMCE

This advanced text editor can be used in creating your projects, like blogs which makes the output beautiful. you dont need to write the code manually, just install this rich editor and you are good to go.

INDEX.HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Advanced text Editor</title>
</head>
<body>
    <h3>Advanced Text Editor</h3>
    <form action="" method="post">
        <textarea name="textarea" id="default"  ></textarea>
        <input type="submit" value="submit">
    </form>
    <script src="tinymce/tinymce.min.js"></script>
    <script src="script.js"></script>
</body>
</html>

SCRIPT.JS

tinymce.init({
    selector: 'textarea#default',
    width: 1000,
    height: 300,
    plugins:[
        'advlist', 'autolink', 'link', 'image', 'lists', 'charmap', 'preview', 'anchor', 'pagebreak',
        'searchreplace', 'wordcount', 'visualblocks', 'code', 'fullscreen', 'insertdatetime', 'media', 
        'table', 'emoticons', 'template', 'codesample'
    ],
    toolbar: 'undo redo | styles | bold italic underline | alignleft aligncenter alignright alignjustify |' + 
    'bullist numlist outdent indent | link image | print preview media fullscreen | ' +
    'forecolor backcolor emoticons',
    menu: {
        favs: {title: 'menu', items: 'code visualaid | searchreplace | emoticons'}
    },
    menubar: 'favs file edit view insert format tools table',
    content_style: 'body{font-family:Helvetica,Arial,sans-serif; font-size:16px}'
});

DOWNLOAD THE ZIPPED CODE BELOW

-- Download    

Tags: