[網頁技巧學習筆記]CKEditor套用在PHP @ Michael_Jheng的部落格

CKEditor是一個專門在網頁上使用的開放原始碼之文字編輯器,不需要太複雜的安裝步驟即可使用可和PHP、JavaScript、ASP、ASP.NET、ColdFusion、Java、以及ABAP等不同的程式語言相結合

點擊下方CKEditor官方網站連結進入

這裡選擇下載Full Package,如果要選擇下載Customize,相關操作步驟可以參考[Vue.js教學筆記]CKEditor套入Webpack模組整合工具

下載完明顯發現CKEditor不斷的改版,現在是4.10.1版

本人要使用Docker這套軟體來完成,各位可以參考[Docker學習筆記]Apache-php5.6與Mariadb安裝,來完成相關架設,先在\Kitematic\apache-php56\var\www路徑下新增ckeditor-use-php資料夾,再把ckeditor_4.10.1_full.zip解壓縮至\Kitematic\apache-php56\var\www\ckeditor-use-php路徑下,如下所示,

在此資料夾下增加index.html,撰寫程式如下,

<!DOCTYPE html>
<html>
   <head>
       <meta charset="utf-8">
       <title>ckeditor</title>
       <script src="ckeditor/ckeditor.js"></script>

   </head>
   <body>
       <form action="content.php" method="post">
           <textarea id="content" name="content" rows="10" cols="80"></textarea>
       　<input type="submit" value="送出表單">
       </form>
   </body>
</html>

到路徑\Kitematic\apache-php56\var\www\ckeditor-use-php\ckeditor,打開config.js,在CKEDITOR.editorConfig = function( config )方法下新增以下程式,

   config.toolbar = [
       {items:[ 'Source', '-', 'Save', 'NewPage', 'Preview', 'Print', '-', 'Templates' ]},
       {items:[ 'Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', '-', 'Undo', 'Redo' ]},
       {items:[ 'Find', 'Replace', '-', 'SelectAll', '-', 'Scayt' ]},
       {items:[ 'Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField' ]},
       {items:[ 'Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript', '-', 'CopyFormatting', 'RemoveFormat' ]},
       {items:[ 'NumberedList', 'BulletedList', '-', 'Outdent', 'Indent', '-', 'Blockquote', 'CreateDiv', '-', 'JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock', '-', 'BidiLtr', 'BidiRtl', 'Language' ]},
       {items:[ 'Link', 'Unlink', 'Anchor' ]},
       {items:[ 'Image', 'Flash', 'Youtube', 'Table', 'HorizontalRule', 'Smiley', 'SpecialChar', 'PageBreak', 'Iframe' ]},
       {items:[ 'Styles', 'Format', 'Font', 'FontSize' ]},
       {items:[ 'TextColor', 'BGColor' ]},
       {items:[ 'Maximize', 'ShowBlocks' ]},
       {items:[ 'About' ]}
   ];

打開Docker,啟動apache-php56,開啟網頁,如下所示,

接下來啟動資料庫mariadb,建立儲存此內容的資料表,步驟如下,

1. 點擊EXEC

輸入指令
mysql -u root -p
再輸入密碼即可進行Mariadb

輸入以下指令,可看到目前的資料庫,
show databases;

輸入指令使用mysql
use mysql;

創造content_table,以及此table下的各個項目,輸入指令,

create table content_table(
id int NOT NULL AUTO_INCREMENT,
content text,
createtime timestamp,
primary key (id)
);

可以輸入指令查詢建立好的table裝況,
show columns from content_table from mysql;

建立好就可以離開,輸入指令
exit;

在路徑\Kitematic\apache-php56\var\www\ckeditor-use-php,新增content.php,程式如下,

<?PHP

$content = $_POST['content'];

   header('Content-Type:text/html;charset=utf8');
   /* 與資料庫連結 */
   $host = '192.168.99.100';
   $name = "root";
   $password = "091234765";
   $mysql = 'mysql';
   $dsn = "mysql:host=$host;dbname=$mysql";
   $pdo = new PDO($dsn, $name, $password);
   $pdo->query("SET NAMES 'utf8'");

   /* 新增content_table資料 */
   if(!$pdo){
       echo $pdo->errorCode();
   }else{
       $count = $pdo->exec("insert into content_table(content) values ('$content')");
   }

   /* 查詢content_table資料 */
   $result = $pdo->query("SELECT * FROM content_table");
   $statement = $result->fetchAll();
   foreach($statement as $row){
       echo $row['id']." ".$row['content']. " ".$row['createtime']."<br>";
   }

   $pdo = null;
?>

完成後進行測試如下,