Home » Php » javascript – PHP save text in formatted editable div

javascript – PHP save text in formatted editable div

Posted by: admin February 25, 2020 Leave a comment

Questions:

I am making a text editor and I am trying to save and open the formatted text that the user typed in a editable div as a html file or any other filetype realy that I can save it to but also open it back up when you wan’t.

Before I have read on W3Schools about saving, creating and opening files in php.
here and here

Here is a link to my website: https:icrann.com/freeword.html

Here is also my code:
It uses javascript on the buttons to format the selcted text.

<!DOCTYPE html>
<html>
<head>
    <link rel='stylesheet' href='https://use.fontawesome.com/releases/v5.7.0/css/all.css' crossorigin='anonymous'>

</head>
<body>

    <div class="topnav">
        <a class="close" href="#home"><i class='fas fa-arrow-left' style='font-size:24px'></i></a>
        <a class="btn" href=""><i class='fas fa-save' style='font-size:24px'></i></a>
        <a class="btn" href="#about"><i class='fas fa-cloud' style='font-size:24px'></i></a></i></a>
    </div>

    <div class="iconnav">
        <button class="fontStyle" onclick="document.execCommand('undo',false,null);"><i class="fas fa-undo"></i></button>
        <button class="fontStyle" onclick="document.execCommand('redo',false,null);"><i class="fas fa-redo"></i></button>

        <button class="fontStyle" onclick="document.execCommand('cut',false,null);"><i class="fas fa-cut"></i></button>
        <button class="fontStyle" onclick="document.execCommand('copy',false,null);"><i class="fas fa-copy"></i></button>
        <button class="fontStyle" onclick="document.execCommand('paste',false,null);"><i class="fas fa-paste"></i></button>
        <button class="fontStyle" onclick="document.execCommand('selectAll',false,null);"><i class="fas fa-check-double"></i></button>

        <button class="fontStyle" onclick="document.execCommand('bold',false,null);"><i class="fas fa-bold"></i></button>
        <button class="fontStyle" onclick="document.execCommand('italic',false,null);"><i class="fas fa-italic"></i></button>
        <button class="fontStyle" onclick="document.execCommand('underline',false,null);"><i class="fas fa-underline"></i></button>
        <button class="fontStyle" onclick="document.execCommand('strikethrough',false,null);"><i class="fas fa-strikethrough"></i></button>

        <button class="fontStyle" onclick="document.execCommand('justifyLeft',false,null);"><i class="fas fa-align-left"></i></button>
        <button class="fontStyle" onclick="document.execCommand('justifyCenter',false,null);"><i class="fas fa-align-center"></i></button>
        <button class="fontStyle" onclick="document.execCommand('justifyRight',false,null);"><i class="fas fa-align-right"></i></button>
    </div>

    <div id="editor" contenteditable="true">
        This is the editable text.
    </div>

</body>

Thankyou Crann

How to&Answers: