laravel 和wangEditor3.1富文本编辑器的使用

谁借莪１个温暖的怀抱￠ 2022-04-13 14:28 458阅读 0赞

准备

1.开启php.ini中的php\_fileinfo扩展

2.设置.env中的APP\_URL=xxx

配置:

在主模板文件中加入头(为了image图片的上传)

<meta name="csrf-token" content="{
       { csrf_token() }}">

html部分:

<form action="/article/add" method="POST">
                <div class="form-group">
                    <label>标题</label>
                    <input name="title" type="text" class="form-control" placeholder="这里是标题">
                </div>
                <div class="form-group">
                    <div class="form-group">
                        <label>内容</label>
                        {
       {--富文本编辑器--}}
                        <div id="div1" class="toolbar">
                        </div>
                        <div style="padding: 5px 0; color: #ccc"></div>
                        {
       {--<div id="div2" class="text" name="content"  class="form-control"> --}}
                        </div>
                    </div>
                    <button type="button" class="btn btn-default" id="btn">提交</button>
            </form>

javascript部分

<script type="text/javascript" src="/js/wangEditor.js"></script>
        <script type="text/javascript">
            $.ajaxSetup({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                }
            });
            var E = window.wangEditor;
            var editor = new E('#div1');
            // editor.customConfig.debug = true;
            // 配置服务器端地址
            editor.customConfig.uploadImgServer = '/article/upimg';
    
            // 设置文件的name值
            editor.customConfig.uploadFileName = 'wangEditorH5File';
    
            // 设置 headers（举例）
            editor.customConfig.uploadImgHeaders = {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            };
            // 上传文件监听
            editor.customConfig.uploadImgHooks = {
                customInsert: function (insertImg, result, editor) {
                    var url = result.data;
                    //上传图片回填富文本编辑器
                    insertImg(url);
                }
            };
            editor.create();
    
            document.getElementById('btn').addEventListener('click', function () {
                var res = editor.txt.html();
                alert(res);
                var title = $("input[name=title]").val();
                $.ajax({
                    url: '/article/add',
                    method: 'POST',
                    dataType: "json",
                    data: {
                        'content': res,
                        'title': title
                    },
                    success: function (data) {
                        console.log(data);
                        if (data.error != 0) {
                            return;
                        }
                        window.location.href = '/';
                    }
                });
            }, false);
        </script>

laravel部分:

//图片上传部分   
     public function upimg(){
            $path = request()->file('wangEditorH5File')->storePublicly(md5(time()));
            $data = asset('storage/' . $path);
            echo json_encode(array(
                "error" => 0,
                "data" => $data,
            ));
        }
    //文章入库部分

图片上传设置部分:

config/filesystems.php文件disks项中public需要在.env文件中设置

FILESYSTEM_DRIVER=public

`注意，还需要设置上传文件的软链接，因为上传的图片无法访问除 public 以外的目录。`

php artisan storage:link

发表评论取消回复

表情：

评论列表（有 0 条评论，458人围观）

还没有评论，来说两句吧...

相关阅读

相关 Vue使用富文本编辑器wangEditor(详细)

基于Vue2项目配置 npm 安装 wangeditor依赖 yarn add @wangeditor/editor-for-vue 或者 np

青旅半醒/ 2023年10月11日 18:30/ 0 赞/ 58 阅读

相关在vue中使用wangEditor富文本编辑器

目录 wangEditor编辑器 Vue基本配置项 1.安装wangEditor 2.创建公共组件 3. 编译器组件内容代码效果图 5.对应官方文档介绍位置

﹏ヽ暗。殇╰゛Y/ 2023年01月03日 11:25/ 0 赞/ 230 阅读

相关 layui中使用wangEditor富文本编辑器

<script type="text/javascript" src="https://unpkg.com/wangeditor/dist/wangEditor.min

た入场券/ 2022年12月21日 00:59/ 0 赞/ 267 阅读

相关富文本编辑器wangEditor

目录下载引入基本使用说明 wangEditor是一个轻量级的富文本编辑器，相比KindE

向右看齐/ 2022年12月11日 06:25/ 0 赞/ 745 阅读

相关 laravel 和wangEditor3.1富文本编辑器的使用

准备 1.开启php.ini中的php\_fileinfo扩展 2.设置.env中的APP\_URL=xxx 配置: 在主模板文件中加入头(为了image图片的上传)

谁借莪１个温暖的怀抱￠/ 2022年04月13日 14:28/ 0 赞/ 459 阅读

相关使用wangEditor富文本编辑器遇到的问题总结

怎么使用和安装我就不详细说了，文档写得很清楚，[https://www.kancloud.cn/wangfupeng/wangeditor3/332599][https_www

淩亂°似流年/ 2022年04月12日 04:40/ 0 赞/ 2265 阅读

相关 HTML富文本编辑器wangEditor的使用

文章目录官网项目结构源码全屏插件 CSS JS 效果

叁歲伎倆/ 2022年04月03日 05:45/ 0 赞/ 493 阅读

相关 wangEditor 轻量级 web 富文本编辑器

【介绍】 wangEditor 是基于javascript和css开发的 Web富文本编辑器，轻量、简洁、易用、开源免费。 ![watermark_type_ZmFu

不念不忘少年蓝@/ 2022年03月24日 15:24/ 0 赞/ 548 阅读

相关 wangEditor富文本编辑器使用、编辑器内容转json格式

wangEditor富文本编辑器好处：可以吧文本编辑器中的内容转成json格式，方便app、小程序使用 [wangEditor官网][wangEditor] [wan

r囧r小猫/ 2021年09月28日 12:34/ 0 赞/ 1712 阅读

相关 Vue中使用wangEditor富文本编辑器

> 本文章向大家介绍Vue中使用wangEditor富文本编辑器，主要包括Vue中使用wangEditor富文本编辑器使用实例、应用技巧、基本知识点总结和需要注意事项，具有一定

曾经终败给现在/ 2021年07月26日 11:38/ 0 赞/ 699 阅读