• 将CKEditor集成到Java开发环境中


    本文主要介绍如何将CKEditor集成到Java开发环境中,CKEditor是FCKEditor的升级版,使用很方便。下面是基本使用方法:

    第一步:下载必要的库

    1、到CKEditor官网http://www.fckeditor.net/download/下载Ckeditor4.0.2,这是目前最新的版本,4.1马上就出来了。

    2、找到CKEditor 3.6.4 for Java,download.jar按钮,下载ckeditor-java-core-3.5.3.zip,这是java集成的jar包,可以用来配置CKEditor,其中还有Ckeditor的标签,比较重要。

    第二步:将ckeditor-java-core-3.5.3.jar及Ckeditor库放到工程相应目录下,jar包放到lib下,库文件(js等资源文件)放到存放页面资源的目录下,根据自己的情况

    3、在需要使用编辑器的jsp页面中加入CKeditor标签库,这样可以使用<ckeditor>标签

    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>

    4、如果让CKeditor自动创建实例,则只需在</body>标签之前添加一个<ckeditor:replace>(官方推荐这样做,在其他地方添加也可以)

    <!DOCTYPE unspecified PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <%@page pageEncoding="UTF-8" contentType="text/html; charset=UTF-8"%>
    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
    <html>
    	<body>
    		<form action="sample_posteddata.jsp" method="get">
    			<p>
    				<label for="editor1">Editor 1:</label>
    				<textarea cols="80" id="editor1" name="editor1" rows="10"></textarea>
    			</p>
    			<p>
    				<input type="submit" value="Submit" />
    			</p>
    		</form>
    	<ckeditor:replace replace="editor1" basePath="/ckeditor/" />
    	</body>	
    </html>


    注意:<ckeditor:replace>中replace对应的是要替换的<textarea>标签的id,basePath对应的是CKeditor资源文件的存放路径。如果需要替换多个<textarea>,则可以使用 <ckeditor:replaceAll>标签,

    <ckeditor:replaceAll basePath="/ckeditor/" className="myclass"/>

    其中className是<textarea>的class样式,只要<textarea>的class样式为myclass,则都会被CKeditor实例替换。

    5、如果想手动创建CKeditor实例,则可以通过<ckeditor:editor>标签创建。

    <ckeditor:editor textareaAttributes="<%=attr %>" basePath="/ckeditor/" editor="editor1" value="Type here" />

    其中basePath是CKeditor存放目录,editor是全局<textarea>元素的name,value则是该<textarea>的默认值,textareaAttributes则对应<textarea>的配置信息,是一个java.util.HashMap类型的对象,key对应的是<textarea>中的属性名称name,value对应<textarea>中的属性值value。

    <% 
    	Map<String, String> attr = new HashMap<String, String>();
    	attr.put("rows", "8");
    	attr.put("cols", "50");
    %>


    6、提交编辑内容

    后台获取编辑内容和平时使用<textarea>没区别,CKEditor只是对<textarea>进行了增强,所以数据获取仍然是通过<textarea>的name属性。

    如果想在js中获取CKEditor实例中的内容,则可以通过CKEditor API获取,

    var data = CKEDITOR.instances.editor1.getData();

    基本流程就是这样,如果想修改CKeditor样式的话,可以修改CKeditor资源文件中的config.js,

    /*
    Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved.
    For licensing, see LICENSE.html or http://ckeditor.com/license
    */
    
    CKEDITOR.editorConfig = function( config )
    {
    	// Define changes to default configuration here. For example:
    	// config.language = 'fr';
    	// config.uiColor = '#AADC6E';
    	config.language = 'zh-cn'; // 配置语言
        config.uiColor = '#FFF'; // 背景颜色
        config.width = 'auto'; // 宽度
        config.height = '300px'; // 高度
        config.skin = 'office2003';// 界面v2,kama,office2003
        config.toolbar = 'MyToolbar';// 工具栏风格(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
        config.toolbarCanCollapse = false;// 工具栏是否可以被收缩
        config.resize_enabled = false;// 取消 “拖拽以改变尺寸”功能 plugins/resize/plugin.js
        
        //自定义的工具栏    
        config.toolbar_MyToolbar =
        [
            ['Source','-','Save','Preview','Print'],
            ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Scayt'],
            ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
            ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
            '/',
            ['Styles','Format'],
            ['Bold','Italic','Strike'],
            ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
            ['Link','Unlink','Anchor'],
            ['Maximize','-','About']
        ];
    };

    也可以直接在jsp里设置:

    <%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
    <%@ page import="com.ckeditor.CKEditorConfig"%>
    <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <title>新闻中心</title>
    </head>
    <body>
    <center>
    <form action="${pageContext.request.contextPath}/news/add">
    标题:<input name="title" type="text"/><p/>
    内容:<textarea name="content" id="editor" rows="5" cols="20"></textarea>
    <label>公告</label>:<input type="radio" name="ntype" value="1"/>
    <label>新闻</label>:<input type="radio" name="ntype" value="2"/>
    <input type="submit" value="添加">
    </form>
    </center>
    <% 
    	CKEditorConfig settings = new CKEditorConfig();
    	settings.addConfigValue("height","300");
    	settings.addConfigValue("width","600");
    %>
    <ckeditor:replace replace="editor" basePath="${pageContext.request.contextPath}/ckeditor/" config="<%=settings %>"/>
    </body>
    </html>

    想进一步了解的话,可以参考CKEditor官网的指导说明,http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Java/Integration

    编辑器一般使用都很简单,能满足一般需求就行。当然,这款编辑器是国外研发的,国内也有比较好的在线编辑器,比如kindeditor,中文显示,貌似使用起来比这个还简单,有兴趣大家可以尝试一下,KindEditor官网:http://www.kindsoft.net/

  • 相关阅读:
    Centos7源码安装mysql及读写分离,互为主从
    Linux简介及Ubuntu安装
    CentOS7 IP自动获取
    memcached总结
    CentOS7安装iptables防火墙
    centos 7.0 mono&Jexus V5.5.3安装
    设置背景模糊效果
    vue 动画过渡
    sticky footer
    设置最低高度为100%
  • 原文地址:https://www.cnblogs.com/jimorulang/p/5634104.html
Copyright © 2020-2023  润新知