⚠️ Use at Your Own Risk
- The following instructions are provided without warranty or implied support. This tool allows editing of all files in your website and must be used with extreme caution. We strongly recommend applying directory password protection (see link at the end).
- This is a very powerful tool to edit all and any of your HTML files for your website. You must password protect the tool to ensure that no 3rd party can use it to modify your website files. Instructions on how to do so are provide below.
As of cPanel version 120, the built-in HTML Editor in File Manager has been removed. If you used this tool to make quick edits to your website, you'll need an alternative.
This guide will walk you through setting up a browser-based replacement using TinyMCE, a powerful and easy-to-use WYSIWYG HTML editor.
Step 1: Download TinyMCE
-
Visit the official TinyMCE site: https://www.tiny.cloud/get-tiny/self-hosted/
-
Click Download under “Self-hosted” to receive a ZIP file.
-
Extract the ZIP file on your computer. You’ll find a folder named 'js' — this is what you'll upload later.
Step 2: Create the "Editor" Folder in cPanel
-
Log into your cPanel account.
-
Open File Manager.
-
Navigate to the 'public_html' directory.
-
Click + Folder (top left), and create a new folder called "editor" (you can customize this name, but you need to use your version in place of "editor" in the next steps)
Step 3: Create the File "index.php" Inside "Editor" Folder
-
Still in File Manager, open the newly created "editor" folder.
-
Click + File and name it: index.php
Step 4: Edit the File "index.php"
- Right-click 'index.php' and choose Edit.
-
Paste the following code into the editor window:
<?php ini_set('display_errors', 1); ini_set('display_startup_errors', 1); error_reporting(E_ALL); $rootPath = dirname(__DIR__); function findHtmlFiles($baseDir) { $rii = new RecursiveIteratorIterator(new RecursiveDirectoryIterator($baseDir)); $files = []; foreach ($rii as $file) { if ($file->isDir()) continue; $ext = strtolower(pathinfo($file->getFilename(), PATHINFO_EXTENSION)); if (in_array($ext, ['html', 'htm'])) { $files[] = str_replace($baseDir . '/', '', $file->getPathname()); } } sort($files); return $files; } $editableFiles = findHtmlFiles($rootPath); $selectedFile = isset($_POST['file']) ? $_POST['file'] : (isset($_GET['file']) ? $_GET['file'] : ''); $message = ''; if ( $_SERVER['REQUEST_METHOD'] === 'POST' && isset($_POST['content']) && isset($_POST['file']) && isset($_POST['save']) && $selectedFile ) { $targetPath = realpath($rootPath . '/' . $selectedFile); if ($targetPath && strpos($targetPath, $rootPath) === 0) { file_put_contents($targetPath, $_POST['content']); $message = "✅ Saved successfully!"; } else { $message = "❌ Invalid file path."; } } $content = ''; if ($selectedFile) { $filePath = realpath($rootPath . '/' . $selectedFile); if ($filePath && strpos($filePath, $rootPath) === 0 && file_exists($filePath)) { $content = file_get_contents($filePath); } else { $message = "❌ Unable to load file."; } } $autosaveEnabled = isset($_GET['autosave']) ? true : false; ?> <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>HTML Editor</title> <script src="js/tinymce/tinymce.min.js"></script> <script> document.addEventListener("DOMContentLoaded", function () { const editorEl = document.querySelector('#editor'); const autosaveEnabled = <?= json_encode($autosaveEnabled) ?>; if (editorEl) { const config = { selector: '#editor', height: '100%', plugins: 'code link image lists table' + (autosaveEnabled ? ' autosave' : ''), toolbar: 'undo redo | formatselect | bold italic | alignleft aligncenter alignright | bullist numlist | link image | table code', menubar: true }; if (autosaveEnabled) { config.autosave_interval = '30s'; config.autosave_retention = '5m'; config.autosave_restore_when_empty = true; config.autosave_ask_before_unload = true; } tinymce.init(config); } const msg = document.getElementById('message'); if (msg) { setTimeout(() => msg.style.display = 'none', 5000); } }); </script> <style> html, body { height: 100%; margin: 0; font-family: sans-serif; } .toolbar { display: flex; align-items: center; gap: 1em; padding: 10px; background: #f0f0f0; border-bottom: 1px solid #ccc; } .editor-container { height: calc(100% - 60px); } select, button { font-size: 1em; padding: 5px 10px; } textarea { width: 100%; height: 100%; border: none; resize: none; } #message { margin-left: 10px; color: green; font-weight: bold; } </style> </head> <body> <form method="get" class="toolbar" style="margin: 0;"> <label for="file">Select a file:</label> <select name="file" id="file" onchange="this.form.submit()"> <option value="">-- Choose --</option> <?php $rootFiles = []; $subFiles = []; foreach ($editableFiles as $file) { if (strpos($file, '/') === false) { $rootFiles[] = $file; } else { $parts = explode('/', $file, 2); $subFiles[$parts[0]][] = $file; } } sort($rootFiles); ksort($subFiles); foreach ($rootFiles as $file) { $selected = ($selectedFile === $file) ? 'selected' : ''; echo "<option value=\"" . htmlspecialchars($file) . "\" $selected>" . htmlspecialchars($file) . "</option>"; } foreach ($subFiles as $folder => $files) { echo "<optgroup label=\"" . htmlspecialchars($folder) . "/\">"; sort($files); foreach ($files as $file) { $selected = ($selectedFile === $file) ? 'selected' : ''; echo "<option value=\"" . htmlspecialchars($file) . "\" $selected> " . htmlspecialchars($file) . "</option>"; } echo "</optgroup>"; } ?> </select> <?php if ($selectedFile): ?> <button type="submit" form="saveForm" name="save">💾 Save Changes</button> <?php if ($message): ?> <span id="message"><?= htmlspecialchars($message) ?></span> <?php endif; ?> <?php endif; ?> <label style="margin-left: 1em;"> <input type="checkbox" name="autosave" value="1" <?= isset($_GET['autosave']) ? 'checked' : '' ?>> Warn if Unsaved </label> </form> <?php if ($selectedFile): ?> <form method="post" id="saveForm" style="height: 100%;"> <input type="hidden" name="file" value="<?= htmlspecialchars($selectedFile) ?>"> <div class="editor-container"> <textarea id="editor" name="content"><?= htmlspecialchars($content) ?></textarea> </div> </form> <?php endif; ?> </body> </html> - Click Save Changes.
Step 5: Upload TinyMCE to Your Server
-
In File Manager, go to the "editor" folder you created.
-
Click Upload (top menu).
-
Upload the entire 'js' folder from the TinyMCE ZIP you extracted earlier.
-
When done, you should have the following structure:
/public_html/editor/index.php
/public_html/editor/js/tinymce/tinymce.min.js
Step 6: Visit Your Online HTML Editor
You can now visit the editor by opening this URL in your browser: https://yourdomain.com/editor (replace yourdomain.com with your domain)