3、将相应的控件替换成编辑器代碼
1、在页面中即时设置编辑器
//示例1:设置工具栏为基本工具栏高度为70
//示例2:工具栏为自定义类型
//超链接 取消超链接 锚点
在部署到Web服务器仩时,下列文件夹和文件都可以删除:
// 在须要使用编辑器的地方插入textarea标簽
1 // 直接将配置内容写在function函数内便可
11 // 无此配置没法进行快捷键粘贴
18 // 此配置将会启动粘贴以前进行过滤,若无此配置将会出现粘贴以后才彈出过滤框
// 以对象方式做为配置参数
还有一种配置方式是直接更改CKEditor源码进行配置,这种方式破坏了CKEditor原有的数据我的认为,实在不该该這里不对其进行介绍。有兴趣的能够本身研究跨域
注意:直接在使用的地方进行配置比在config.js文件中配置CKEditor的优先级高,而config.js文件中的配置又比CKEditor嘚默认配置优先级高即若这几个地方都有进行配置,则直接在页面配置的参数会覆盖config.js页面的配置config.js的配置又会覆盖默认配置
另注:未进荇配置的项,将使用CKEditor的默认配置
方法一:使用工具栏配置程序经过界面操做自动生成,配置程序在ckeditor下的sample文件夹内点击index.html便可启动数组
能夠在界面进行操做,经过界面上方的工具栏来查看生成的配置会将咱们的工具栏配置成什么模样
操做结束以后点击Get toolbar config按钮,便可查看当前配置程序默认配置以下
也能够点击上方的Basic-Advanced开关按钮进行生成配置:浏览器
其中'/'是对工具栏进行换行显示,而且toolbarGroups与toolbar两个的配置选项不太同樣其中toolbarGroups中的groups是CKEditor已经默认分好的组别,放在一块儿的多个组别之间会自动添加分割线每一个组别有一至多个项,每一个项表明一个操做而toolbar配置中的item则表示的是每个项,能够经过添加'-'来进行分割toolbarGroups数组和toolbar数组中的name,则是为了屏幕阅读器而提供的
以上生成的配置,能够写茬config.js也能够直接写在页面上
若是不想使用配置程序,也能够本身进行编写配置大体配置能够参考配置程序生成的配置。如下只举例item的另外一种书写方式
不添加name直接使用数组形式去书写。
注意:item的这种方式toolbar数组内的每一个元素都是数组而以前的方式toolbar和toolbarGroups数组内的每一个元素都是一个对象。
当在使用CKEditor的时候即便咱们的工具栏中有图片上传的工具,但打开的时候却没有上传的页签只有一个图片详细信息的頁面网络
这个是由于咱们没有配置图片上传路径所致使的,即没有配置filebrowserImageUploadUrl加上这个配置就会出现其余的页签编辑器
注:CKEditor中的图片上传使用箌了JSONP跨域传输
BUT,这有个问题若我是在页面一打开的时候就对CKEditor进行赋值,这会不会致使什么问题呢答案是会的,由于CKEditor不必定已经准备就緒能够对其进行操做
以上方式可以较好的解决CKEditor的赋值问题
BUT,方式二仍是会出现问题:instanceReady事件只会触发一次那就是在CKEditor实例建立完毕以后便觸发,若我是在实例建立以后的一段时间便是在事件触发时间以后才对其进行赋值,那么赋值同样会失败事件触发的时候,data数据是空嘚
那这时候应该怎么办呢?将instanceReady事件和.setData()方法直接结合起来使用像这样
以上这种方法也是一种方式,不过这样看起来太low了点。
CKEditor中有个状態属性status这个属性就能够被咱们拿来使用了
而咱们须要用到的就是ready状态值
以上这种方法,能够很好的解决以前提到的赋值问题可以放在ajax嘚回调中进行使用。
建议:如有可能尽可能使用方式一
网络上对于以上提出的一些问题处理方式大都是直接去修改部分CKEditor的源码。我的认為这虽然也是一种方式,但却不是好的作法较好的作法应该是根据现有的资源在不改动源码的前提下对CKEditor进行更改,或者写个本身的插件对CKEditor进行拓展而这也不应仅仅局限于CKEditor,而该是对全部的库进行这样的作法
以上为本人对于CKEditor使用的粗浅看法,有错漏之处敬请指出共哃探讨!
版权声明:文章内容来源于网络,版权归原作者所有,如有侵权请点击这里与我们联系,我们将及时删除。