EQQ.jp

Index

ブラウザでのファイル編集

 

概要

ブラウザでサーバ上のテキストファイルを編集する機能を実現します。

編集機能をよりリッチにするため、TinyMCE、CKEditor、CodeMirror のいずれか一つと組み合わせ方法を示します。

サーバでは、http サーバと php が利用できることが条件です。

 

テキストファイルの表示

まず、サーバ上のファイル “text.txt” をブラウザで表示してみます。
http サーバ上に、以下の内容の php のファイルを用意して下さい。 

<html>
<body>
<?php
  $filename = "test.txt";

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>

</body>
</html>

このファイルにブラウザでアクセスすると、$filename で指定されたファイルを読み込み、その内容を textarea に表示します。

 

保存ボタンの設置

ブラウザでテキストを編集した後、サーバ上のファイルを更新したいので、Save ボタンを付けます。

Save ボタンは、textarea とフォームを組んで、設置します。
php ファイルの内容は以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

</body>
</html>

このままでは、Save ボタンを押しても何も起こりません。

 

保存処理

先ほど設置した Save ボタンが押されると、ブラウザで編集した内容がサーバに送信され、ファイルが更新されるように php プログラムを組み込みます。

php ファイルの内容は以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  if(isset($_POST['editarea'])) {
    $contents = $_POST['editarea'];
    $fp = fopen($filename, 'w');
    if($fp) {
      fwrite($fp, $contents);
      fclose($fp);
    }
  }

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

</body>
</html>

ブラウザで表示されているテキストを編集して、Save ボタンを押してみて下さい。

プログラムがうまく動作すると、サーバ上の test.txt ファイルは更新されます。

Edit textarea

 

よりリッチな編集機能

上述した textarea でも、テキストファイルの編集はできるのですが、よりリッチな編集機能を求めて、公開されているライブラリと組み合わせてみます。

TinyMCE と CKEditor は、HTML 編集に、CodeMirror は、プログラム編集に向いていると思います。

大体どのライブラリでも、form の後に、スクリプトを置けば組み込むことができます。

 

TinyMCE

textarea を TinyMCE に変更してみます。

TinyMCE と組み合わせた場合の php ファイルの内容は、以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  if(isset($_POST['editarea'])) {
    $contents = $_POST['editarea'];
    $fp = fopen($filename, 'w');
    if($fp) {
      fwrite($fp, $contents);
      fclose($fp);
    }
  }

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

  <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
  <script>tinymce.init({ selector:'textarea' });</script>

</body>
</html>

Edit tinymce

 

CKEditor4

CKEditor 4 と組み合わせた場合の php ファイルの内容は、以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  if(isset($_POST['editarea'])) {
    $contents = $_POST['editarea'];
    $fp = fopen($filename, 'w');
    if($fp) {
      fwrite($fp, $contents);
      fclose($fp);
    }
  }

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

  <script src="https://cdn.ckeditor.com/4.11.1/standard/ckeditor.js"></script>
  <script>
    CKEDITOR.replace( 'editarea' );
  </script>

</body>
</html>

Edit ckeditor4

 

CKEditor5

CKEditor 5 と組み合わせた場合の php ファイルの内容は、以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  if(isset($_POST['editarea'])) {
    $contents = $_POST['editarea'];
    $fp = fopen($filename, 'w');
    if($fp) {
      fwrite($fp, $contents);
      fclose($fp);
    }
  }

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

  <script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>
  <script>
    ClassicEditor
      .create( document.querySelector( '#editarea' ) )
      .catch( error => { console.error( error ) } );
  </script>

</body>
</html>

Edit ckeditor5

 

CodeMirror

CodeMirror は、ウェブ上で展開して公開しているところがよくわからなかったので、CodeMirror のサイトからダウンロードして、サーバ上に展開して利用してます。

CodeMirror と組み合わせた場合の php ファイルの内容は、以下のようになります。 

<html>
<body>
<?php
  $filename = "test.txt";

  if(isset($_POST['editarea'])) {
    $contents = $_POST['editarea'];
    $fp = fopen($filename, 'w');
    if($fp) {
      fwrite($fp, $contents);
      fclose($fp);
    }
  }

  $contents = file_get_contents($filename);
  if($contents !== false) {
    $contents = htmlspecialchars($contents);
  } else {
    $contents = 'Faile to open ' . $filename;
  }
?>

  <form method="post">
    <input type="submit" value="Save" />
    <p>
    <textarea id="editarea" name="editarea" style="width:100%; height:90%;"><?php echo $contents; ?></textarea>
  </form>

  <link rel="stylesheet" href="codemirror/lib/codemirror.css">
  <script src="codemirror/lib/codemirror.js"></script>
  <script>
    var editor = CodeMirror.fromTextArea(document.getElementById("editarea"), {
      lineNumbers: true
    });
  </script>

</body>
</html>

Edit codemirror

例題を簡単にするため、どのエディタも、ベースの部分しか利用していません。

本当は、いろいろな機能を内在していて、もっとかっこよくなるので試してみて下さい。