CodeIgniter CI框架下tinyMCE实践

作为一款优秀的富文本编辑器，tinyMCE得到了广泛的应用。笔者在撰写一款基于CodeIgniter框架的文章发布页面时，采用了tinyMCE编辑器，并且利用CodeIgniter框架实现了图片上传功能。

1、创建一个标签用于挂载富文本

    <textarea name="content" id="content" placeholder="请输入内容" style="width:100%;" col="50" rows="10" ></textarea>

2、在javascript中对tinyMCE初始化

    <script>
        tinymce.init({
            selector:"#content",
            skin:'tinymce-5',
            plugins:'image',
            menubar:true,
            convert_urls: false,
            invalid_elements:'textarea,em,input',
            toolbar_mode:'sliding',
            toolbar:'image bold italic underline styleselect formatselect fontselect fontsizeselect| undo redo | forecolor blackcolor | code | alignleft aligncenter alignright | outdent indent blockquote',
            branding:false,
            elementpath:false,
            fontsize_formats: '12px 14px 16px 18px 24px 36px 48px 56px 72px',
            font_formats: '微软雅黑=Microsoft YaHei,Helvetica Neue,PingFang SC,sans-serif;苹果苹方=PingFang SC,Microsoft YaHei,sans-serif;宋体=simsun,serif;仿宋体=FangSong,serif;黑体=SimHei,sans-serif;Arial=arial,helvetica,sans-serif;Arial Black=arial black,avant garde;Book Antiqua=book antiqua,palatino;',
            images_upload_base_path: '/upload/article/',
            images_upload_url: '/articles/upimg.html',
            language:'zh_CN',
        });        
    </script>

3、对第2点中提到的 ‘articles/upimg.html’函数进行设置

    public function upimg()//tinyMCE插件调用的后端脚本
    { 
        $config['upload_path'] = "./upload/article/";
        $config['allowed_types'] = 'jpg|jpeg|png';
        $config['max_size'] = '2048';
        $config['max_width'] = '2000';
        $config['max_height'] = '1000'; 
        $config['file_name'] = $this->getuniqid('IMG'); 
        $this->load->library('upload',$config);
        $this->upload->initialize($config);
        $this->upload->do_upload('file'); 
        $arr = array("location"=>$this->upload->file_name);
        echo json_encode($arr);
    }

4、撰写表单提交函数，在其中完成对文章content的处理程序：

    $data['content'] = $this->input->post('content');

说明：本文为本站（www.txeet.com）原创作品，转载请注明版权。