ckedit 富文本框

下载插件

CKEditor4.4.6 标准版standard
官网下载：http://download.cksource.com/CKEditor/CKEditor/CKEditor 4.4.6/ckeditor_4.4.6_standard.zip

引入插件

<script type="text/javascript" src="/js/plugins/ckeditor/ckeditor.js"></script>

使用

<textarea id="details" name="productDetails.details" class="ckeditor" rows="10"></textarea>

上传图片支持

找到ckeditor下的config.js文件，添加如下配置：

//上传图片的路径
config.filebrowserImageUploadUrl = '/product/ckeditUploadImg';

/product/ckeditUploadImg是后台的controller方法

注意：在springboot主配置文件中需要添加静态资源映射路径
多加这行属性spring.resources.static-locations=classpath:/META-INF/resources/,classpath:/resources/,classpath:/static/,classpath:/public/,file:${file.path}，这样应用才能访问到该图片

后台上传图片代码要有ckedit的支持

   /**
     * 
     * @param upload ckedit默认找upload变量名
     * @param request ckedit上传图片需要用到
     * @param response ckedit上传图片需要用到
     */
    @RequestMapping(value = "/ckeditUploadImg")
    public void ckeditUploadImg(MultipartFile upload, HttpServletRequest request,HttpServletResponse response){
        try {
            //上传文件并返回文件名
            String fileName = UploadUtil.upload(upload, filePath);
            // 结合ckeditor功能
            // imageContextPath为图片在服务器地址，如/upload/123.jpg,非绝对路径
            String imageContextPath = "/upload/"+fileName;
            response.setContentType("text/html;charset=UTF-8");
            String callback = request.getParameter("CKEditorFuncNum");
            PrintWriter out = response.getWriter();
            out.println("<script type=\"text/javascript\">");
            out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + imageContextPath + "',''" + ")");
            out.println("</script>");
            out.flush();
            out.close();
        }catch (Exception e){
            e.printStackTrace();
        }

    }

ckedit常用操作

获取ckedit的实例对象
一般不直接new出实例,而是通过CKEDITOR.replace方法或者 CKEDITOR.instances属性来获取编辑框实例.

CKEDITOR.replace('myeditor');  

CKEDITOR.instances.myeditor

获取ckedit编辑器的数据

CKEDITOR.replace('myeditor').getData()

初始化ckedit

CKEDITOR.replace( 'editor1',
    {
        extraPlugins = 'myplugin1,myplugin2',//扩展自己的插件
        //下面是CKEditor各种属性配置.
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

跟修改config.js文件是一样的效果

扫描二维码关注公众号，回复： 2260627 查看本文章

猜你喜欢