前言
因为项目中在传输大数据时，需要各种格式的数据，所以在页面选择了使用ckeditor编辑器，我是从下载的最新的版本，经过5天的奋战，终于搞定，实现了ckeditor的基本配置和自定义的图片上传功能，善于总结，才能进步嘛，所以写下此篇，希望能帮到需要的人……
软件准备
Ckeditor：
ckeditor_3.6.3        下载地址去吧呵呵我懒得写了百度下就可以到
jquery：
jquery-1.2.7        下载吧版本无所谓的这个是我用的版本
ajaxfileupload.js    jquery文件上传插件下载吧
ckeditor配置
1. 把ckeditor文件夹放到自己工程的js目录下，然后在自己需要ckeditor的页面引入：
<script type="text/javascript" src="/common/js/ckeditor/ckeditor.js"></script>
新建一个文本域放置编辑器：
<html:textarea property="content"></html:textarea>
通过js代码把ckeditor编辑器放置到上面的文本域中：
    var editor = place('content');
    现在访问这个页面，可以看到下图：
   
文本域已经被编辑器替换。
java毕业设计论文题目
2. 通过config.js来配置编辑器的外观、语言显示、按钮显示等等。
我的配置文件如下：
CKEDITOR.editorConfig = function( config )
{
    // Define changes to default configuration here. For example:
    config.language = 'zh-cn';
    // config.uiColor = '#AADC6E';
    // 设置宽高
    config.width = 860;
    config.height = 300;
    config.skin = 'v2';    //共有3中皮肤可选择：kama（默认）、office2003、v2
   
    // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    lbar = 'Basic';
    lbar = 'Full';
    lbar_Full = [
    ['Source','-','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-'jquery下载文件插件,'SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-',discuz模板修改教程'Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
删除表    ['TextColor','BGColor']
    ];//以上配置自己需要用到的按钮，按钮代码可以去网上呵呵
   
};
('dialogDefinition',function (ev) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    //alert(dialogName);
    if (dialogName == 'image') {
      veContents('advanced');//消除advanced标签
      veContents('Link');//消除Link标签
      }
    });
后面这个函数是去掉点击“图像”按钮时超链接和高级选项卡，只保留图像选项卡。
自定义上传图片配置
1. 添加“上传”按钮，需要修改plugins\image\dialogs\image.js文件，到
CKEDITOR.Empty(b.lang.image.urlMissing)},这一段，在这一段之后，增加“上传”按钮：
{type:'button',id:'myUpload',style:'display:inline-block;margin-top:10px;',align:'center',label:'上传',onClick:function(){var retFile=showModalDialog('upload/upload.jsp','','dialogHeight:20;dialogWidth:29;');if(retFile != null){Dialog().setValueOf('info','txtUrl',retFile);}}},
保存后，可看到下图效果，要是看不到，可重新打开浏览器。
2. 可以看到上图的预览中的英文已经去掉，这个也需要修改
plugins\image\dialogs\image.js文件，到
 config.image_previewText这一段，把它后面的英文清空即可，如这个样子：
(b.config.image_previewText||'')，然后再看页面，编辑器就变成如上图的样子了。
现在我们要做的就是实现上传的功能了。
上传图片功能
首先说下由于项目是ssh的框架，所以我的环境是ssh的基础上实现的。
1. 创建form：
publicclassUploadFormextends ActionForm {
    protected FormFile imageFile;
    public FormFile getImageFile() {
        returnimageFile;
    }
    publicvoid setImageFile(FormFile imageFile) {
        this.imageFile = imageFile;
    }
}
2. 创建页面
<scripttype="text/javascript"src="/common/js/ajaxfileupload.js"></script>
<html>
    <head>
    </head>
    <body>
        <formmethod="post"action="/system/upload.do?method=saveImage"sql select语句的功能
            enctype="multipart/form-data">
            <inputtype="file"id="imageFile"name="imageFile"/>
scheduledthreadpool            <inputtype="button"value="提交"onclick="ajaxFileUpload()"/>
        </form>
        <divid="result"></div>
        <scripttype="text/javascript">
    function ajaxFileUpload() {
        var imgPath = $('#imageFile').val();
        if (imgPath == null || imgPath == "") {
            alert("请浏览图片");
            returnfalse;
        }
        ;
        if(!checkImg(imgPath)){
            returnfalse;
        };//检查文件格式
        $.ajaxFileUpload( {
            url : '/system/upload.do?method=saveImage', //需要链接到服务器地址
            secureuri : false,
            fileElementId : 'imageFile', //文件选择框的id属性
            dataType : 'text', //服务器返回的格式，可以是json
            success : function(data, status) //相当于java中try语句块的用法
            {
                urnValue = data; //返回父页面
            window.close();
        },
        error : function(data, status, e) //相当于java中catch语句块的用法
            {
                $('#result').html('添加失败');
            }
        }
        );
    }
   
    function checkImg(path) {
        var file = ElementById("upload");
        var i = path.lastIndexOf(".");
        var ext = path.substring(i);
        var ext1 = LowerCase();
        if (ext1 != ".gif"&& ext1 != ".ief"&& ext1 != ".jpg"
                && ext1 != ".jpeg"&& ext1 != ".tiff"&& ext1 != ".tif"
                && ext1 != ".bmp"&& ext1 != ".svg"&& ext1 != ".svgx") {

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。