zoukankan      html  css  js  c++  java
  • PHP ckeditor富文本编辑器 结合ckfinder实现图片上传功能

    一:前端页面代码

    <script src="/www/res/ckeditor/ckeditor.js"></script>
    <textarea id="articlecontent" ><?php echo $request['content']; ?></textarea>
    <script type="text/javascript">
        $('#articlecontent').ckeditor({
           customConfig : 'config_user.js'
        });
    </script>

    其中上面的config_user.js是用户自定义配置文件,内容如下:

    CKEDITOR.editorConfig = function( config ) {
        // The toolbar groups arrangement, optimized for two toolbar rows.
        config.toolbarGroups = [
            { name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
            { name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
            { name: 'links' },
            { name: 'insert' },
            { name: 'forms' },
            { name: 'tools' },
            { name: 'document',       groups: [ 'mode', 'document', 'doctools' ] },
            { name: 'others' },
            { name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
            { name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
            { name: 'styles' },
            { name: 'colors' },
            { name: 'about' }
        ];
    
        // Remove some buttons provided by the standard plugins, which are
        // not needed in the Standard(s) toolbar.
        config.removeButtons = 'Underline,Subscript,Superscript';
    
        // Set the most common block elements.
        config.format_tags = 'p;h1;h2;h3;pre';
    
        // Simplify the dialog windows.
        config.removeDialogTabs = 'image:advanced;link:advanced';
    
        //自定义配置
        //config.配置项 = 值
        config.width = 800;
        config.height = 300;
        config.uiColor = "#aabbcc";
    
        //文件的上传管理:加载CKfinder  注意文件路径为网站根目录 使用时,注意ckfinder文件安装路径
        config.filebrowserBrowseUrl      = '/www/res/ckfinder/ckfinder.html';    
        config.filebrowserImageBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Images';    
        config.filebrowserFlashBrowseUrl = '/www/res/ckfinder/ckfinder.html?Type=Flash';    
        config.filebrowserUploadUrl      = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files';    
        config.filebrowserImageUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images';    
        config.filebrowserFlashUploadUrl = '/www/res/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash';
    
    };


    二:ckeditor文件安装,

          注意因为在ckeditor中已经自定义了配置文件,注意里面配置的与ckfinder文件的相对位置

    三:ckfinder文件安装

          需要配置上传文件的保存路径,在ckfinder文件夹下的config.php文件中修改

    $baseUrl = 'http://www.example.com/www/articlesuploads/';
    

          设置文件的保存路径

  • 相关阅读:
    SpringBoot构建RESTful API
    Zynq7000系列之芯片系统结构概述
    FPGA编程技巧系列之按键边沿检测
    异常处理规范
    接口定义规范
    工具类编写规范
    第三个月
    测试计算器心得
    2015年三月
    第一份工作
  • 原文地址:https://www.cnblogs.com/bsyblog/p/6115968.html
Copyright © 2011-2022 走看看