任务42：引入ueditor百度编辑器

Posted 2020-11-30 pensive

1，复制下载到的 ueditor 文件夹到 publicstatic 目录下

2， esourcesviewsAdminArticle  目录下的 add.blade.php  和  edit.blade.php   都在头部引用相关JS  和 在底部增加js控制脚本

@section(‘js_head‘)
    <script src="{{asset(‘static‘)}}/ueditor/ueditor.config.js"></script>
    <script src="{{asset(‘static‘)}}/ueditor/ueditor.all.min.js"></script>
    <script src="{{asset(‘static‘)}}/ueditor/lang/zh-cn/zh-cn.js"></script>
@endsection

@section(‘js‘)
    <script type="text/javascript">
        //实例化编辑器
        //建议使用工厂方法getEditor创建和引用编辑器实例，如果在某个闭包下引用该编辑器，直接调用UE.getEditor(‘editor’)就能拿到相关的实例
        UE.getEditor(‘content‘,{initialFrameWidth:700,initialFrameHeight:400, toolbars: [[‘bold‘, ‘italic‘, ‘underline‘, ‘fontborder‘, ‘strikethrough‘, ‘superscript‘, ‘subscript‘,
                ‘removeformat‘, ‘formatmatch‘, ‘autotypeset‘, ‘blockquote‘, ‘pasteplain‘, ‘|‘, ‘forecolor‘, ‘backcolor‘, ‘insertorderedlist‘, ‘insertunorderedlist‘,
                ‘selectall‘, ‘cleardoc‘,‘insertimage‘,‘edittable‘]]});
    </script>
@endsection

注：

使用 @section(‘js_head‘)  需事先在公共模板 main.blade.php上头部 指定位置 添加 @yield(‘js_head‘) 代码

使用 @section(‘js‘)  需事先在公共模板 main.blade.php上底部 指定位置 添加 @yield(‘js‘) 代码

3，浏览器上 访问 http://laravel.pensive.top/admin/article/add   或 http://laravel.pensive.top/admin/article/edit/1  引入ueditor 后的效果如下

END