在近期的一个项目中,需要使用一个可视化编辑器编辑文章内容,本文简要介绍了如何在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');
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。