Advanced text editor in HTML using TinyMCE

This smart text editor makes it easy for developers to create projects like blogs, making the text input look great without having to write code yourself. Just install this editor, and you're ready to go!

admin admin
May 3, 2024 - 22:24 Updated: May 7, 2024 - 10:06
0 144
Advanced text editor in HTML using TinyMCE
Advanced text editor in HTML using TinyMCE

This text editor makes creating blogs easy and professional-looking. It also improves your text areas, making them more functional and attractive.

This user-friendly text editor is designed to simplify your blogging experience while adding a touch of professionalism to your content. With its intuitive features, creating visually appealing blogs has never been easier. Moreover, it enhances your text areas with advanced functionalities, ensuring that your content not only looks great but also performs seamlessly.

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>
    <h4>Advanced Text Editor</h4>
    <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: 500,
    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}'
});

Files

Tags: