using summernote with editable content admin tool

Do you want to share WYSIWYG Web Builder tips, tricks, tutorials or useful HTML code? You can post it here...
(no questions or problems please, this section is not monitored by support).
Forum rules
This section is to share tips, tricks and tutorials related to WYSIWYG Web Builder.
Please do not post questions or problems here. They will not be answered.

PLEASE READ THE FORUM RULES BEFORE YOU POST:
viewtopic.php?f=12&t=1901
Post Reply
johnwayne
 
 
Posts: 8
Joined: Sat Jul 18, 2020 10:18 pm

using summernote with editable content admin tool

Post by johnwayne » Thu Sep 10, 2020 12:03 am

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..

User avatar
Pablo
 
Posts: 22130
Joined: Tue Mar 28, 2006 12:00 pm
Location: Europe
Contact:

Re: using summernote with editable content admin tool

Post by Pablo » Thu Sep 10, 2020 6:22 am

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.

User avatar
madebyibloo
 
 
Posts: 330
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: using summernote with editable content admin tool

Post by madebyibloo » Thu Sep 10, 2020 10:05 am

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.
Cheers,
Scott


www.madebyibloo.com - a creative design studio.

maxime
 
 
Posts: 173
Joined: Sat Apr 02, 2011 6:15 pm
Contact:

Re: using summernote with editable content admin tool

Post by maxime » Fri Sep 11, 2020 11:29 am

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 ?

User avatar
madebyibloo
 
 
Posts: 330
Joined: Fri Mar 27, 2009 3:58 pm
Location: East Yorkshire, United Kingdom
Contact:

Re: using summernote with editable content admin tool

Post by madebyibloo » Sat Sep 12, 2020 8:32 am

maxime wrote:
Fri Sep 11, 2020 11:29 am
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.
Cheers,
Scott


www.madebyibloo.com - a creative design studio.

johnwayne
 
 
Posts: 8
Joined: Sat Jul 18, 2020 10:18 pm

Re: using summernote with editable content admin tool

Post by johnwayne » Thu Sep 17, 2020 4:11 pm

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.

Post Reply