php/html 实时静态页面的所见即所得编辑器

Question

我正在谷歌搜索所见即所得编辑器，但我需要这种行为 - 我有静态文件 index.html、aboutus.html 等。我想在我的网站上上传编辑器 php服务器，当我打开编辑器时，它应该将 index.html 加载到编辑器（整个页面）中，我应该能够更改其中的文本和其他元素，然后将其保存回 index.html。我正在寻找类似 MS FrontPage 的东西，但用于网络，所以我不需要先将文件下载到计算机，进行更改然后再上传，而是直接在网络浏览器中对我的网络服务器上的文件进行所有更改。

我发现的一切都像 TinyMCE，它很好但没有开箱即用的功能。最好的解决方案是可下载的 eidtor，我应该将其上传到我的服务器即可使用。非常感谢。

Answer 1

我找到了 Ace and ICECoder，但我自己从未使用过它们。我敢肯定还有更多，我的搜索并不彻底。

大多数 HTML 编辑器，包括 TinyMCE，都可以选择编辑 HTML 源代码。这里的进步是您可以编辑源代码，还可以在呈现的 HTML.

中查看这些编辑的结果。

Answer 2

从 - 下载所见即所得的编辑器 https://www.froala.com/wysiwyg-editor/download。

将下载的文件夹重命名为'froala_editor'并添加到项目中。

创建文件调用 edit_page.php 并添加到您的项目中。

我在代码中的注释中提到的所有细节。

完成 edit_page.php 代码。

   <!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">

  <!-- Include the css of plugin which is required like draggable, paragraph_format, emoticons etc-->
  <link rel="stylesheet" href="froala_editor/css/froala_editor.css">
  <style>
    body {
      text-align: center;
    }

    div#editor {
      width: 81%;
      margin: auto;
      text-align: left;
    }

    .ss {
      background-color: red;
    }
  </style>
</head>

<body>

<?php
/*** Get the page to edit from url. url structure will be like - /edit_page.php?page=index*/
if(isset($_GET['page'])){
    //Get the page name like aboutus, index from url
    $page = $_GET['page'];
}


/*** Update the page content */
if(isset($_POST["action"])&&($_POST["action"]=="Update")){  
 $page_content = $_POST['page_content'];

  /*After click on update buttop save the update content in page.
   if your file in other directory call that file with directory name
   file_put_contents("directory-name/$page.html", $page_content);
  */
  file_put_contents("$page.html", $page_content);
}

?>
  <div id="editor">
    <form method="POST" name="correspond_form" id="correspond_formJoin">
        <textarea id='edit' name="page_content" style="margin-top: 30px;">
          <?php 
          /*Get the content of index.html or  aboutus and put in textarea
           if your file in other directory call that file with directory name like- directory-name/$page.html
          */
          echo file_get_contents("$page.html");


          ?>
        </textarea>
        <input type="submit" name="action" value="Update"></td>
    </form>

 <!-- Include the plugin which is required like draggable, paragraph_format, emoticons etc-->
  <script type="text/javascript" src="froala_editor/js/froala_editor.min.js"></script>


  <script>
    (function () {
        //Apply the editor textarea (#edit)
      new FroalaEditor("#edit")
    })()
  </script>
</body>

</html>

注意 - 您可以对任何类型的编辑器执行上述步骤。

php/html 实时静态页面的所见即所得编辑器

wysiwyg editor for php/html for live static page

php

html

wysiwyg