如果在 Laravel 中要使用非 blade 形式的视图该怎么办?

今天逛 github 的时候看到了一个富文本编辑器 学laravle的时候一直有这个疑问: laravel 这种全栈框架,如果在视图里面要添加其他非blade格式的部件该如何解决。不太懂Npm和前端的一些东西,有人能说下解决思路么?

《L01 基础入门》
我们将带你从零开发一个项目并部署到线上,本课程教授 Web 开发中专业、实用的技能,如 Git 工作流、Laravel Mix 前端工作流等。
《L02 从零构建论坛系统》
以构建论坛项目 LaraBBS 为线索,展开对 Laravel 框架的全面学习。应用程序架构思路贴近 Laravel 框架的设计哲学。
讨论数量: 4
你看我吊吗啊

..在script标签里直接应用就行啊 跟blade 互不影响吧,我就接入了富文本编辑器,在blade里

@extends('layouts/app')

@section("title","文章发布")
@section("content")
    <div class="row">
        <div class="col-xs-10" style="margin-left: -300px; width: 100%;">
        @include('UEditor::head')
        <!-- 加载编辑器的容器 -->
            <input placeholder="文章标题" name="name" id="name" style="width:700px"/>
            <script id="container" name="content" type="text/plain">

            </script>
            <button onclick="saveArticle()">保存</button>
        </div>
        <div class="col-lg-2">
            <h3>额外设置项</h3>
            <span>发布到小程序:</span>
            <select name="weid" id="weid" title="我发布过的小程序">
                @if($apps!=null)
                    <option value="0">请选择!</option>
                    @foreach($apps as $app)
                        <option value="{{ $app->id }}">{{ $app->name }}</option>
                    @endforeach
                @endif
            </select> <p></p>
            <span>文章类型</span>
            <label>
                <select id="type">
                    <option value="0">请选择</option>
                    <option value="1">文章</option>
                    <option value="2">服务</option>
                    <option value="3">产品</option>
                </select>
            </label>

        </div>
    </div>
    <!-- 实例化编辑器 -->
    <script type="text/javascript">
        var ue = UE.getEditor('container', {
            autoheight: false
        });
        ue.ready(function () {
            ue.setHeight(600);
            //设置编辑器的内容
            // ue.setContent('hello');
            // //获取html内容,返回: <p>hello</p>
            // var html = ue.getContent();
            // //获取纯文本内容,返回: hello
            // var txt = ue.getContentTxt();
        })

        function saveArticle() {
            const weid = document.getElementById("weid").value;
            const content = ue.getContent();
            const name = document.getElementById("name").value;
            const type = document.getElementById("type").value;
            if (content === '') {
                alert("请填写内容!");
                return;
            }
            if (name === '') {
                alert("请填写标题!");
                return;
            }
            if (weid == 0) {
                alert("请选择小程序!");
                return;
            }
            // console.log(weid);
            axios({
                method: "post",
                url: "/articles",
                data: {
                    weid: weid,
                    name: name,
                    content: content,
                    type : type
                }
            }).then(function (data) {
                console.log(data);
                alert(data.data);
                if (data.status == 200) {
                    window.location = '/articles';
                }

            })
                .catch(function (err) {
                    console.log(err);
                });
        }
    </script>
    <style>
        #container {
            margin-right: 200px;
        }

    </style>
@endsection
5年前 评论

@JeffLi 请教下 @include('UEditor::head') 这一段是导入js文件么,UEditor是和blade文件保存在view里面还是保存在public里面?

5年前 评论
你看我吊吗啊

@achabwang
1、include引入的我认为是一段html,用于显示编辑器界面;
2、ueditor在进行安装的时候,他自动安装到了public目录下,当然要是想搞得灵活一点 ,放哪里都行,只要引用正确就能用,一般是放在public里面

5年前 评论

楼主这个问题解决了吗,同问,如果使用非blade的富文本

5年前 评论

讨论应以学习和精进为目的。请勿发布不友善或者负能量的内容,与人为善,比聪明更重要!