Is There Any Online Text Editor for HTML, CSS with Saving and Syntax Highlighting Facility

Javascript - Online CSS Editor

I found this for online CSS editor.
There are some others here.

I have also found similar questions at Stackoverflow here and here.

For downloadable javascript-based CSS editor I found this.

Firebug Lite (source-code here) is javascript-based and is compatible with lots of browsers.

Real time html editor for download

Ok, I'm done. Here is my final solution.

real-time html editor
Load/save buttons
automatically load files from /projects/ folder into dropdown list
you can upload files to make new project
no need to modify anything, you can just use it.

Index.php

<?php
$fileName = $_POST['project']?? 'index.html';
$fileContent = fopen("./projects/" . $fileName, "r") or die("Unable to open file!");
if (isset($_POST['text'])) {
    file_put_contents("./projects/" . $fileName, $_POST["text"]);
}
?>

<!DOCTYPE html><html lang="cs"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1">
<style> 
.error {background-color:red; color:white;}
.dib {display:inline-block;}
</style>
</head><body>

<?php 
echo "<form class='dib' method='POST'><select name='project'>";
$path    = './projects/';
$files = scandir($path);
$files = array_diff(scandir($path), array('.', '..'));
foreach($files as $file){
  echo "<option" . (($fileName == $file)?' selected':'') . ">" . $file . "</option>";
} 
echo "</select> <input type='submit' value='Load!'></form>";
?>

<input type='submit' form='content' value='Save!'> 

    <form class="dib" style="float:right;" action="fileUploadScript.php" method="post" enctype="multipart/form-data">
        Upload a File:
        <input type="file" name="the_file" id="fileToUpload">
        <input type="submit" name="submit" value="Start Upload">
    </form>

<p style='margin:auto; text-align:center; width:20%; text-transform:uppercase; font-weight: bold;'><?php echo $fileName?></p>

<br>
<form id="content" method="POST">
<textarea name="text" rows="40" id="pure" style="width:100%;margin-top:8px;" wrap="off">
<?php echo fread($fileContent,filesize("./projects/" . $fileName)); ?> 
</textarea><br>
<input type="hidden" name="project" value="<?php echo $fileName; ?>">
</form>
<hr>
<div id="compiled"></div>
</body>
</html>

 <?php
fclose($fileContent);
?> 

<script type="text/javascript">
var h = document.getElementById("pure");
var compiled = document.getElementById("compiled");
h.onkeyup = function() {
  compiled.innerHTML = h.value;
  pure.classList.toggle("error",
    compiled.innerHTML !== h.value); 
};
h.onkeyup();
</script>

fileUploadScript.php

<?php
    $currentDirectory = getcwd();
    $uploadDirectory = "/projects/";

    $errors = []; // Store errors here

    $fileExtensionsAllowed = ['jpeg','jpg','txt','bmp','html','htm','rar','zip','7z','doc','docx','xls','xlsx','ppt','pptx','pdf','pptm','png','gif']; // These will be the only file extensions allowed 

    $fileNamee = $_FILES['the_file']['name'];
    $fileSize = $_FILES['the_file']['size'];
    $fileTmpName  = $_FILES['the_file']['tmp_name'];
    $fileType = $_FILES['the_file']['type'];
    $tmp = explode('.',$fileNamee);
    $fileExtension = strtolower(end($tmp));

    $uploadPath = $currentDirectory . $uploadDirectory . basename($fileNamee); 

    if (isset($_POST['submit'])) {

      if (! in_array($fileExtension,$fileExtensionsAllowed)) {
        $errors[] = "This file extension is not allowed. Please upload a JPEG or PNG file";
      }

      if ($fileSize > 4000000) {
        $errors[] = "File exceeds maximum size (4MB)";
      }

      if (empty($errors)) {
        $didUpload = move_uploaded_file($fileTmpName, $uploadPath);

        if ($didUpload) {
          echo "The file " . basename($fileNamee) . " has been uploaded";
        } else {
          echo "An error occurred. Please contact the administrator.";
        }
      } else {
        foreach ($errors as $error) {
          echo $error . "These are the errors" . "\n";
        }
      }

    }
?>

After you save these two files, dont forget make new folder named "projects" and default file called "index.html" in this folder..

Coding an online text editor

Look into the contenteditable HTML attribute:

<div contenteditable="true">  This text can <b>be edited</b> by the user.</div>

ckeditor and codesnippets plugin

For anyone interested, I've found the best way to deal with the syntax highlighting issue is to download prism. This will work with the classes produced by ckeditors codesnippet plugin and colour code the syntax according the theme you chose from Prism. Look at prismjs.com.

Is There Any Online Text Editor for HTML, CSS with Saving and Syntax Highlighting Facility

Javascript - Online CSS Editor

Real time html editor for download

Coding an online text editor

ckeditor and codesnippets plugin

Related Topics

Leave a reply