Редактор wysiwyg для php / html для живой статической страницы - PullRequest
Новая
       17

Редактор wysiwyg для php / html для живой статической страницы

0 голосов
/ 18 июня 2019

Я ищу Google WYSIWYG-редактор, но мне нужно это поведение - у меня есть статические файлы index.html, aboutus.html и т. Д. Я хотел бы загрузить редактор на моем веб-сервере php, и когда я открываю редактор, он должен загрузитьindex.html в редактор (вся страница), и я должен иметь возможность изменить текст в нем и других элементах, а затем сохранить его обратно в index.html.Я ищу что-то вроде MS FrontPage, но для Интернета, поэтому мне не нужно сначала загружать файл на компьютер, вносить изменения и загружать его обратно, а вносить все изменения непосредственно в веб-браузер для файлов на моем веб-сервере.

Все, что я нашел, было похоже на TinyMCE, который хорош, но не имеет этой возможности из коробки.Лучшим решением будет загружаемый eidtor, и я должен просто загрузить его на свой сервер для работы.Большое спасибо заранее.

Ответы [ 2 ]

1 голос
/ 18 июня 2019

  • Загрузите редактор wysiwyg из - 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>

Примечание. Вы можете выполнить вышеуказанный шаг для любого редактора.

0 голосов
/ 18 июня 2019

Я нашел Ace и ICECoder , но никогда не использовал их сам. Я уверен, что есть больше, мой поиск не был тщательным.

Большинство редакторов HTML, включая TinyMCE , имеют возможность редактировать исходный код HTML. Преимущество здесь заключается в том, что вы можете редактировать исходный код, но также видеть, что результат этих изменений находится в визуализированном HTML.

...