ckeditor

1. 官網：https://ckeditor.com/ckeditor-4/
2. 安裝：

<!-- ckeditor -->
<script src="https://cdn.ckeditor.com/4.16.1/full/ckeditor.js"></script>
<script>  
  // CKEDITOR.config.allowedContent=true;
  CKEDITOR.config.allowedContent=false;//開啟 CKEDITOR.editor.filter
  CKEDITOR.config.extraAllowedContent='iframe';//允許 iframe
  CKEDITOR.config.contentsCss='https://cdn.jsdelivr.net/npm/bootstrap@5.3.1/dist/css/bootstrap.min.css';//引入bootstrap CSS
  CKEDITOR.plugins.addExternal("codesnippet", "https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.16.1/plugins/codesnippet/plugin.js", "");//插入程式碼片段
</script>

3. 樣版判斷

      <? }else if(stru[i].form_kind == '網頁編輯器'){ ?>
        <div class="col-md-<?= stru[i].form_width ?> mb-3">
          <label><?= stru[i].form_label ?><? if(stru[i].form_validate.split('|').indexOf('必填') != -1){ ?><span class="text-danger"> *</span><? } ?><? if(stru[i].form_readme){ ?><span class="text-danger"> (<?= stru[i].form_readme ?>)</span><? }?></label>
          <textarea class="form-control" name="<?= stru[i].form_name ?>" id="<?= stru[i].form_name ?>" rows="3" placeholder="<?= stru[i].form_placeholder ?>"><?= row[stru[i].form_name] ?></textarea>
          <!-- ckeditor start-->
          <script>
            CKEDITOR.replace('<?= stru[i].form_name ?>', {
              extraPlugins: "codesnippet",
              codeSnippet_theme: "solarized_dark"
              });
          </script>
          <!-- ckeditor end-->
        </div>

4. 取值

   
      <? }else if(stru[i].form_kind == "網頁編輯器"){ ?>         
        formData[<?= stru[i].form_name ?>] = CKEDITOR['instances']["<?= stru[i].form_name ?>"].getData();//"content<?= i; ?>"