Jade結合CKEditor進行可視化編輯

在近期的一個項目中，須要使用一個可視化編輯器編輯文章內容，本文簡要介紹瞭如何在Express.js的Jade模板中使用CKEditor進行可視化編輯。

嵌入的過程主要分3部分：

1. 加載CKEditor的js文件

2. 激活要使用編輯器的Textarea元素

3. 將Textarea元素綁定變量（可選）

加載CKEditor

在Jade文件中經過script加載JS文件，將下述代碼添加到Jade文件中：

script(src='//cdn.ckeditor.com/4.5.9/standard/ckeditor.js')

上面採用了cdn格式的引用，也能夠將最新的ckeditor文件下載到public文件夾下，經過相對路徑進行引用。

激活要使用編輯器的元素

在Jade文件中，經過添加下述代碼實現對textarea元素的可視化編輯：

script.
  CKEDITOR.replace('content');

上述設置中，content爲textarea的name屬性，或者是id屬性。

將Textarea綁定變量（可選）

.form-group
  label 內容
  textarea.form-control(id='content', name='content', required)
    | #{post.content}

上述代碼中的post.content爲controller中傳送過來的對象。經過| #{post.content}便可將對象與編輯器進行綁定。

完整的示例代碼

extends ../layout
include ../_includes/share

block content
  h1= editType
  .row
    .col-md-6
      form(action="#{postUrl}", method="post")
        input( type="hidden", name="_id", value=post._id )
        .form-group
          label( for="title" ) 標題
          input#title.form-control(type="text", name="title", value=post.title)
          p.help-block 請輸入週報的標題
        .form-group
          label( for="path" ) 惟一路徑
          input#path.form-control(type="text", name="path", value=post.path)
          p.help-block 本Post的惟一路徑,由英文字母或數字組成,將用於/post/path訪問.
        .form-group
          label 內容
          textarea.form-control(id='content', name='content', required)
            | #{post.content}
        button.btn.btn-primary( type="submit" ) #{editType}

  script(src='//cdn.ckeditor.com/4.5.9/standard/ckeditor.js')
  script.
    CKEDITOR.replace('content');