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');