博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用ckeditor实现在线文本编辑功能(图文+源码)①
阅读量:6708 次
发布时间:2019-06-25

本文共 1352 字,大约阅读时间需要 4 分钟。

  1. 从官网最新版的,目前最新版本为Version 4.3.1。

  2. 将下载下来的压缩包解压缩后,将文件拷贝到项目的WebContent根目录下,启动服务器,如果能通过服务器地址访问\ckeditor\samples下的例子,则证明CKEditor安装成功。

  3. 参照\ckeditor\samples\目录下的replacebyclass.html例子,将以下代码拷贝到需要需要显示文本编辑器的地方。

  4. 在该JSP页面的Header处,引入\ckeditor\ ckeditor.js文件。

  5. \ckeditor\samples\ sample.css文件中,将文本编辑器部分的样式提取出来,放到单独的CSS文件(如blog_ckeditor.css)中,并在页面的Header中引入。

注:请不要直接使用sample.css文件,以防止该文件中的样式与现有系统的样式表冲突。

/** *  CKEditor editables are automatically set with the "cke_editable" class *  plus cke_editable_(inline|themed) depending on the editor type. *//* Style a bit the inline editables. */.cke_editable.cke_editable_inline{    cursor: pointer;}/* Once an editable element gets focused, the "cke_focus" class is   added to it, so we can style it differently. */.cke_editable.cke_editable_inline.cke_focus{    box-shadow: inset 0px 0px 20px 3px #ddd, inset 0 0 1px #000;    outline: none;    background: #eee;    cursor: text;}/* Avoid pre-formatted overflows inline editable. */.cke_editable_inline pre{    white-space: pre-wrap;    word-wrap: break-word;}.cke_contents_ltr blockquote{    padding-left: 20px;    padding-right: 8px;    border-left-width: 5px;}.cke_contents_rtl blockquote{    padding-left: 8px;    padding-right: 20px;    border-right-width: 5px;}

  6. 配置改页面的Action,并将提交方法设置为Post格式提交,至此你就可以在你的页面中展示CKEditor的强大功能了。

转载地址:http://kmnlo.baihongyu.com/

你可能感兴趣的文章
《机器人自动化:建模、仿真与控制》——1.5 习题解答
查看>>
积水成渊——数据中心用水效率分析
查看>>
重新定义云数据库 阿里云POLARDB 9月21日发布
查看>>
物联网安全威胁剧增 如何拓展移动化能力
查看>>
工业物联网:创造价值 转换业务模式
查看>>
思科若要加入超融合大战:需启用你的现金
查看>>
程序员如何既不耽误工作又有时间干业余项目?
查看>>
王胤:我是怎么把体温计变成助孕计的
查看>>
Linux下如何定制SSH来简化远程访问
查看>>
空与非空 EMPTY_LOB和NULL的区别
查看>>
未来的主角是公有云还是私有云?哪些云安全企业能在行业洗牌中脱颖而出
查看>>
可能吞噬硬件的无服务器云
查看>>
如何自行搭建一个威胁感知大脑 SIEM?| 硬创公开课
查看>>
安全圈老司机为什么会在这个游戏里翻车?(内附详细解谜攻略)
查看>>
大数据将带来哪些“健康红利”?
查看>>
技术派的梦想旅行,用大数据推动旅游2.0时代到来
查看>>
高校 WiFi 9 大谬论
查看>>
CyrusOne计划在美国德克萨斯建设大型数据中心园区
查看>>
暴风热点 要的不仅仅是免费WIFI
查看>>
MSR路由器的未来之路
查看>>