ECEditor

by ElenaMcDowell

HTML

<link rel="preconnect" href="https://fonts.gstatic.com"> 
<link href="https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Della+Respira&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Nunito:ital,wght@0,200;0,300;0,400;0,600;0,700;0,800;0,900;1,200;1,300;1,400;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Special+Elite&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Lobster+Two:ital,wght@0,400;0,700;1,400;1,700&display=swap" rel="stylesheet">

Replace the textarea #example with ECEditor
<br>
<textarea id="example" name="example"><!--HERE ARE PHP CODES--></textarea>

<br>
This is the HTML part of the editor. It has its own file apart from the file where textarea #example should be
<br>

<div class="previewDocument-box">
    <h1>Preview</h1>
    <div class="previewDocument-text"></div>
</div>

<div class="editor-box">
    <div class="editor-toolbar noselect">

        <div class="editor-button" title="Bold" onclick="btnEditor('ECEditor', '[b]', '[/b]');"><strong>B</strong></div>
        <div class="editor-button" title="Italic" onclick="btnEditor('ECEditor', '[i]', '[/i]');"><i>I</i></div>
        <div class="editor-button" title="Underline" onclick="btnEditor('ECEditor', '[u]',...

CSS

.img-posts {
    max-width: 100%;
}

.editor-box {
    border: 1px solid #d9d9d9;
    border-radius: 6px;
    height: auto;
    width: 100%;
    background-color: #ffffff;
    margin: auto;
}

.editor-toolbar {
    background: #f7f7f7;
    overflow: hidden;
    border-bottom: 1px solid silver;
    display: flex;
    padding: 6px 5px 6px;
    justify-content: space-evenly;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

.editor-button {
    width: 20px;
    height: 20px;
    cursor: pointer;
    font-family: 'Roboto Mono', monospace;
    font-weight: 400;
    text-align: center;
}

.PREbtn1 {
    background-color: #f35654; 
    border-radius: 3px;
}

.PREbtn2 {
    background-color: #f6c86d !important; 
    border-radius: 3px;
}

#previewBBCOde:hover {
    background-color: #f6c86d; 
    border-radius: 3px;
}

.editor-button:hover {
    background-color: #f6c86d;
    border-radius: 2px;
}

.editor-button img {
    pointer-events: none;
}

.img-icon {
    max-height: 15px;
    max-width: 15px;
    margin-top: 2px;
}

.font-icon {
    max-height: 13px;
    max-width: 13px;
}

.editor-textarea {
    font-size: 14px;
    border: none;
    padding: 3px 6px;
    margin-bottom: 3px;
}

.fonts-box {
    background-color: #ffffff;
    border: 1px solid #d9d9d9;
    padding: 10px;
    font-size: 14px;
    display: inline-block;
    position: absolute;
    display: none;
}

.fonts-box p {
    border-bottom: 1px solid rgb(231, 231, 231);
    margin-bottom: 2px;
}

.fonts-name { margin-left: 265px; }
.fonts-size { margin-left: 340px; }
.fonts-color { margin-left: 350px; }
.insert-image { margin-left: 345px; }
.insert-video { margin-left: 380px; }
.insert-link { margin-left: 420px; }

.font-name-btn, .font-size-btn {cursor: pointer;}
.font-name-btn:hover, .font-size-btn:hover {background-color:#f6c86d;}

#colorChoice {
    padding: 0px 0px;
    border-radius: 0px;
    width: 100px;
    height: 50px;
    border: none;
    cursor: pointer;
}

.insertButton...

JavaScript

//Button togles

$(document).ready(function(){

    $("#font-name").click(function(){
       $(".fonts-name").toggle();      
        $(document).click(function(e){
            if(!$(e.target).closest("#font-name, .fonts-name").length){
                $(".fonts-name").hide();
            }
        });
     });

    $(".font-name-btn").click(function(){ $(".fonts-name").toggle(); });
    $(".font-size-btn").click(function(){ $(".fonts-size").toggle(); });
    $(".closeColor").click(function(){ $(".fonts-color").toggle(); });

    $("#font-size").click(function(){
       $(".fonts-size").toggle();      
        $(document).click(function(e){
            if(!$(e.target).closest("#font-size, .fonts-size").length){
                $(".fonts-size").hide();
            }
        });
     });

    $("#font-color").click(function(){
       $(".fonts-color").toggle();      
        $(document).click(function(e){
            if(!$(e.target).closest("#font-color, .fonts-color").length){
                $(".fonts-color").hide();
            }
        });
     });    

    $("#add-img").click(function(){
       $(".insert-image").toggle();      
        $(document).click(function(e){
            if(!$(e.target).closest("#add-img, .insert-image").length){
                $(".insert-image").hide();
                if($('.insert-image').is(':hidden')){
                    $('.IFimages input').val('');
                    $('.InvalidAlertIMG').text(null);
                }
            }
        });
     });
    
    $("#add-video").click(function(){
       $(".insert-video").toggle();      
        $(document).click(function(e){
            if(!$(e.target).closest("#add-video, .insert-video").length){
                $(".insert-video").hide();
                if($('.insert-video').is(':hidden')){
                    $('.IFvideo input').val('');
                    $('.InvalidAlertVIDEO').text(null);
                }
            }
        });
     });

   ...