6-2 templates/post_form.tpl

<style>
  .ck-editor__editable{
    min-height: 8rem;
  }
</style>
<h2 class="text-primary text-center">發布代辦事項</h2>
<form action="{$action}" method="post" role="form">
    <!-- 待辦事項：文字框 -->
    <div class="row mb-3">
      <label for="title" class="col-sm-2 col-form-label text-end">待辦事項</label>
      <div class="col-sm-10">
        <input type="text" class="form-control" id="title" name='title' placeholder="字數 2 ~ 20" value="{$content.title}" required  pattern="{literal}[\u4E00-\u9FFFa-zA-Z0-9_]{2,20}{/literal}" minlength="2" maxlength="20">
      </div>
    </div>

    <!-- 描述：大量文字 -->
    <div class="row mb-3">
        <label for="directions" class="col-sm-2 col-form-label text-end">描述</label>
        <div class="col-sm-10">
            <textarea  class="form-control" name="directions" id="editor">{$content.directions}</textarea>
        </div>
    </div>
    <!-- 日期 -->
    <div class="row mb-3">
        <label for="end" class="col-sm-2 col-form-label text-end">到期日</label>
        <div class="col-sm-6">
          <input type="date" class="form-control" id="end" name="end" value='{$content.end}' required  min="{$now}" max="2022-12-31">
        </div>
    </div>
    <!-- 優先順序：下拉選單 b5-form-input-select-->
    <div class="row mb-3">
        <label for="priority" class="col-sm-2 col-form-label text-end">優先順序</label>
        <div class="col-sm-6">
          <select class="form-select" aria-label="priority" name='priority'>
            <option value="高" {if $content.priority=='高'}selected{/if}>高</option>
            <option value="中" {if $content.priority=='中'}selected{/if}>中</option>
            <option value="低" {if $content.priority=='低'}selected{/if}>低</option>
          </select>
        </div>
    </div>
    <!-- 指派對象：複選框 b5-form-check-inline-->
    <div class="row mb-3">
        <label for="assign" class="col-sm-2 col-form-label text-end">指派對象</label>
        <div class="col-sm-10 pt-2">

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="assign1" name="assign[]" value="李大頭" {if '李大頭'|in_array:$content.assign}checked{/if}>
            <label class="form-check-label" for="assign1">李大頭</label>
          </div>

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="assign2" name="assign[]" value="吳大大" {if '吳大大'|in_array:$content.assign}checked{/if}>
            <label class="form-check-label" for="assign2">吳大大</label>
          </div>

          <div class="form-check form-check-inline">
            <input class="form-check-input" type="checkbox" id="assign3" name="assign[]" value="郭大大" {if '郭大大'|in_array:$content.assign}checked{/if}>
            <label class="form-check-label" for="assign3">郭大大</label>
          </div>
        </div>
    </div>
    <!-- 是否完成：單選框 b5-form-radio-->
    <div class="row mb-3">
        <label for="done" class="col-sm-2 col-form-label text-end">是否完成</label>
        <div class="col-sm-10 pt-2">
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="done" id="done1" value="1"  {if $content.done=='1'}checked{/if}>
            <label class="form-check-label" for="done">是</label>
          </div>
          <div class="form-check form-check-inline">
            <input class="form-check-input" type="radio" name="done" id="done2" value="0"  {if $content.done=='0'}checked{/if}>
            <label class="form-check-label" for="done">否</label>
          </div>
        </div>
    </div>
    <div class="text-center">
        <!-- 儲存　input:submit -->
        <input type="submit" value="儲存"　name='send' class='btn btn-primary'>
        <input type="hidden" name='op' value='{$next_op}'>
        <input type="hidden" name='sn' value='{$content.sn}'>
    </div>
</form>
<script src="/class/ckeditor5/build/ckeditor.js"></script>
<script>ClassicEditor
    .create( document.querySelector( '#editor' ), {

      toolbar: {
        items: [
          'heading',
          '|',
          'bold',
          'underline',
          'italic',
          'link',
          'bulletedList',
          'numberedList',
          '|',
          'alignment',
          'outdent',
          'indent',
          '|',
          'imageUpload',
          'blockQuote',
          'insertTable',
          'mediaEmbed',
          'undo',
          'redo',
          'fontBackgroundColor',
          'fontColor',
          'fontSize',
          'fontFamily',
          'highlight',
          'horizontalLine'
        ]
      },
      language: 'zh',
      image: {
        toolbar: [
          'imageTextAlternative',
          'imageStyle:full',
          'imageStyle:side'
        ]
      },
      table: {
        contentToolbar: [
          'tableColumn',
          'tableRow',
          'mergeTableCells',
          'tableCellProperties',
          'tableProperties'
        ]
      },
      licenseKey: '',
    } )
    .then( editor => {
      window.editor = editor;
    } )
    .catch( error => {
      console.error( 'Oops, something went wrong!' );
      console.error( 'Please, report the following error on https://github.com/ckeditor/ckeditor5/issues with the build id and the error stack trace:' );
      console.warn( 'Build id: oyenza1fbbn7-i3hxq5razg8s' );
      console.error( error );
    } );
</script>