zoukankan      html  css  js  c++  java
  • ckedit 文本编辑器

    Ckeditor是一个功能非常强大的富文本编辑器,博客园有使用此编辑器,其功能完全可以与MS的Word媲美。

    用起来也非常方便。下面是本人总结的安装步骤:

    第一步,从http://ckeditor.com/download 下载ckeditor文件包

    第二步,新建web项目,然后把下载的ckeditor文件包直接放在下面,

    第三步,创建实例,此时如下图

    整个sample.html的代码是:(此时笔者已经把它设置为全屏显示了)

    <HTML>
    <HEAD>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <TITLE>Editor</TITLE>
    <script src="ckeditor/adapters/jquery-1.9.1.min.js"></script>
    <script src="ckeditor/ckeditor.js"></script>
    <script src="ckeditor/adapters/jquery.js"></script>
    </HEAD>
    <BODY>

    <script type="text/javascript">

    function fullping() {
    var oCKeditor;
    oCKeditor = CKEDITOR.replace('content');
    oCKeditor.on('instanceReady', function (event) {
    var editor = event.editor;
    setTimeout(function () {
    // Delay bit more if editor is still not ready.
    if (!editor.element) {
    setTimeout(arguments.callee, 100);
    return;
    }
    event.removeListener('instanceReady', this.callee);
    if (editor.name == 'content') {
    var command = editor.getCommand('maximize');
    command.exec();
    }
    }, 0);
    }, null, null, 9999);
    };
    </script>

    <script type="text/javascript">
    $(document).ready( function() {
    //$('#content').ckeditor();

    fullping();
    });

    </script>
    <div>
    <textarea id="content" name="content" class="ckeditor">
    </textarea>

    </div>
    </BODY>
    </HTML>

    第四步,执行结果如下:

    第五步,上传图片,

    可以打开ckeditor/plugins/image/dialogs/image.js文件,搜索“b.config.image_previewText”就能找到这段鸟语了,(b.config.image_previewText||'')单引号中的内容全删了,注意别删多了。

    扫除这个障碍,下面来研究图片上传。

    首先,还是image.js这个文件,搜索“upload”可以找到这一段

    id:'Upload',hidden:true

    实际上上传功能被隐藏了,把上面的true改成false,再打开编辑器,就能找到上传功能了。

    至于上传的action可以在config.js里配置,

    config.filebrowserUploadUrl="actions/ckeditorUpload";

    var pathName = window.document.location.pathname;
    //获取带"/"的项目名,如:/uimcardprj
    var projectName = pathName.substring(0, pathName.substr(1).indexOf('/') + 1);
    config.filebrowserImageUploadUrl = projectName+'/upload.do'; //固定路径

    后台的上传要自己写哦。

    有同学要demo,可以留名,发你。

  • 相关阅读:
    [总结] 二维ST表及其优化
    [51Nod 1515] 明辨是非
    [总结] fhq_Treap 学习笔记
    [ZJOI2008] 骑士
    [SDOI2010] 古代猪文
    [POJ 1006] 生理周期
    [POJ 2891] Strange Way to Express Integers
    [Luogu 1516] 青蛙的约会
    python第十三天
    python第十二天-----RabbitMQ
  • 原文地址:https://www.cnblogs.com/xiexy/p/3891731.html
Copyright © 2011-2022 走看看