using summernote with editable content admin tool

[johnwayne]

due to rights and such neither WWB nor summernote have the full roadmap for use of summernote with editable content admin tool in wwb, so i put this together as a roadmap to be improved and developed - so it's not so much a question as an outline to be improved upon for a very robust solution.

fwiw, summernote is an add-on, not an extension, in regard to editable content admin tool.
Below assumes operating on a publishable site.. will this work with previewed sites? I don’t know, I didn’t try.

Start with WWB closed

Open this page https://www.wysiwygwebbuilder.com/free_extras.html
Scroll to the section ‘editor addons for the content management system’ NOT to the ‘content management system plug-ins’ section.
Download ‘summernote’
Unzip the download
Run the setup file (requires that you did not customize your installation directory of WWB during its installation..)

Open WWB
right-click on toolbox panel, customize toolbox
move ‘editable content’ and ‘editable content admin’ to the right side, noting they are under the content management section.
Put those tools onto your page(s), for a site to be published.
Go to the object properties of ‘editable content admin’ tool via object manager panel
Scroll down to the ‘behaviour’ section
Enter a password (apparently only one password can be set here, surpass this limitation with for-each-person pages on the site, each having their own editable content admin??)
Scroll down to the ‘editor’ section
Change editor type to summernote
Tap the triple dot for editor settings
Paste in code such as this (this does not contain all the defaults..):
fontSizes: ['8', '9', '10', '11', '12', '14', '18'],
toolbar: [
['style', ['bold', 'italic', 'underline', 'clear']],
['font', ['strikethrough', 'superscript', 'subscript']],
['fontsize', ['fontsize']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['height', ['height']]
]
Any pasting of code there overrides ALL defaults. You cannot add-in 1 feature to what is already there, you have to expressly list each feature when not using defaults (blank editor settings)
Get all possible settings from here:
https://summernote.org/deep-dive/#customization
note that you do not copy the script wrapper function call, just the interior section of code, like I have in green above – into the editor settings
hit ok on that dialog
Publish your site, making sure that ‘entire web site’ and ‘publish all files’ are selected.
Now visit your page containing the editable content admin tool, login, click the page segment to edit, edit it, and save
If you get a browser warning about breached password, go here: https://www.wysiwygwebbuilder.com/forum ... =5&t=89669
Now visit your page containing the editable content tool and see your result.

would love to see facilitation of summernote plugins being initialized via WWB in future releases..

[Pablo]

Thanks for the information. I will move it to the 'tip and tricks' section, so it does not get lost between all other generic posts.

[madebyibloo]

Hey johnwayne,

Good read that, very well put together. I'm sure users will find it useful.

I was playing with summernote with the beta version of WB16 and found some interesting results with toolbar item/icons options etc like yourself.

I also had a play with some summernote plugins and they vary in difficulty depending on the users code knowledge. I was able to add a few plugins such as Lorem ipsum plugin and the Grid plugin (which is pretty cool) and that solves a lot of RWD issues with a cms based editor for WB.

I was also looking at the Gallery plugin and the elfinder file manager plugin but have not yet got round to looking into these, so its a future project.

It's good to see another wb member looking into this part of WB so maybe in the future we could collaborate with the summernote editor within this post

Chat soon, stay safe.

[maxime]

I also had a play with some summernote plugins and they vary in difficulty depending on the users code knowledge. I was able to add a few plugins such as Lorem ipsum plugin and the Grid plugin (which is pretty cool) and that solves a lot of RWD issues with a cms based editor for WB.

please, can you explain how to add grid plugin and the loren ipsum plugin ?

[madebyibloo]

I also had a play with some summernote plugins and they vary in difficulty depending on the users code knowledge. I was able to add a few plugins such as Lorem ipsum plugin and the Grid plugin (which is pretty cool) and that solves a lot of RWD issues with a cms based editor for WB.

please, can you explain how to add grid plugin and the loren ipsum plugin ?

Hi, I found most of the summernote plugins have their own (good enough) install instructions within their github information for you to follow. I found the grid view plugin to be a bit trickier as it used the bootstrap instances within the code that has to be added manually. At some point I will add a tutorial for this but for now I have some family issues I have to deal with and once I get through that I will get on these.

Here's some references that I use:
https://summernote.org/plugins
https://github.com/topics/summernote-plugins

Hope they are useful.

[johnwayne]

with summernote as the UI for editable content admin, I have an editable content where the background behind it is a dark color, so the editable content text needs to be white - easily achieved. the issue is, is i cannot find how to change the background of the summernote UI so that white text is visible in the editable content admin. any suggestions?

so far, the only way I can find to achieve is to manually add

Code: Select all

div.note-editable
{
	 background-color: grey !important;	
}

to the editablecontentadmin.css on the server, after each publish.

[Bluesman]

I also had a play with some summernote plugins and they vary in difficulty depending on the users code knowledge. I was able to add a few plugins such as Lorem ipsum plugin and the Grid plugin (which is pretty cool) and that solves a lot of RWD issues with a cms based editor for WB.

please, can you explain how to add grid plugin and the loren ipsum plugin ?

Hi "maxime... did you get instructions for this plugins? I have tried to install the "grid" but not managed so far. Wonder if you please can share "how to"?

[mixextra]

HI Bluesman,

not sure if you meant grid as arranging text into columns and rows?
I will give an example:

http://mixextra.sk/Test2/index.html

admin password: admin

[Bluesman]

HI Bluesman,

not sure if you meant grid as arranging text into columns and rows?
I will give an example:

http://mixextra.sk/Test2/index.html

admin password: admin

Hi again "mixextra" I meant the "Grid" extension that was mentioned in earlier post in this thread. It should work a little like the "Layout grid"...
I think you used tabs for your demo? Correct?