yakovlevga / brickyeditor

WYSIWYG block editor jQuery plugin.
MIT License
115 stars 20 forks source link

Container content not loading #32

Closed geekbrit closed 4 years ago

geekbrit commented 6 years ago

I'm very impressed with this project, I've been trying to find the right balance between user-edits & avoiding page breakage for some time, and this is perfect!

I'm having problems loading a page that has containers in it. In the saved JSON I can see the data that is supposed to go into the containers, but all I see on the page are placeholders. My test page uses this block information:

[{"template":"Hero2","fields":[{"name":"bighead","type":"html","html":"Heading"},{"name":"col1","type":"container","blocks":[{"template":"Heading 1","fields":[{"name":"text","type":"html","html":"Heading 1"}]}],"html":"<div class=\"col-md-4 bre-field-container bre-field-selected\" data-bre-field=\"{ 'name' : 'col1', 'type': 'container' }\"><h1>Heading 1<\/h1><\/div>"},{"name":"col2","type":"container","blocks":[{"template":"Heading 2","fields":[{"name":"text","type":"html","html":"Heading 2"}]}],"html":"<div class=\"col-md-4 bre-field-container bre-field-selected\" data-bre-field=\"{ 'name' : 'col2', 'type': 'container' }\"><h2>Heading 2<\/h2><\/div>"},{"name":"col3","type":"container","blocks":[{"template":"Heading 3","fields":[{"name":"text","type":"html","html":"Heading 3"}]}],"html":"<div class=\"col-md-4 bre-field-container bre-field-selected\" data-bre-field=\"{ 'name' : 'col3', 'type': 'container' }\"><h3>Heading 3<\/h3><\/div>"}]}]

I don't know if the problem is related to the escaped quotes (") in the encoded html fields, but when I try to trace through the editor code, it always has an empty blocks parameter when deciding whether to put a placeholder in the container, and two lines before the call to this.togglePlaceholderIfNeed() this.blocks is set to [ ].

In case it helps to see where I've gone wrong, here is the template:

<div class="bre-template" data-name="Hero2">
<div class="bre-template-preview">
    <div class='row'>
        <div class='text-center col-12'><b style='font-size:12px;'>Hero2 Big Heading</b></div>
    </div>
    <div class='row'>
        <div class='border border-primary col-4'>container</div>
        <div class='border border-primary col-4'>container</div>
        <div class='border border-primary col-4'>container</div>
    </div>
</div>
<div class="row">
    <div class="col">
    <h1 class="display-2 ny5-fancy-title" data-bre-field='{"name":"bighead", "type":"html"}'>Heading</h1>
    </div>
</div>
<div class="row">
    <div class='col-md-4' data-bre-field="{ 'name' : 'col1', 'type': 'container' }"></div>
    <div class='col-md-4' data-bre-field="{ 'name' : 'col2', 'type': 'container' }"></div>
    <div class='col-md-4' data-bre-field="{ 'name' : 'col3', 'type': 'container' }"></div>
</div>
</div>
geekbrit commented 6 years ago

I wrote some php code to take data from BrickyEditor & a templates html file, and munge them together into static html that can be loaded without having the editor in the target page: https://gist.github.com/geekbrit/f871e56f7c3befe319ec70deec9d5f95 It all got a bit recursive, but this does populate containers correctly using the data from BrickyEditor.

oleteacher commented 6 years ago

Hey @geekbrit ! Do you mind showing example of using your PHP script? It is not registering in this old head.

Thanks.

geekbrit commented 6 years ago

Hi Susan, sure... But it maybe a couple of weeks, we're driving across the whole US and back!

My example isn't complete - eventually it will save the HTML to a file, which will be used to serve the page. This function runs only when changes are made with the editor.

On Mon, Jun 4, 2018, 2:56 PM Susan notifications@github.com wrote:

Hey @geekbrit https://github.com/geekbrit ! Do you mind showing example of using your PHP script? It is not registering in this old head.

Thanks.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/yakovlevga/brickyeditor/issues/32#issuecomment-394478885, or mute the thread https://github.com/notifications/unsubscribe-auth/ABL9SZkyOLsuFDyfEzX8Yodtn4WnnoFpks5t5ZEBgaJpZM4UWlBN .

oleteacher commented 6 years ago

No problem @geekbrit I like to be smarter than the kids at least once a month so waiting is not an issue.

Be safe and enjoy your adventure.

geekbrit commented 6 years ago

Hmm... my gist worked on the simple test case I was using, but when you add more code to the containers it starts to fall apart. There are also some inconsistencies in the json data where sometimes you have to replace the contents of a div with the supplied html, and sometimes you have to replace the div with the supplied html. I'm rethinking using this editor because there isn't an easy way to use the generated pages without having the editor in the page.

On the plus side, I found that there is a small bug in the code that when fixed reveals a very nice extra tools widget - line 1584 "this.buttons = editor.options.htmlToolsButtons;" is stopping the tools appearing, I think the conditional around this line should go around the buttons definition just above.

anamikadas01 commented 5 years ago

Its a great editor on the concept of it but when I create blocks and put data into it and save. It does save but when it fetches on the editor the blocks don't render. I might be missing something or if anyone found a solution to it. e.g. below screenshot has data in the blocks, but the container will come with "Click the container to add data". Please help! image (6)

yakovlevga commented 4 years ago

was fixed with v0.8.4