yakovlevga / brickyeditor Goto Github PK

I'ld like to add a new field type only to add some customizations to the template (for example background-color, classes for padding, margin, colors, ...). By this way, i can customize template elements, ad div container and so on.

I imagine something like that:

data-bre-field="{ 'name' : 'options', 'type' : 'fieldtype', 'values': JSON MAP NAME => TYPE + VALUES }"

Any suggestions? What's the best way to do this?

Thanks

Hi,
Before anything, I would like to congratulate you for brickyeditor. It is a very promising plugin although I'm still trying to figure out how to use it properly.
At the moment I can create elements, store them and modify them.
It works great except when trying to modify a link over an image. I get this error:
"Uncaught (in promise) TypeError: link.getLinkPromptParams is not a function at ImageField.getPromptParams (jquery.brickyeditor.js:1135)"
The popup when clicking on the image doesn't come out anymore once the link has been filled.
Could you please help me ?

PS: there is a tiny typo I notice on line 1144
this.$field.css('background-image', "url(" + src +")" );
instead of
this.$field.css('background-image', "url(" + src);

And maybe to Yarn, etc

<h2 class="display-2" data-bre-field='{ "name" : "text", "type": "html" }'></h1>

h2 open - h1 close

Hi there, this is so cool. I just found this and wanted to know if its possible to insert elements inside others with this? Thanks

pls help me. Thanks!

jquery.brickyeditor.js:426 Uncaught (in promise) TypeError: blocks.forEach is not a function
at Editor.loadBlocks (jquery.brickyeditor.js:426)
at Editor. (jquery.brickyeditor.js:335)
at step (jquery.brickyeditor.js:31)
at Object.next (jquery.brickyeditor.js:12)
at fulfilled (jquery.brickyeditor.js:3)

Hi! I'd like to use this library but with our images that's already on server.
Like a button to open a popup that return url and attribute (like CKFinder)

Hi, i tryed to get the Json string in a form with the formSelector and inputSelector, but doesn´t work, is there any error in this snippet code?

Thank you, great work!!

$(function () {
  $("#editor").brickyeditor({
    formSelector: 'frm_1',
    inputSelector: 'fld_1',
    ignoreHtml: true,
    blocksUrl: 'data.json',
    templatesUrl: 'templates.html',
  });
});

Consider adding internationalization capabilities for messages and errors localization.

HI, how can we use it to modify Html and Save the changes to the mongodb?.thanks

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>

Hi ,
I want to use this plugin without loading an external template , In fact I just need to update/modify/delete content on my html page (generated by another script) and don't need to use nav-menu at the right side to add new content, do you have some suggestions ?
Example Scenario : server will generate html and render it in a new page and then I want the user to have the possibilty to just modify the content of the page ( don't need to add some new content ) ,

I've already found a solution but it doesn't seem to be the best one :
generated html will be saved on Template.html ...

Thank you ^^

It would be nice if the 'block template selector' would show the template name somewhere. Perhaps as a tooltip.
Also in the editor area itself it would be nice to see what template a block is. Preferrably on the tool bar when the three dots are clicked. (where the delete button is)

-Edit-
In the template selector the template name is already shown as a tooltip. Just not on the online demo page. When you download the demo and run it yourself, it shows the tooltips and the template groups.

Hi,

I wonder if you are planning to add support for drag n drop components?

Hello, i am trying to load two bricky editors on the same page and first has loading and second loaded. Its kinda messy, so i dont know if the second did load correctly.

can we use with other html editor?

Hello, i'm trying to run demo test like a hello world but i got this error 'Templates file not found. Requested file:templates.html'.

I am not totally up on using all the cool GitHub features or would simply push an update...

I see errors in dev console about missing tether:

Uncaught Error: Bootstrap tooltips require Tether (http://tether.io/)
    at bootstrap.min.js:7
    at bootstrap.min.js:7
    at bootstrap.min.js:7

Added like this solves the issue:

<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>

Great project! Really like how clean and fast things are with brickyeditor.

"Since BrickyEditor can save blocks as JSON"

Could you explain or maybe show example how edited content is saved to JSON file(s)? I do not understand how to save the content of a modified page to a JSON file.

Thanks for sharing your project.

Susan

Would be great to have an example of how to save + display a page and also how to edit a saved page (loading a page with bricks already filled)
Thanks

Could you reach out to us via email? We are interested in working with you.

[email protected]

This can help to simplify the use of the editor inside forms. Not a big issue though.
For now it is possible to assign value to the input like this:

ignoreHtml: true,
onload: function (editor) {
    $(formSelector).submit(function () {
        $(inputSelector).val(JSON.stringify(editor.getData()));
    });
}

http://brickyeditor.info/examples.html is gone 😢

Hey! Thanks for this amazing tool. But how do you use it with react?

1. При назначении полужирности (b) к <h1 class="display-2">, его невозможно "отжать". Т.е. заголовок остаётся полужирным.

2. Было бы удобно выделять активные инлайновые пункты. При установке курсора на жирный текст - применять активный класс к данному пункту меню.

3. Для блоков типа Html ввести параметр inlineToolbar: ['link','bold','italic' etc.] где указывать какие инлайновые элементы разрешены. Скажем, в заголовки H нелепо добавлять списки.

How do you load content back into the editor after a page reload? I tried placing the content into the #editor div but it doesn't get picked up as a block so I can't move or edit it.

Hi, is there any tutorial about how to add more button on text editor like adding text color, text size and text align? I need it badly, thank you :)

Firefox 57.0 under Ubuntu 16.04 64
throws exception "NS_ERROR_FAILURE:" without any message at

Everything works well in Chrome 62.0.3202.89

I'd like to use this library but without the use of jQuery. Is this possible?