文档章节

j2ee 简单网站搭建:(十一)ckeditor 控件使用入门

b
 binux
发布于 2017/08/29 19:02
字数 728
阅读 60
收藏 1
点赞 0
评论 0

《j2ee 简单网站搭建:(一) windows 操作系统下使用 eclipse 建立 maven web 项目》
《j2ee 简单网站搭建:(二)添加和配置 spring + spring-mvc 的 mvc 开发环境》
《j2ee 简单网站搭建:(三)在搭建好的 spring maven web 项目中加入 mybatis 访问数据库》
《j2ee 简单网站搭建:(四)将 freemaker 模板引擎作为 spring-mvc 展现层》
《j2ee 简单网站搭建:(五)使用 jcaptcha 生成验证码图片》
《j2ee 简单网站搭建:(六)使用 hibernate validation 实现 domain 层实体类验证》
《j2ee 简单网站搭建:(七)使用 shiro 结合 jcaptcha 实现用户验证登录》
《j2ee 简单网站搭建:(八)使用 jquery-validate 实现页面验证入门》
《j2ee 简单网站搭建:(九)jquery datatables + jquery ui dialog 插件使用入门》
《j2ee 简单网站搭建:(十)jquery ztree 插件使用入门》
《j2ee 简单网站搭建:(十一)ckeditor 控件使用入门》

ckeditor 版本 4ckeditor 使用很简单,一般只要以下几步即可
  1) 引用 js 文件
  2) 在 html 页面中添加需要绑定 ckeditor 的 textarea 标签
  3) 对 ckeditor 进行设置,其中包括需要上传图片时的上传文件处理路径
  
以下为 html 中的示例代码片段

<!-- CKEditor 相关文件 -->
<script type="text/javascript" src="你的文件位置/ckeditor.js"></script>

<!-- Page-Level Demo Scripts - Tables - Use for reference -->
<script>
    // ckeditor 的绑定和初始化设置
    // 这里的 txt_content 是页面中绑定 ckeditor 的控件,filebrowserImageUploadUrl:'../picture_upload' 是上传图片的处理路径
    var editor = CKEDITOR.replace('txt_content', { filebrowserImageUploadUrl:'../picture_upload'});
    $(document).ready(function () {
       /* - ckeditor start - */

        // 1.form submit 必须放在 validate 之前
        // 2.在 jquery validate 的 rules 里面将 ignore设置为空
        // 3.在 form submit 时更新 ckeditor 的 instance
        // 4.更改 jquery validate 的 errorPlacement 让 label.error 显示在正确位置
        editor.on("instanceReady", function() {
            //set keyup event
            this.document.on("keyup", function() {
                CKEDITOR.tools.setTimeout( function() {
                    $("#txt_content").val(editor.getData());
                    $("#txt_content").trigger('keyup');
                }, 0);
            });
            //and paste event
            this.document.on("paste", function() {
                CKEDITOR.tools.setTimeout( function()
                {
                    $("#txt_content").val(editor.getData());
                    $("#txt_content").trigger('keyup');
                }, 0);
            });

        });
        $('#bt_submit').click(function() {
            if ($('#form_add').valid()) { // 除ztree外都验证通过
                if (zTree.getCheckedNodes(true).length < 1) { // ztree有选择
                    $('#b_categorytree_validate').remove();
                    $('#categorytree').after("<b id='b_categorytree_validate'>请选择文章类型</b>");
                }
                else { // 所有验证都通过,进行数据添加
                    $('#dlbox_add_confirm').dialog('open');    // 打开弹出框
                }
            }
        });

        $("#form_add").validate({ // 添加表单验证
            rules: { // 验证规则
                ipt_title: {required: true, minlength: 5}, // 必填长度至少5位
                txt_content: {required: true}
            },
            messages: { // 验证失败消息
                ipt_title: {required: "请输入标题", minlength: "标题长度不能小于5位"},
                txt_content: {required: "请输入文章内容"}
            },
            ignore: '', // 这个设置是关键
            errorPlacement: function(error, element) {
                if (element.attr('name') == 'txt_content') {
                    error.insertAfter($(element).parent().children().last());
                } else {
                    error.insertAfter(element);
                }
            }
        });
        /* - ckeditor end - */

    });

</script>

以下是服务端处理图片的代码片段

@RequestMapping(value = "/picture_upload", produces = "application/json;charset=UTF-8")
public void pictureUpload(@RequestParam("upload") MultipartFile file,
                          @RequestParam("CKEditorFuncNum") String CKEditorFuncNum,
                          HttpServletRequest request,
                          HttpServletResponse response) throws IOException {
    String serverImageDirectory = request.getSession().getServletContext().getRealPath(ConfigUtil.SERVER_IMAGE_DIRECTORY);
    String imageFileName = System.currentTimeMillis() + "_" + file.getOriginalFilename();
    PrintWriter out = response.getWriter();
    response.setContentType("text/html;charset=UTF-8");
    response.setHeader("X-Frame-Options", "SAMEORIGIN");

    out.println("<script type=\"text/javascript\">");

    try {
        File saveFile = new File(serverImageDirectory + imageFileName);
        File parentFile = saveFile.getParentFile();
        if (!parentFile.exists())
            parentFile.mkdir();
        file.transferTo(saveFile);
        out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",'" + ConfigUtil.SERVER_IMAGE_DIRECTORY + imageFileName + "', '');");
    }
    catch (Exception e){
        out.println("window.parent.CKEDITOR.tools.callFunction(" + CKEditorFuncNum
                + ",''," + "'图片上传失败!');");
    }

    out.println("</script>");
    out.flush();
}

 

© 著作权归作者所有

共有 人打赏支持
b
粉丝 1
博文 29
码字总数 49010
作品 0
兰州
程序员
CKEditor与 CKFinder 整合并实现文件上传功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder 在项目中我们使用了FckEditor,但最新又出来了个ckEditor,到官方网站看看才知道FckEditor在2.6版本之后就改名为ckE...

simpler
2014/03/20
0
0
CKEditor3.x 在Java项目中配置、包括图片上传(支持FTP、图片压缩)

CKEditor 3.x配置说明 一、基本使用: 1、所需文件架包 A. Ckeditor基本文件包,比如:ckeditor_3.6.2.zip 下载地址:http://ckeditor.com/download 2、配置使用 A.将下载下来的CKEditor压缩...

一枚Sir
2014/05/29
0
0
CKEditor配置以及上传图片附件

配置config.js 添加 其中的url指向的都是上传的方法 action或者servlet 图片浏览则会跳转到一个新的页面 选择上传 // 图片上传配置 config.filebrowserImageUploadUrl = 'upload.do?type=Ima...

阿丢丢
2013/10/15
0
0
解决CKEditor内容中文乱码问题

使用CKEditor编辑器 在把其中的内容传回服务器的时候中文可能会有乱码 首先修改 tomcat的server.xml 添加 utf-8 <Connector port="8080" protocol="HTTP/1.1" 然后修改 CKEditor的ckeditor....

阿丢丢
2013/10/15
0
0
CKEditor和CKFinder整合实现上传下载功能

事先说明:此整合的是java版本的, 用到的有:jsp + ckeditor + ckfinder (没有servlet 及其它框架技术) 一.需要的资源: 用到的网站,文件自己下载: a) ckeditor_3.6.2 (解压) download...

jxlgzwh
2013/03/06
0
0
在JSP里使用CKEditor4.4和CKFinder2.4

最近在做一个新闻发布平台,放弃了很早的FCKEditor,使用CKEditor和CKFinder,尽管免费的CKFinder是Demo版本,但是功能完整,而且用户都是比较集中精神发新闻的人,不会在意这个。按照官网的...

一枚Sir
2014/05/30
0
0
Java Web项目开发案例精粹-1-企业日常事务管理系统-源代码

一、功能简介 首页【index.jsp】: 1、显示最新消息,单击消息的链接,可以查看具体的消息内容及其回复和批复 2、如果员工已登陆,则显示其信息 消息列表【messageList.jsp】: 1、以分页的形...

小代码2016
2015/08/15
0
2
在JSP中实现HTTP认证安全

前言 HTTP认证是Web服务器对客户端的权限进行认证的一种方式,能够为Web应用(如jsp)提供一定程度的安全保障。目前一些Web应用项目(如jsp)已经提出了采用HTTP认证的需求。虽然一般的Web容器都...

tojsp_com
2010/08/25
0
0
织梦CMS图片上传安全验证文件代码

<?php if(!defined('DEDEINC')) exit('Request Error!'); if(isset($_FILES['GLOBALS'])) exit('Request not allow!'); //为了防止用户通过注入的可能性改动了数据库 //这里强制限定的某些文......

刘德生
2014/04/19
0
0
JSF学习入门实例之hello world版

JSF学习入门实例之hello world版,JSF 以MVC 模式为基 础 ,与 Struts 不同, JSF 的目标 是希望以一个与Swing 相类似的方式来开发网页 ,因此,从 JSF 的 结 构 图 当中,他的核心概念不是页...

李强s
2011/06/05
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

about git flow

  昨天元芳做了git分支管理规范的分享,为了拓展大家关于git分支的认知,这里我特意再分享这两个关于git flow的链接,大家可以看一下。 Git 工作流程 Git分支管理策略   git flow本质上是...

qwfys
今天
1
0
Linux系统日志文件

/var/log/messages linux系统总日志 /etc/logrotate.conf 日志切割配置文件 参考https://my.oschina.net/u/2000675/blog/908189 dmesg命令 dmesg’命令显示linux内核的环形缓冲区信息,我们可...

chencheng-linux
今天
1
0
MacOS下给树莓派安装Raspbian系统

下载镜像 前往 树莓派官网 下载镜像。 点击 最新版Raspbian 下载最新版镜像。 下载后请,通过 访达 双击解压,或通过 unzip 命令解压。 检查下载的文件 ls -lh -rw-r--r-- 1 dingdayu s...

dingdayu
今天
0
0
spring boot使用通用mapper(tk.mapper) ,id自增和回显等问题

最近项目使用到tk.mapper设置id自增,数据库是mysql。在使用通用mapper主键生成过程中有一些问题,在总结一下。 1、UUID生成方式-字符串主键 在主键上增加注解 @Id @GeneratedValue...

北岩
今天
2
0
告警系统邮件引擎、运行告警系统

告警系统邮件引擎 cd mail vim mail.py #!/usr/bin/env python#-*- coding: UTF-8 -*-import os,sysreload(sys)sys.setdefaultencoding('utf8')import getoptimport smtplibfr......

Zhouliang6
今天
0
0
Java工具类—随机数

Java中常用的生成随机数有Math.random()方法及java.util.Random类.但他们生成的随机数都是伪随机的. Math.radom()方法 在jdk1.8的Math类中可以看到,Math.random()方法实际上就是调用Random类...

PrivateO2
今天
1
0
关于java内存模型、并发编程的好文

Java并发编程:volatile关键字解析    volatile这个关键字可能很多朋友都听说过,或许也都用过。在Java 5之前,它是一个备受争议的关键字,因为在程序中使用它往往会导致出人意料的结果。在...

DannyCoder
昨天
0
0
dubbo @Reference retries 重试次数 一个坑

在代码一中设置 成retries=0,也就是调用超时不用重试,结果DEBUG的时候总是重试,不是0吗,0就不用重试啊。为什么还是调用了多次呢? 结果在网上看到 这篇文章才明白 https://www.cnblogs....

奋斗的小牛
昨天
2
0
数据结构与算法3

要抓紧喽~~~~~~~放羊的孩纸回来喽 LowArray类和LowArrayApp类 程序将一个普通的Java数组封装在LowArray类中。类中的数组隐藏了起来,它是私有的,所以只有类自己的方法才能访问他。 LowArray...

沉迷于编程的小菜菜
昨天
0
0
spring boot应用测试框架介绍

一、spring boot应用测试存在的问题 官方提供的测试框架spring-boot-test-starter,虽然提供了很多功能(junit、spring test、assertj、hamcrest、mockito、jsonassert、jsonpath),但是在数...

yangjianzhou
昨天
2
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部