Question

我创建了一个简单的HTML页面，现在我想为此页面创建在线HTML编辑器（WYSIWYG）。知道一个免费的HTML编辑器。我只需要编辑文本和图像。编辑器最多加载最后一个版本的HTML文件。

由于

Answer 1

Mayby尝试tinymce http://www.tinymce.com/ 它是免费的，并在输出上产生html。它看起来有点像MS Word，但它适用于浏览器。

Answer 2

你可以试试 http://www.quackit.com/html/online-html-editor/ 或http://www.onlinehtmleditor.net/ 但互联网上还有更多。无论如何，根据我的理解，你想直接在网上编辑你的文件，这对我来说似乎不是一个好方法。拥有本地网站副本，在本地编辑文件然后在测试更改后将其上传到服务器以避免拼写错误或样式中断或其他编码问题总是更好。对于文件的本地编辑，我使用Visual Studio，但如果你想要一个带有智能感知的免费编辑器，你可以试试Sublime

Answer 3

这里是一个..只需将这个PHP脚本放在HTML文件旁边，编辑可编辑区域并运行它，它将为您提供HTML页面的快速编辑器。

要保存更改-向下滚动到底部，然后单击红色按钮！

<?php
    /* BEGIN EDITING */
    define("EDITED_FILE", "YOUR_HTML_FILE");    // HTML file to edit here
    define("USERNAME", "DESIRED_USERNAME");     // Login username
    define("PASSWORD", "DESIRED_PASSWORD");     // Login password
    /* END EDITING */

    define("CURRENT_SCRIPT", $_SERVER['PHP_SELF']);

    if ($_POST['user'] == USERNAME && $_POST['pass'] == PASSWORD) exit(file_get_contents(EDITED_FILE));
    elseif (isset($_GET['update'])) {
        $fp = fopen(EDITED_FILE, 'w');
        $post = preg_replace('#(<br><center>).*?(</script>)#', '', $_POST['update']);
        fwrite($fp, $post);
        fclose($fp);
    }
    else {
?>
<html>
    <head>
        <script src="js/jquery.min.js"></script>
    </head>
    <body>
        <input type="text" placeholder="Username" id="user" />
        <input type="password" placeholder="Password" id="pass" />
        <input type="button" value="Log In!" id="login" />
        <div></div>
        <script>
            $("#login").click(function() {
                $.post("<?=CURRENT_SCRIPT?>", {user: $("#user").val(), pass: $("#pass").val()}).done(function(data) {
                    if (data) {
                        var addition = '<br/><center><input type="button" value="Save Changes" onclick="saveEdits()" style="width: 350px; background-color: red; color: white" /><br/><div id="update" style="color: red"></div></center><br/>    <script>function saveEdits() {var updatedContent = '+"'"+'<!DOCTYPE html><html lang="en" dir="rtl">'+"'"+'+$("html").html()+"<html>";$.post("<?=CURRENT_SCRIPT?>?update", {update: updatedContent}).done(function(data) {$("#update").html("Edits saved!");});}</script';
                        addition += '>';
                        document.write(data+addition);
                        $("html").attr("contenteditable","true");
                    }
                    else $("div").html("Please try again!")
                });
            });
        </script>
    </body>
</html>
<?php
    }
?>

简单HTML页面的HTML编辑器

3 个答案: