How to build stack overflow like editor.

Mayank November 26, 2022
How to build stack overflow like editor.

In this tutorial I’m going to explain you how to build stack overflow like editor.

Follow this below steps and build stack overflow like editor.

Step : 1 - Create project:

Open empty folder in visual studio code.

Step : 2 - Install stacks-editor package:

Then after open Terminal in visual studio code and install stacks-editor package using this command : 

npm install @stackoverflow/stacks-editor

Step : 3 - Code:

HTML CODE: 

<!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">
    <link rel="stylesheet" href="https://unpkg.com/@stackoverflow/stacks/dist/css/stacks.min.css">
    <link rel="stylesheet" href="node_modules/@stackoverflow/stacks-editor/dist/styles.css" />
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
    <title>TextEditor</title>
    <style>
        body {
            font-family: Verdana, Geneva, Tahoma, sans-serif;
        }
    </style>
</head>

    <div class="container my-5">
        <h1 class="mb-3">Stack-Editor Example:</h1>
        <div id="editor-example-1"></div>
        <button type="button" class="btn btn-primary my-4" id="btn" onclick="parseHTML()">Submit</button><br>
        <label for="preview" class="my-4 mb-0 fs-1 mb-2">Preview:</label>
        <hr class="my-0 mb-0">
        <div id="preview" class="text-dark"></div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js" defer></script>
    <script src="node_modules/@stackoverflow/stacks-editor/dist/app.bundle.js"></script>
    <script src="https://unpkg.com/@stackoverflow/stacks/dist/js/stacks.min.js" defer></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.min.js" defer></script>
    <script>
        new window.stacksEditor.StacksEditor(
            document.querySelector("#editor-example-1"),
            "",
            {
            }
        );
    </script>
    <script src="logic.js" defer></script>

    </body>
</html>

JAVASCRIPT CODE: 

// targeting id and class code - start here
let editorText = document.getElementsByClassName('ProseMirror')[0];
editorText.id = "stackEditor";

let stackEditor = document.getElementById('stackEditor');
let preview = document.getElementById('preview');
// targeting id and class code - start end

// remove 'plainText' text inside code - start here
stackEditor.addEventListener('input', (e) => {
    let languageEditorText = document.getElementsByClassName('js-language-indicator')[0];
    if (languageEditorText != null) {
        languageEditorText.id = "languageText";
        let languageText = document.getElementById('languageText');
        languageText.innerText = "";
    }
});
// remove 'plainText' text inside code - end here 

// function for parseHTML to string - start here
function parseHTML() {
    console.log(stackEditor.innerText)
    preview.innerText = "";
    var $preview = $("#preview"),
        str = stackEditor.innerHTML,
        html = $.parseHTML(str),
        nodeNames = [];

    // Append the parsed HTML
    $preview.append(html);
    stackEditor.innerText = "";
}
// function for parseHTML to string - end here

Download code : Downlaod

Tags
Mayank

Posted by Mayank

Post a Comment

0 Comments

Enter Your Comment