CKEditor编辑器使用配置

最新推荐文章于 2023-11-02 11:58:00 发布
最新推荐文章于 2023-11-02 11:58:00 发布
阅读量1.1k 收藏
点赞数
分类专栏： java 配置 文章标签： CKEditor
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/leapping/article/details/73466538
版权
java 同时被 2 个专栏收录
12 篇文章 0 订阅
订阅专栏
配置
4 篇文章 0 订阅
订阅专栏

下载CKEditor压缩包，解压

（1）需要更改ckeditor下config.js中路径内容

// 上传文件时浏览服务文件夹                                                                                                      

    config.filebrowserBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm';                                                          

    // 上传图片时浏览服务文件夹                                                                                                       

    config.filebrowserImageBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm?Type=Images';                                         

    // 上传Flash时浏览服务文件夹                                                                                                    

    config.filebrowserFlashBrowseUrl='/organization/CKEditor_Finder/ckfinder/ckfinder.htm?Type=Flash';                                         

    // 上传文件按钮(标签)                                                                                                        

   config.filebrowserUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';      

    // 上传图片按钮(标签)                                                                                                        

    config.filebrowserImageUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; 

    // 上传Flash按钮(标签)                                                                                                     

    config.filebrowserFlashUploadUrl='/organization/CKEditor_Finder/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; 

 

（2）在web.xml添加CKEditor

<!-- CKFinder begin-->

    <servlet>

       <servlet-name>ConnectorServlet</servlet-name>

     <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>

       <init-param>

           <param-name>XMLConfig</param-name>

           <param-value>/WEB-INF/config.xml</param-value>

       </init-param>

       <init-param>

           <param-name>debug</param-name>

           <param-value>false</param-value>

       </init-param>

       <load-on-startup>1</load-on-startup>

    </servlet>

    <servlet-mapping>

       <servlet-name>ConnectorServlet</servlet-name>

       <url-pattern> 

              /CKEditor_Finder/ckfinder/core/connector/java/connector.java 

       </url-pattern>

    </servlet-mapping>

    <filter>

       <filter-name>FileUploadFilter</filter-name>

       <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>

       <init-param>

           <param-name>sessionCookieName</param-name>

           <param-value>JSESSIONID</param-value>

       </init-param>

       <init-param>

           <param-name>sessionParameterName</param-name>

           <param-value>jsessionid</param-value>

       </init-param>

    </filter>

    <filter-mapping>

       <filter-name>FileUploadFilter</filter-name>

       <url-pattern> 

              /CKEditor_Finder/ckfinder/core/connector/java/connector.java 

       </url-pattern>

    </filter-mapping>

    <session-config>

       <session-timeout>10</session-timeout>

</session-config>

<!-- CKFinder end-->

 

（3）在maven的pom.xml下添加CKEditor所需要的包

<!-- CKFinder begin -->

        <dependency>

            <groupId>net.coobird</groupId>

            <artifactId>thumbnailator</artifactId>

            <version>0.4.2</version>

        </dependency>

        <dependency>

            <groupId>com.ckfinder</groupId>

            <artifactId>apache-ant-zip</artifactId>

            <version>2.3</version>

        </dependency>

        <dependency>

             <groupId>com.ckfinder</groupId>

            <artifactId>ckfinder</artifactId>

            <version>2.3</version>

        </dependency>

        <dependency>

            <groupId>com.ckfinder</groupId>

            <artifactId>ckfinderplugin-fileeditor</artifactId>

            <version>2.3</version>

        </dependency>

        <dependency>

            <groupId>com.ckfinder</groupId>

            <artifactId>ckfinderplugin-imageresize</artifactId>

            <version>2.3</version>

        </dependency>

<!-- CKFinderend -->

（4）WEB-INF下创建文件config.xml

<config>

    <enabled>true</enabled>

    <baseDir></baseDir>

    <baseURL>/organization/CKEditor_Finder/userfiles/</baseURL>

    <licenseKey></licenseKey>

    <licenseName></licenseName>

    <imgWidth>1600</imgWidth>

    <imgHeight>1200</imgHeight>

    <imgQuality>80</imgQuality>

<uriEncoding>UTF-8</uriEncoding>

    <defaultResourceTypes></defaultResourceTypes>

    <types>

       <typename="Files">

           <url>%BASE_URL%files/</url>

           <directory>%BASE_DIR%files</directory>

           <maxSize>0</maxSize>

<allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip

           </allowedExtensions>

           <deniedExtensions></deniedExtensions>

       </type>

       <typename="Images">

           <url>%BASE_URL%images/</url>

           <directory>%BASE_DIR%images</directory>

           <maxSize>0</maxSize>

           <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>

           <deniedExtensions></deniedExtensions>

       </type>

       <typename="Flash">

           <url>%BASE_URL%flash/</url>

           <directory>%BASE_DIR%flash</directory>

           <maxSize>0</maxSize>

           <allowedExtensions>swf,flv</allowedExtensions>

           <deniedExtensions></deniedExtensions>

       </type>

    </types>

   

    <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>

    <accessControls>

       <accessControl>

           <role>*</role>

           <resourceType>*</resourceType>

           <folder>/</folder>

           <folderView>true</folderView>

           <folderCreate>true</folderCreate>

           <folderRename>true</folderRename>

           <folderDelete>true</folderDelete>

           <fileView>true</fileView>

           <fileUpload>true</fileUpload>

           <fileRename>true</fileRename>

           <fileDelete>true</fileDelete>

       </accessControl>

    </accessControls>

    <thumbs>

       <enabled>true</enabled>

       <url>%BASE_URL%_thumbs/</url>

       <directory>%BASE_DIR%_thumbs</directory>

       <directAccess>false</directAccess>

       <maxHeight>100</maxHeight>

       <maxWidth>100</maxWidth>

       <quality>80</quality>

    </thumbs>

   

    <checkDoubleExtension>true</checkDoubleExtension>

    <checkSizeAfterScaling>true</checkSizeAfterScaling>

    <secureImageUploads>true</secureImageUploads>

    <htmlExtensions>html,htm,xml,js</htmlExtensions>

    <forceASCII>false</forceASCII>

    <enableCsrfProtection>true</enableCsrfProtection>

    <hideFolders>

       <folder>.*</folder>

       <folder>CVS</folder>

    </hideFolders>

    <hideFiles>

       <file>.*</file>

    </hideFiles>

    <plugins>

       <plugin>

           <name>imageresize</name>

           <class>com.ckfinder.connector.plugins.ImageResize</class>

           <params>

              <paramname="smallThumb"value="90x90"></param>

              <paramname="mediumThumb"value="120x120"></param>

              <paramname="largeThumb"value="180x180"></param>

           </params>

       </plugin>

       <plugin>

           <name>fileeditor</name>

        <class>com.ckfinder.connector.plugins.FileEditor</class>

           <params></params>

       </plugin>

    </plugins>

<basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>

</config>

 

（5）做好上面的准备工作后在jsp中引入js文件

<scripttype="text/javascript"src="<c:urlvalue="/CKEditor_Finder/ckeditor/ckeditor.js"/>"></script>

<scripttype="text/javascript"src="<c:urlvalue="/CKEditor_Finder/ckfinder/ckfinder.js"/>"></script>

（6）在对应的textarea下添加

<textareaname="content"id="add_new_content"style="width:800px;height:400px;"></textarea>

<script type="text/javascript">

CKEDITOR.replace('add_new_content');

</script>

（7）在“打开”编辑新闻管理窗口中添加

function editnews(index){

CKEDITOR.instances.edit_new_content.setData(row.text);//row.text为编辑器中内容，自定传入的值

（8）编辑新闻管理中保存数据时对textarea下数据的获取

    $('#edit_new_button').bind("click",function(){

       var validata=$("#edit_new_form").form("validate");

       varcontent= CKEDITOR.instances.edit_new_content.getData();

       if(validata){

           $.ajax({

              type:"POST",

              url:'../information/editNewData.html',

               data:{"id":$("#edit_new_id").val(),"content":content,"title":$("#eidt_new_title").val()},

              success:function(result){

（9）打开创建新闻时需要清空下textarea

    $("#create_new_button").bind("click",function(){

       $('#add_new_dialog').dialog('open').dialog('setTitle','创建新闻');

       $("#add_new_title").val("");

       CKEDITOR.instances.add_new_content.setData("");

    });

（10）content在数据库中对应的类型为BLOB

content在Information.java实体类中定义的类型为byte[]

package com.apabi.organization.model;

import java.io.Serializable;

import java.io.UnsupportedEncodingException;

import java.util.Date;

import java.util.List;

import javax.persistence.*;

/** 系统管理*/

@Entity

@Table(name = "INFORMATION")

public class Information  implements Serializable{

    private static final long serialVersionUID = 984272591543594665L;

    //唯一标识

    private Longid;

//  private Long userId;

    private OrgUseruserId;

   

    //标题

    private Stringtitle;

   

    //信息类型1-新闻，2-公告，3-广告

    private Longtype;

   

    //内容

    privatebyte[]content;

   

    private Stringtext;//为了获取字符串类型的content

   

    //创建时间

    private DatecreateTime = new Date();

   

    public Information() {  }

   

    @Id

@SequenceGenerator(name="sequenceInformation",sequenceName="SEQ_INFORMATION")

@GeneratedValue(generator="sequenceInformation",strategy=GenerationType.SEQUENCE)

@Column(name="ID", unique =true, nullable = false, precision = 10, scale = 0)

    public Long getId() {

        return this.id;

    }

    public void setId(Long id) {

        this.id = id;

    }

@OneToOne(cascade = CascadeType.ALL) //一个用户user_id对应OrgUser中的id

    @JoinColumn(name="user_id",referencedColumnName="id")

    public OrgUser getUserId() {

        returnuserId;

    }

    public void setUserId(OrgUser userId) {

        this.userId = userId;

    }

    @Column(name = "TITLE", length = 300)

    public String getTitle() {

        return this.title;

    }

    public void setTitle(String title) {

        this.title = title;

    }

   

    @Column(name = "TYPE", precision = 1, scale = 0)

    public Long getType() {

        return this.type;

    }

    public void setType(Long type) {

        this.type = type;

    }

   

    @Column(name = "CONTENT")

    public byte[] getContent() {

        return this.content;

    }

    public void setContent(byte[] content) {

        this.content = content;

    }

    @Temporal(TemporalType.DATE)

    @Column(name = "CREATE_TIME", length = 7)

    public Date getCreateTime() {

        return this.createTime;

    }

    public void setCreateTime(Date createTime) {

        this.createTime = createTime;

    }

    @Transient

    public String getText() {

        try {

            return new String(content,"UTF-8");

        } catch (UnsupportedEncodingException e) {

            e.printStackTrace();

        }

        returntext;

    }

 

    public void setText(String text) {//数据库content内容为空时的处理

        if(content !=null){

        this.text =new String(content);

        }

        this.text =null;  

    }

}

（11）在java文件中提取图片路径绑定

//内容source匹配元素element和属性attr   返回图片

public static Map match(String source, String element, String attr) {

if(null != source){

    Map result = new LinkedHashMap();

    String reg = "<" + element +"[^<>]*?\\s"+ attr+ "=['\"]?(.*?)['\"]?\\s.*?>";

    Matcher m = Pattern.compile(reg).matcher(source);

    while (m.find()) {

        String key = m.group(0);

        String value = m.group(1);

        result.put(key, value);

     }

    Map imgMap = new HashMap();

     Set<Map.Entry> set =result.entrySet();

        for (Iterator<Map.Entry> it =set.iterator(); it.hasNext();) {

            Map.Entry entry =(Map.Entry) it.next();

           imgMap.put(entry.getValue(),"");

        }

     return imgMap;

}

return null;

}

//返回内容

public static String matchContent(String source, String element,String attr) {

if(null != source){

      String reg = "<" + element +"[^<>]*?\\s"+ attr+ "=['\"]?(.*?)['\"]?\\s.*?>";

       Matcher m = Pattern.compile(reg).matcher(source);

        while (m.find()) {

            String key = m.group(0);

           source =source.replace(key,"");

        }

     }

        return source;

}

 

//图片

Map imgMap = match(str,"img","src");

modelAndView.addObject("imgmap",imgMap);

//内容

String informationContent = matchContent(str,"img","src");modelAndView.addObject("informationContent", informationContent);

（12）jsp中显示图片

图片

<c:forEachitems="${imgmap}" var="img"varStatus="status">

            <imgsrc=" ${img.key}"/>

</c:forEach>

内容 ${informationContent}

平平是个谁
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
CKEditor图片上传实现详细步骤(使用Struts 2)
叉叉哥的BLOG
06-22 2万+
本人使用的CKEditor版本是3.6.3。CKEditor配置和部署我就不多说。 CKEditor的编辑器工具栏中有一项“图片域”，该工具可以贴上图片地址来在文本编辑器中加入图片，但是没有图片上传。 “预览”中有一大堆鸟语，看得很不爽。可以打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewTe
CKEditor实现图片上传
热门推荐
itmyhome的专栏
12-13 6万+
本人用的CKEditor版本为4.3 CKEditor配置和部署参考XXX。 CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮 并且预览中有一堆火星文，可以修改相应配置删除它。 第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewText”，(b.confi
CKEditor去掉图片上传预览框里面的英文字母
zhengun的专栏
09-30 1145
本人用的CKEditor版本为4.3 CKEditor配置和部署参考CKEditor4.x部署和配置。 CKEditor编辑器的工具栏中初始的时候应该是这样子的，没有图片上传按钮  并且预览中有一堆火星文，可以修改相应配置删除它。 第一种方法：打开ckeditor/plugins/image/dialogs/image.js文件，搜索“b.config.image_previewT...
CKEditor配置以及上传图片附件
weixin_34321753的博客
10-15 126
2019独角兽企业重金招聘Python工程师标准>>> ...
ckeditor富文本编辑器的使用和图片上传
fxbar的博客
02-17 1291
     项目开发需要用到在线编辑和图片上传，最终讨论使用ckeditor，原因就是其丰富的API。考虑到最新版本ckeditor5可能不够稳定，我们选择使用ckedtior4.9.2版本。官网链接：ckeditor官网 特别注意：下面截图中url中的/editor/upload/1?其中的 /1 是根据自己需求添加不同类型数据上传时候的区分，可以去掉，写成/ed...
CKEditor上传图片
qq_32445069的博客
02-13 4161
CKEditor作为老牌开源的优秀在线编辑器，一直受到开发者的青睐,由于CKFinder的图片上传和视频上传要收费，所以没有采用其ckfinder搭配使用。这里我们讲解下 ckeditor最新版本4.8的图片上传配置。 https://ckeditor.com/download1.开启图片上传界面文件地址：ckeditor/plugins/image/dialogs/image.js搜索"Uplo...
ckeditor 4.x 图片上传（java）
weixin_30824277的博客
08-16 399
1.找到ckeditor文件夹中的config.js，添加如下配置 // 图片预览区域显示内容（用于去除图片预览区的默认填充文字） config.image_previewText=' '; // 图片上传后台controller路径config.filebrowserImageUploadUrl= "/uploadCkEditor"; 2.服务端控制器上传图片...
ckeditor编辑器使用
11-09
Eclipse下配置CKEditor3.5.3+CKFinder2.0.2 FCKeditor 使用详解 Ckeditor与ckfinder整合forJAVA（支持文件上传） jsp ckeditor使用 很全面哦！值得收藏
asp.net ckeditor编辑器的使用方法
10-29
Fckeditor相信大家都知道。ckeditor是fckeditor的重写版，它的载入速度更快，界面更漂亮，更强的课定制性。试用了一下，下面介绍一下它在asp.net中的配置。
富文本编辑器CKEditor配置及图片上传配置
01-20
一、ckeditor4的配 1.下载ckeditor4 进入官网https://ckeditor.com/ckeditor-4/download/可以直接点击下载，也可以下拉到 CKEditor 4 – previous versions 进行版本选择下载 2.解压并配置 解压压缩包打开 ...
Ueditor和CKeditor 两款编辑器的使用与配置方法
10-20
主要介绍了Ueditor和CKeditor 两款编辑器的使用与配置方法,需要的朋友可以参考下
TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法分析
10-15
主要介绍了TP3.2.3框架使用CKeditor编辑器在页面中上传图片的方法,结合实例形式分析了thinkPHP3.2.3框架使用CKeditor编辑器相关配置方法与操作注意事项,需要的朋友可以参考下
4.CKeditor4.10.0最新图片上传配置
巴黎左岸 · 荼靡花开
08-09 6305
CKeditor-4.10.0富文本编辑器，到上传图片的配置，网上的教程都不适合现在的版本。 第一步：在config.js的CKEDITOR.editorConfig = function( config ) {}中加入如下全局配置： config.language = 'zh-cn';/*将编辑器的语言设置为中文*/ config.image_previewText = ' ';/*去掉...
django-ckeditor富文本编辑插件：使用RichTextUploadingField在admin后台显示不了富文本框
weixin_43573931的博客
09-27 300
使用django-ckeditor 的 RichTextUploadingField字段
ckeditor富文本编辑器的使用和图片上传，复制粘贴图片上传
最新发布
weixin_45525177的博客
11-02 1127
参考文章：http://blog.ncmem.com/wordpress/2023/11/02/ckeditor%e5%af%8c%e6%96%87%e6%9c%ac%e7%bc%96%e8%be%91%e5%99%a8%e7%9a%84%e4%bd%bf%e7%94%a8%e5%92%8c%e5%9b%be%e7%89%87%e4%b8%8a%e4%bc%a0%ef%bc%8c%e5%a4%8d%e5%88%b6%e7%b2%98%e8%b4%b4%e5%9b%be%e7%89%87-3/
php ckeditor 上传图片,ckeditor4.5.1配置图片上传的方法
weixin_33179966的博客
03-10 532
本篇博文主要面向初学者，一步一步地实现ckeditor的图片上传，欢迎各位大神指正。ckeditor的图片上传默认是关闭的,网上也有很多相关的教程，可是不是讲的不完整，就是版本太旧已经不适用。我写这篇博文主要面向初学者，有错误的地方欢迎指正。截止本文撰写，ckeditor最新版本是4.5.1,我下载的版本是4.5.1standard,如果本文的方法不管用，请下载同一版本尝试。1.开启图片上传界面文...
实现CKEDITOR图像浏览与上传
qq_36663951的博客
08-18 327
实现CKEDITOR图像浏览与上传 作者：douyasi时间：2014年10月18日分类：PHP CKEditor 编辑器一款不错的互联网在线编辑器，但其图像上传功能，这里提供2个官方插件实现 CKEditor 的图像浏览与上传功能。 Image Browse http://ckeditor.com/addon/imgbrowse Image Uploader http://c
.net中使用ckeditor4+ckfinder上传图片
axmanHZ的博客
01-09 1312
目前网上介绍ckeditor+ckFinder实现图片上传的文章很多，但大多无法实际使用，笔者参考了大量的介绍文章和大量的调试，完美实现了图片的上传功能
【Django富文本编辑】Ckeditor的配置、使用和踩坑（应该全）
黎明总是如期而至
08-29 1万+
目录 一、基本应用 1.安装 2.配置ckeditor 3.models字段使用，引用步骤2中的ckeditor配置 4.forms字段使用 5.admin后台使用 二、前端应用 1.基本使用中的全部执行完后可以设置前端页面了（没有步骤5也可以） 2.urls路由 3.views配置 4.html页面配置 5.post后台处理数据 三、带图片上传的编辑器 1.安装pillow（所有屠屏功能都需要这个库） 2.添加配置ckeditor 3.urls文件配置 4.修改modes
ckeditor编辑器中去除p标签
06-08
要在 CKEditor 编辑器中去除 p 标签，可以通过以下...这样配置后，CKEditor 编辑器中输入回车键将会生成 ` ` 标签而不是 `<p>` 标签。注意，这样配置可能会对编辑器的其他功能产生影响，需要根据具体情况进行调整。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值