zoukankan      html  css  js  c++  java
  • ckeditor上传图片的注意点

    1、要在 ckeditor的  config.js 文件中加上

    CKEDITOR.editorConfig = function( config ) {

        config.filebrowserImageUploadUrl = 'ckEditImageUpload';//上传图片的接口
    };

    2、实现上传接口

        @RequestMapping(value = "ckEditImageUpload", method = RequestMethod.POST)
        @ResponseBody
        public String ckEditImageUpload(MultipartHttpServletRequest request,HttpServletResponse response) throws BaseException
        {
            String fullPath = null;
            String callback = request.getParameter("CKEditorFuncNum");
            MultipartFile file = request.getFile("upload");
            fullPath = uploadService.getFileUrl(file);
            response.setContentType("text/html;charset=UTF-8");
            response.setHeader("X-Frame-Options", "SAMEORIGIN");
            return "<script type='text/javascript'>"
            + "window.parent.CKEDITOR.tools.callFunction(" + callback
            + ",'" + fullPath + "',''" + ")"+"</script>";
        }

    另在页面中插入ckeditor:

    引入js   <script type="text/javascript" src="${rootURL}resources/ckeditor/ckeditor.js"></script>

    替换

        <td colspan="3">

                    <textarea name="content" id="content" rows="10" cols="40">${banner.content}</textarea>
                    <script>
                        // Replace the <textarea id="editor1"> with a CKEditor
                        // instance, using default configuration.
                        CKEDITOR.replace('content');
                    </script>
                    </td>

  • 相关阅读:
    第四篇 kubernetes 部署EFK日志平台
    青云KubeSphere 容器平台部署教程
    第三篇 kubernetes使用Operator部署Prometheus监控
    第二篇 kubernetes 集群部署 Traefik-ingress
    第一篇 kubernetes V1.19.4 部署教程
    OpenShift强大的oc set命令详解
    kubernetes集群调度策略及调度原理
    MAC 环境变量的管理
    hackindosh 折腾
    RactNative 框架 Hippy
  • 原文地址:https://www.cnblogs.com/yousen/p/4736470.html
Copyright © 2011-2022 走看看