javascript - 如何将设计从数据库加载到非图层编辑器中？

Question

我正在尝试将现有的 HTML 标记加载到 unlayer 编辑器中。我正在使用原始 JavaScript。她是我的密码。我创建了一个运行良好的新页面。文档说有一个 loadTemplate 和 loadDesign 函数可以将 HTML 标记呈现到编辑器中。但它不起作用。

<div id="editor-container" style="height: 79vh;">



<script>
    class EmailEditor {
        constructor(id) {
            unlayer.init({
            id: id,
            displayMode: "web",
            appearance: {
                theme: 'dark',
            }
            });
        }

        loadDesign(design) {
            unlayer.loadDesign(design);
        }

        saveDesign(callback) {
            unlayer.saveDesign(callback);
        }
        exportHtml(callback) {
            unlayer.exportHtml(callback);
        }
    }

        const editor = new EmailEditor('editor-container');

        const saveHTMLBtn = document.getElementById('update_html_btn');

        saveHTMLBtn.addEventListener('click',e => {
        editor.exportHtml(
            d => {
                // Ajax

                var body = d.html;

                $.post('{{ route('api.page.content.create') }}', 
                {_token:'{{ csrf_token() }}', 
                page_id: '{{ $content->id }}', 
                title: '{{ $content->title }}',
                body: body
            },  
                function(data){
                    console.log(data);
                });

              }
            );
        });
      </script>

标签： javascriptlaraveleditorjs

Answer 1

控制台中没有 unlayer editorjs 错误。http://prntscr.com/10oqkh4

@extends('layouts.master')
@section('title','Page Content Edit')
@section('page-style')
    <script src="http://editor.unlayer.com/embed.js"></script>
@endsection
@section('content')


<button id="update_html_btn" class="btn btn-primary">Update Page</button>
  {{-- <button id="save_json_btn" class="btn btn-primary">Save JSON</button> --}}
  {{-- <button id="load_json_btn" class="btn btn-primary">Load JSON</button> --}}

<div id="editor-container" style="height: 79vh;">

</div>

@endsection


@section('page-script')
    <script>

    class EmailEditor {
        constructor(id) {
            unlayer.init({
            id: id,
            displayMode: "web",
            appearance: {
                theme: 'dark',
            }
            });
        }

        loadDesign(design) {
            unlayer.loadDesign(design);
        }

        saveDesign(callback) {
            unlayer.saveDesign(callback);
        }
        exportHtml(callback) {
            unlayer.exportHtml(callback);
        }
    }

        const editor = new EmailEditor('editor-container');

        const saveHTMLBtn = document.getElementById('update_html_btn');

        saveHTMLBtn.addEventListener('click',e => {
        editor.exportHtml(
            d => {
                // Ajax

                var body = d.html;

                $.post('{{ route('api.page.content.create') }}', 
                {_token:'{{ csrf_token() }}', 
                page_id: '{{ $content->id }}', 
                title: '{{ $content->title }}',
                body: body
            },  
                function(data){
                    console.log(data);
                });

              }
            );
        });

    </script>
@endsection