转载

Jade结合CKEditor进行可视化编辑

在近期的一个项目中，需要使用一个可视化编辑器编辑文章内容，本文简要介绍了如何在Express.js的Jade模板中使用CKEditor进行可视化编辑。

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

加载CKEditor的js文件
激活要使用编辑器的Textarea元素
将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');

原文 https://segmentfault.com/a/1190000005269103

正文到此结束