text editor

<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
    <script src="https://kit.fontawesome.com/275e820b94.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
</head>
<body>
    <h1 class="title">Guest Post Editor</h1>
    <div class="text-editor-main">
        <div class="options">
            <button class="my-text-btn" data-command="undo"><i class ="fas fa-undo"></i></button>
            <button class="my-text-btn" data-command="redo"><i class ="fas fa-redo"></i></button>
            <button class="my-text-btn" data-command="bold"><i class ="fas fa-bold"></i></button>
            <button class="my-text-btn" data-command="italic"><i class ="fas fa-italic"></i></button>
            <button class="my-text-btn" data-command="underline"><i class ="fas fa-underline"></i></button>
            <button class="my-text-btn" data-command="strikeThrough"><i class ="fas fa-strikethrough"></i></button>
            <button class="my-text-btn" data-command="formatBlock" data-block="H1">H1</button>
            <button class="my-text-btn" data-command="formatBlock" data-block="H2">H2</button>
            <button class="my-text-btn" data-command="formatBlock" data-block="H2">H3</button>
            <button class="my-text-btn" data-command="superscript"><i class ="fas fa-superscript"></i></button>
            <button class="my-text-btn" data-command="subscript"><i class ="fas fa-subscript"></i></button>
            <button class="my-text-btn" data-command="insertUnorderedList"><i class ="fas fa-list-ul"></i></button>
            <button class="my-text-btn" data-command="insertOrderedList"><i class ="fas fa-list-ol"></i></button>
            <button class="my-text-btn" data-command="justifyLeft"><i class ="fas fa-align-left"></i></button>
            <button class="my-text-btn" data-command="justifyCenter"><i class ="fas fa-align-center"></i></button>
            <button class="my-text-btn" data-command="justifyRight"><i class ="fas fa-align-right"></i></button>
            <button class="my-text-btn" data-command="justifyFull"><i class ="fas fa-align-justify"></i></button>
            <button class="my-text-btn" data-command="insertImage"><i class ="fas fa-images"></i></button>
            <button class="my-text-btn" data-command="createLink"><i class ="fas fa-link"></i></button>
            <button class="my-text-btn" data-command="formatBlock" data-block="blockquote"><i class ="fas fa-quote-right"></i></button>
            <button class="my-text-btn" data-command="formatBlock" data-block="pre"><i class ="fas fa-code"></i></button>
        </div>
            <div class="contentOutput" contenteditable="true" ></div>

</div>

<div class="floating-button"><i class="fas fa-expand-arrows-alt" aria-hidden="true"></i></div>
    <script src="script.js"></script>
<style>/* :root{
    -background-color: 
} */

body{
    background-color: sienna;
}

.title{
    color: #fff;
    text-align: center;
    margin-top: 40px;
}

.text-editor-main{
    width: 600px;
    border: 1px solid rgb(219, 219, 219);
    margin: auto;
    margin-top: 50px;
    box-shadow: 0 .3rem 0.9rem rgba(0,0,0,.15) !important;
    background-color: #fff;
}

.options{
    background-color: #e7eaef;
    padding: 10px;
    display: flex;
    justify-items: center;
    flex-wrap: wrap;
}

.my-text-btn{
    border: none;
    background-color: #e7eaef;
    padding: 10px 15px;
    border-radius: 4px;
    color: rgb(112, 112, 112);
    margin: 5px;
    cursor: pointer;
}

.my-text-btn:hover{
    background-color: #bfcfeb;
}

.floating-button{
    background-color: tomato;
    color: #fff;
    position: fixed;
    bottom: 100px;
    right: 50px;
    border-radius: 50% 50% 50% 50% / 50% 50% 50% 50% ;
    width: 50px;
    height: 50px;
    text-align: center;
    box-shadow: 0 .5rem 1rem rgba(0,0,0,.15) !important;
    transition: all 0.3s ease-in-out;
}

.floating-button:hover{
    cursor: pointer;
    background-color: #b9b9b9;
    color: #000;
    transform: rotate(360deg);

}

.floating-button > i{
    margin-top: 18px;
}

#textOutput{
    border:  1px solid #000;
    width: 100%;
    min-height: 400px;
}

.active{
    background-color: tomato;
    color: #fff;
}

.contentOutput{
    height:400px;
    width: 100%;
    overflow-wrap: break-word;
    padding: 30px;
}

.fullscreen-title{
    display: none;
}

.fullscreen-text-editor{
    width: 100%;
    height: 100%;
    margin: 0;
}

.fullscreen-output{
    height: 580px;
} </style>

</body>
<script>
const buttons = document.querySelectorAll('button');
const fullScreen = document.getElementsByClassName('floating-button');
buttons.forEach(button =>{
    button.addEventListener('click', ()=>{
        let myEvent = button.dataset['command'];
        if(myEvent === "insertImage" || myEvent === "createLink"){
            let url = prompt("Enter your Link Here: ");
            document.execCommand(myEvent, false, url);
        }
        else if(myEvent === "formatBlock"){
            let formattingValue = button.dataset['block'];
            document.execCommand(myEvent, false, formattingValue);
        }
        else{
        document.execCommand(myEvent, false, null);
        }
    })
})

// for (let i = 0; i<buttons.length; i++){
//     buttons[i].addEventListener('click', ()=>{
        
        
//         let myEvent = buttons[i].dataset['command'];
//         console.log(myEvent);

//         if(buttons[i].name === "active"){
//             buttons[i].classList.toggle('active');
//         }

//         if(myEvent === "insertImage" || myEvent === "createLink"){
//             let url = prompt("Enter your Link Here: ");
//             document.execCommand(myEvent, false, url);
//         }
//         else{
//         document.execCommand(myEvent, false, null);
//         }
//     })
// }

fullScreen[0].addEventListener('click', ()=>{
    let title = document.getElementsByClassName('title')[0];
    let mainEditor = document.getElementsByClassName('text-editor-main')[0];
    let outputContent = document.getElementsByClassName('contentOutput')[0];
    title.classList.toggle('fullscreen-title');
    mainEditor.classList.toggle('fullscreen-text-editor');
    outputContent.classList.toggle('fullscreen-output');
    if (outputContent.classList.contains('fullscreen-output')){
        fullScreen[0].childNodes[0].classList.remove('fa-expand-arrows-alt');
        fullScreen[0].childNodes[0].classList.add('fa-compress-arrows-alt');
    }
    else{
        fullScreen[0].childNodes[0].classList.add('fa-expand-arrows-alt');
        fullScreen[0].childNodes[0].classList.remove('fa-compress-arrows-alt');
    }
})
</script>
</html>

demo

Code Preview

Popular Posts

Pages

text editor