最近项目中需要开发一个问卷调查的模块,于是参考腾讯问卷使用ckeditor,该编辑器最大的优点就是可以使用行内模式(inline)。
根据官网的指引,将完整的项目包下到本地后,就可以在项目中使用了。
在项目中引入ckeditor.js即可立即使用。当然,需要在被替换的div上加上contenteditable="true"属性,该属性可以让当前dom元素可编辑。然后刷新页面,你就会发现div上方会出现toolbar工具栏。
此时会发现默认展示所有的工具,但这并不是我们想要的,因为实在太多了。这就需要我们定制config.js文件。在下载下来的插件目录中有一个index.html文件,进入根据页面提示就可以定制需要的配置文件。我的配置文件是这样的://定制工具栏,包括加粗、斜体、下划线、中划线、字体颜色、背景颜色、图片上传和超链接。CKEDITOR.editorConfig = function( config ) {
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker', 'editing' ] },
{ name: 'forms', groups: [ 'forms'