CKEditor：網頁文字編輯器

【使用方法】
下載相關檔案放到 ckeditor 目錄中，引用 ckeditor.js。
https://ckeditor.com/ckeditor-4/download/

<script src="/ckeditor/ckeditor.js"></script>

<textarea name="editor1" id="editor1">......</textarea>

<script>
    CKEDITOR.replace( 'editor1' );
</script>

 

---

【取得資料的方式】
JavaScript

<script>
    var data = CKEDITOR.instances.editor1.getData();
</script>

PHP

<?php
    $editor_data = $_POST[ 'editor1' ];
?>

ASP.NET

Request.Unvalidated.Form["editor1"];

 

---

【載入資料的方式】

<script>
    CKEDITOR.instances.editor1.setData( text, function()
    {
        this.checkDirty();  // true
    });
</script>

<script>
    $('#editor1').html(text);
</script>

ASP.NET，可透過 hidden 傳給前端。(ValidateRequestMode="Disabled")

<input="hidden" id="hid01" runat="server" />

//hid01.Value = System.Net.WebUtility.HtmlEncode(text);
hid01.Value = text;

Label1.Text = @"
    <script>
        $('#editor1').html(document.getElementById('" + hid01.ClientID + "').value);
    </script>
";

 

---

【官網文件】
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_savedata.html
【簡介文章】
https://www.wfublog.com/2017/11/web-wysiwyg-text-editor-ckeditor.html
【PHP範例】
https://pjchender.blogspot.com/2015/11/ckeditor.html
【調教】
https://blog.user.today/setting-ckeditor/