|
编辑器在网站的构成中是一个不可或缺的元素,网站内容的形成都是出自编辑器,一个好的编辑器不但可以节省网站编辑的工作效率,而且能够大大提高网页内容的美观度,从事这么多年的ecmall二次开发工作,很多客户都在抱怨ecmall 的tinymce编辑器即不方便、操作难度高,而且输出效果也不理想,往往还会浪费大量的编辑时间,为此快站宝专门整合了百度富文本编辑器
UEditor是由百度web前端研发部开发所见即所得富文本web编辑器,具有轻量,可定制,注重用户体验等特点,开源基于MIT协议,允许自由使用和修改代码,不仅功能全面,而且相当人性化,无论是图片或是视频或是附件,无不轻而易举的运用到您的编辑内容中去。下面简单的介绍一下整合的方法。
第一步: 先去http://ueditor.baidu.com 上面下载一个php版本的UEditor,将其放入includes/libraries/javascript 中去。
第二步: 打开includes文件夹下面的ecapp.base.php文件,找到
/**
* 使用编辑器
*
* @author Garbin
* @param array $params
* @return string
*/
function _build_editor($params = array())
这个函数是ecmall原有的tinymce 的调用方式,在他的下面新建一个
/**
* 使用编辑器
*
* @author Garbin
* @param array $params
* @return string
*/
function _build_editor_ueditor($belong = 0, $lang = 'sc')
加载富文本编辑器,其中参数可根据实际项目来定。该函数里面的具体内容为引入文本编辑器中的引入文件(ueditor.config.js、ueditor.all.js、ueditor.parse.js、lang.js)。
第三步:在各个需要调用的文件里面修改调用方式为_build_editor_ueditor。ecmall整个网站有4处加载到了编辑器,分贝为后台的文章编辑与添加。用户中心的商品管理、自定义导航管理,和店铺设置管理里面。分贝将这4处修改即可。
第四布: 分别修改4处的模板页面,在js中实例化编辑器
var ue = UE.getEditor('description');
ue.ready(function() {
var contents = "{$goods.description|escape:editor}";
ue.setContent(contents); //设置编辑器的内容
});
第五布:配置UEditor编辑器,php版本的配置非常简单,只需要将ueditor/php/config.json中的路径配置为您想要的即可。默认放在网站根目录。
|
|