fastadmin是一个很好用的后台开发框架,并且免费使用。里面的插件市场可以直接在线下载安装更新各种复杂的功能。但是一些很好的插件需要花钱才能下载永久使用。由于项目需要富文本编辑功能,于是就下载了百度免费的ueditor使用。
百度的ueditor2016年就停止更新了,里面的很多bug都没有修复,虽然网上很多前辈给出了修改方案,但是都不完美,存在问题。
FastAdmin基于RequireJS进行前端JS模块的管理,因此如果我们需要再引入第三方JS插件,则必按照RequireJS的规则进行载入。如果你还不了解什么是RequireJS,可以先简单了解下RequireJS,相关链接:http://www.ruanyifeng.com/blog/2012/11/require_js.html
1、下载百度ueditor,放到public/assets/addons中,改名为ueditor;
2、找到public/assets/js/require-backend.js文件,在paths中加入paths:{
//......
'ueconfig':'../addons/ueditor/ueditor.config',
'ueditor':'../addons/ueditor/ueditor.all',
'uelang':'../addons/ueditor/lang/zh-cn/zh-cn',
'ZeroClipboard': "../addons/ueditor/third-party/zeroclipboard/ZeroClipboard",
},然后在shim中加入shim:{
//......
'ueditor':['ueconfig','css!../addons/ueditor/themes/default/css/ueditor.css'],
'uelang':['ueditor'],
},在文件最后加入require(['ZeroClipboard'], function (ZeroClipboard) {
window['ZeroClipboard'] = ZeroClipboard;
});,没有这个会报错,是由require.js加载方式引起的错误;
3、在你需要添加的模块下的js中,一般放在public/assets/js/backend中,在define中加入uelangdefine(['jquery', 'bootstrap', 'backend', 'table', 'form','uelang'], function (,ドル undefined, Backend, Table, Form) {
//......
add: function () {
//加载ueditor
UE.getEditor('ueditor');
//修改上传文件提交地址为自己写的方法的地址,使用ueditor的方法就不需要添加
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadvideo') {
//你自己处理文件的方法的地址
return '/article.php/ajax/upload?type=1';
} else {
return this._bkGetActionUrl.call(this, action);
}
}
Controller.api.bindevent();
},
}4、找到你要引入的add.html<div class="form-group">
<label class="control-label col-xs-12 col-sm-2">内容:</label>
<div class="col-xs-12 col-sm-8">
<script id="ueditor" name="row[article_content]" type="text/plain">{$row.article_content}</script>
</div>
</div>,一般只有edit.html需要填入{$row.article_content}
5、另外ueditor上传视频的bug,修改方案提一下,不完美的地方就是再次编辑时,视频无法编辑删除,只能清空所有内容,然后重新编辑内容;
(1)首先修改文件 ueditor.config.js,找到大概 365行 ,将 whitList 更改为 whiteList
(2)修改文件 ueditor.all.jshtml.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'image'));修改为html.push(creatInsertStr( vi.url, vi.width || 420, vi.height || 280, id + i, null, cl, 'video'));,然后找到var root = UE.htmlparser(html);
me.filterInputRule(root);
html = root.toHtml();,注释掉这三行代码。按ctrl+F5强制刷新就可以了。如果有更好的解决视频上传编辑bug欢迎留言

评论() 相关

收藏

赞

yeshen144

ThinkPHP 是一个免费开源的,快速、简单的面向对象的 轻量级PHP开发框架 ,创立于2006年初,遵循Apache2开源协议发布,是为了敏捷WEB应用开发和简化企业应用开发而诞生的。ThinkPHP从诞生以来一直秉承简洁实用的设计原则,在保持出色的性能和至简的代码的同时,也注重易用性。并且拥有众多的原创功能和特性,在社区团队的积极参与下,在易用性、扩展性和性能方面不断优化和改进,已经成长为国内最领先和最具影响力的WEB应用开发框架,众多的典型案例确保可以稳定用于商业以及门户级的开发。