动态静态页面php/html所见即所得编辑器_Php_Html_Wysiwyg

动态静态页面php/html所见即所得编辑器

php html

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

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

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

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

大多数HTML编辑器（包括）都有编辑HTML源代码的选项。这里的优势在于，您可以编辑源代码，但也可以在呈现的HTML中查看这些编辑的结果。

从下载所见即所得编辑器- .
将下载的文件夹重命名为“froala_编辑器”并添加到项目中
创建一个文件调用edit_page.php并添加到项目中
我在代码注释中提到的所有细节

完成编辑页面.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>


身体{
文本对齐：居中；
}
编辑部{
宽度：81%；
保证金：自动；
文本对齐：左对齐；
}
.ss{
背景色：红色；
}
（功能（）{
//应用编辑器文本区域（#编辑）
新的FroalaEditor（“编辑”）
})()

注意-对于任何类型的编辑器，您都可以按照上述步骤操作。

太棒了，太酷了！这是我需要的完美开始。但它会剥离头部和其他html部分，只在body标记中留下内容。但我将尝试以某种方式覆盖它，以保留最初格式化的html文档。（我用同样的行为试过tinyMCE）