Question

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

我发现的所有内容都类似于TinyMCE，虽然很好，但是没有开箱即用的功能。最好的解决方案是下载eidtor，我应该将其上传到服务器上才能工作。预先非常感谢。

Answer 1

从-下载所见即所得编辑器- 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>

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

Answer 2

我找到了Ace和ICECoder，但我自己从未使用过。我确定还有更多，搜索不彻底。

大多数HTML编辑器（包括TinyMCE）都可以选择编辑HTML源代码。此处的优点是您可以编辑源代码，但也可以在呈现的HTML中查看这些编辑的结果。

用于php / html的静态静态页面的wysiwyg编辑器

2 个答案: