百度ueditor富文本编辑器在fastadmin上安装使用

浏览:4732 发布日期:2020/04/28 分类:用法示例 关键字: fastadmin ueditor 视频 video
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欢迎留言
评论( 相关
后面还有条评论,点击查看>>