Editable Content - Summernote Setup

[roygore]

I've used Editable Content on several projects now with great success and I've always used SCEditor.

I would prefer to use Summernote as it seems to be the most recommended editor and the best editor. However, when I choose Summernote in the Editable Content Admin setup panel, I only get very limited editing options which is not sufficient to edit the content properly.

Looking on my host server, I see there is a folder labelled Summernote and in this folder is a file called 'summernote-lite.css'. So I assume that the installed version of Summernote is a 'Lite' version which will explain why it is missing many editing options.

I appreciate that Summernote is a third party product and not supported. However, is anyone able to help me setup Summernote in Editable Content to get the full version with all the available editing features?

How do I get the full version? Do I need to put something in the 'Editor settings' box in the Editable Content Admin setup panel?

All help will be appreciated.
Roy

[Pablo]

You can change the functionality of the editor via 'Editor settings'.
The available options are documented here:
https://summernote.org/deep-dive/#customization

[roygore]

Thanks Pablo,

I've read the 'https://summernote.org/deep-dive/#customization' link and can see that it provides an option to customise the editor as desired.

However, I still can't work out what to put in the Editor Settings box.

I've tried to copy and past various elements of code from the link but, when I publish the Editable Content Admin page, I just get rubbish in the 'Content' box.

Can you explain more about what I should be entering into the Editor Settings box please?

Perhaps an example would really help.

Grateful for all your help.
Roy

By the way - thank you for adding the ability to have more than one Admin login in version 17.

[Pablo]

Example:

Code: Select all

 toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
  ]

[roygore]

Thanks Pablo

The example is a great help.

Thanks for all your help.
Roy

[roygore]

Sorry to come back to this subject, but . . .

Does any one have a complete list of the Buttons and their codes available in SummerNote that they would share with me?

I've explored the SummerNote websites but have only actually found a few extra buttons and codes amoungst all the technical jargon. As I am not a technical wizzard, I'm having difficulty decyphering the button codes from the technical jargon.

I've managed to expand Pablo's list a bit, but I am sure there is much more available.

Here is my list of codes so far:
toolbar: [
// [summernote toolbar,

• ]
  ['fontname', ['fontname']],
  ['fontsize', ['fontsize']],
  ['color', ['color']],
  ['style', ['bold', 'italic', 'underline']],
  ['font', ['superscript', 'subscript']],
  ['para', ['paragraph']],
  ['para', ['ul', 'ol']],
  ['table', ['table']],
  ['insert', ['link', 'picture', 'video']],
  ['view', ['help', 'fullscreen']],
  ],
  
  I know it's not supported but does anyone have a bigger and better list than mine that they would be willing to share? It may also help many other people who might be strtuggling with the same issue.
  
  All help appreciated.
  Roy

[Pablo]

The available toolbar buttons are documented here:
https://summernote.org/deep-dive/#custo ... ar-popover

[roygore]

Thanks Pablo

I've been through the deep-dive website and found it to be useful but still a bit techie for me.
The lsit of toolbar buttons at the top of the web page (listed below) is what I'm looking for, but I don't find the folloing sections very useful in giving me the code for the individual buttons.

Insert
picture: open image dialog
link: open link dialog
video: open video dialog
table: insert a table
hr: insert a horizontal rule
Font Style
fontname: set font family
fontsize: set font size
fontsizeunit: set font size unit
color: set foreground and background color
forecolor: set foreground color
backcolor: set background color
bold: toggle font weight
italic: toggle italic
underline: toggle underline
strikethrough: toggle strikethrough
superscript: toggle superscript
subscript: toggle subscript
clear: clear font style
Paragraph style
style: format selected block
ol: toggle ordered list
ul: toggle unordered list
paragraph: dropdown for paragraph align
height: set line height
Misc
fullscreen: toggle fullscreen editing mode
codeview: toggle wysiwyg and html editing mode
undo: undo
redo: redo
help: open help dialog


Would really like to obtain the code for this list of toolbar buttons if anyone has managed to decypher the technical descriptions in the deep-dive website. .

Roy

[SamT]

Hi Ray,

This may help. I think it covers your requirements:

toolbar: [
['style', ['style']],
['font', ['clear', 'fontname', 'fontsize', 'fontsizeunit' , 'strikethrough', 'superscript', 'subscript']],
['misc', ['undo', 'redo']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['codeview', 'help']],

Sam

[roygore]

Hi Sam,

Thank you for the reply - I will give it a try.

Your help is greatly appreciated.

Roy

[SamT]

Roy,

My apologies. No idea why I got your first name wrong.
It wasn't intentional.

Let me know if I've missed a command but I <think> they are all there.
Bear in mind the font colour and font background colour are combined when you activate the toolbar on a page - just in case you think the two commands are missing.

Regards,

Sam

[roygore]

Hi Sam,

That works great - thank you very much for the help and your expertise.

Just have two problems to resolve if you can help:
1 Button dropdown label: Can only see half of the button label when cursor rolls over the button! Any ideas why?

2 In the Editable Content Editor: The background area of the Content section is white and the outline when adding a Table is also white, so can't actually see the 'Table' in the Content area making it very difficult to enter data into the table. Is there a way to either a) change the background color of the Content area so the table will stand out; or b) add lines to the Table (the way Word does) to make it visible? My preferred solution is a) if you happen to know how - I've looked in the settings of the Editor but don't see a setting for changing the background color of the Content area. Any ideas please - either solution will be welcomed.

Here's hoping you might be able to help me resolve these remaing two issues.

I really appreciate your time and help.

Roy

[roygore]

Sam,

Ref:

Bear in mind the font colour and font background colour are combined when you activate the toolbar on a page

Is there any way to seperate the two colors into seperate buttons?

Roy

[SamT]

Hey Roy,

I need to think about your first question.

Regarding 2)
The first thing that comes to mind (assuming you haven't deliberately made any style changes to cause the table border to be white) is as simple as suggesting you turn down the brightness level of your monitor! Try the monitor controls first and if that doesn't cure it perhaps try the Nvidia or AMD graphic card software. Look for either the Nvidia or AMD applet in the taskbar ( ^ ) on the right near the clock.

Give that a try.

Sam

[SamT]

Roy,

Regarding question 1.

Without seeing a demo page its difficult to know exactly what the issue is caused by. I refer you to Pablo and BaconFries oft repeated statement (and in the FAQ), about sending a link to a page that can be examined by those in the forum trying to help you.

That doesn't help you now though. So the best I can suggest is you ensure you have placed your TextArea that you have linked Summernote to inside a Flex container and publish that to see if it provides the cure.

----------------------------------------------------

Regarding splitting the font and font background colour into their separate buttons I wonder why you would want to do that when all it does is widen the entire toolbar (in my view unnecessarily). But I'm not to reason why.

Try this:

toolbar: [
['style', ['style']],
['font', ['clear', 'fontname', 'fontsize', 'fontsizeunit' , 'forecolor' , 'backcolor' , 'strikethrough', 'superscript', 'subscript']],
['misc', ['undo', 'redo']],
['color', ['color']],
['para', ['ul', 'ol', 'paragraph']],
['table', ['table']],
['insert', ['link', 'picture', 'video', 'hr']],
['view', ['codeview', 'help']],

[roygore]

Sam,

Thanks for your replys.

To put you in the picture:
I am creating a website for an organisation here in the UK known as the U3a, which provides a number of activity groups for senior citizens. They want a page for each group which has an Editable Content panel where they can enter and update the activities of each group. They will update the information themselvs on a regular basis. As they are senior citizens and not the sharpest with using technology, I am trying to make the look and operation as simple and easy as possible.

Here is a link to the Editable Content Admin page on my test site where you can see the problem with only seeing half of the button dropdown label: http://www.rlgconsulting.co.uk/testing/ ... -news.html. The password is 'tringu3aAdmin'

Hopefully, you might be able to help me resolve this strange occurance.

Roy

[SamT]

Roy,

This is outside my area of expertise.
The hint text is being displayed but the background of the hint is only partially behind the hint text making it look the way it does.

Its my estimation that this points towards the CSS for <div class="note-editor note-frame"> in your editablecontentadmin-news.css file.

I hope this helps somewhat and I've not pointed you in the wrong path.

Sam

[roygore]

Thanks Sam,

I appeciate your efforts. Likewise, it is outside my expertise as well.

Is there anyone out there with the expertise to look at this problem and help me to resolve it?

The problem: Using SummerNote editor in 'Editable Content Admin' panel, can only see half of the button label when cursor rolls over the button!

Link to view - http://www.rlgconsulting.co.uk/testing/ ... -news.html Password is 'tringu3aAdmin'

I've changed the editor to SCEditor and the button dropdown labels show correctly - so the problem only exists in SummerNote - Help!

All help will be greatly appreciated.

Roy

[SamT]

Hey Roy,

I believe have the answer to your issue regarding Summernote and the CMS Editable Content Admin appearance.

I was originally distracted with my own issue while commmenting earlier on this one.



On your page containing the CMS Editable Content Admin element do the following:

• From the toolbox under Layout, drag a new Flex Container onto the page. Leave the default properties.

• [Grab your current CMS Editable Content Admin element already present on the page and drop it into the Flex Container.

• Grab the size bar on CMS Editable Content Admin element and adjust to width according to your requirements.

• Publish the page and see if it matches what you want.

• If it is, delete the 'old' LayoutGrid you had CMS Editable Content Admin element inside and then, if you need to, highlight the Flex Container, press the '-' (minus key) to put the Flex Container back to the position you originally had it in on the page.

Note: Using the Flex Container eliminates the need for two scroll bars that you currently have. The Flex Container will adjust its height to contents and you only have the one main page scroll bar to contend with.

Sam

[roygore]

Sam,

Thanks for your reply and your suggestion. Hope you have managed to sort out your problem now.

I've followed your suggestion using a Flex Container. but unfortunately I still only see half of the button label - actually I've been able to determine that the problem is with the black background of the label, the text, though difficult to see against the white background, appears ok.

Here is a link to UsersAdmin page: http://www.rlgconsulting.co.uk/testing/ ... -news.html The password is 'tringu3aAdmin' .

If you try to edit one of the pages and move the cursor over the edit buttions, you will see my problem. This ony occurs when using SummerNote editor - other editors like SCEditor show the full button label.

I appreciate your help on this.

Roy

[SamT]

Hey roygore,

I've looked at your webpage again. In my original reply to you, I thought it was a background colour issue.
However, I am now as certain as I can be that it isn't.

I think its because you have placed the editable content admin element in an iFrame and not taken it out to place directly into the Flex container, as I suggested. At least, looking at your webpage code is that is what you have done.

I don't know why you need to have an iFrame. The same can be achieved on the page you have without needing to refer to a different page within the iFrame.

Sam

[SamT]

Roy,

Just to clarify...
I made a mock up of the same page and it works just fine, as I described. It has Sommernote performing exactly as it should without issue inside the editable content admin element on the page (and not another page referred to by iFrame).

With an iFrame you may have competing styles between the page containing the iFrame and the page within the iFrame. This is likely what is causing the hint style to appear 'crushed'.

And yes, thanks. I solved my issue. As usual it was mostly because I ignored the 'easy' route and went straight to assumptions. Always unwise...

Best,

Sam

[roygore]

Sam,

Thanks for feedback.

Yes, I actually have 2 problems that I am trying to sort: 1) the white background in the Content area of editing panel; and 2)this problem about the drop down labels of the SummerNote editor butons.

Hadn't realised that I had put the admin element in an iFrame. I thought I had just grabbed the Editable Content Admin extension and dropped it straight into a Layout Grid.

I've had a look but I can't identify an iFrame so I've deleted the Layout Grid and the Flex Container back to a blank page and started again. Now I just have the basic admin panel with the built-in version of SummerNote inside a Flex Container, but am still getting the same result .

Have another look at the page now and see if the iFrame is gone.

Roy

[SamT]

Roy,

I see you are using jquery-3.6.0.min.js for the page.

Try changing the page to use jquery-1-12-4.min.js

Have the page on view, go to Site Manager (usually on right of WWB), click on the page with wheel cog icon to open Page Properties, Go to the Advanced tab. Change the Query version there.

Sam

[roygore]

Yes! Yes! Yes!

That seems to have sorted it out - can now see all of the button labels!

Can't thank you enough - I would have never thought to change the jquery setting.

Don't know why it worked - can you explain so a beginner like myself can learn?

Roy

PS - now I just need to sort out my other problem

[SamT]

Roy,

Happy to help where I can. Although I've only posted a couple of questions on this forum I've lurked for years and been helped along considerably reading solutions other's have posted. Its time I give back a little. I noted this issue has attracted considerable reads so it must be of importance to some.

If I tell you why it will destroy any reputation I'm a miracle worker!

In truth, I have no idea why. In the early days I assumed (that bad word again) that the latest would always be the greatest. Where jQuery is concerned, for WWB that doesn't appear to be the case. I've never come across a requirement to move beyond ver jquery-1.7.2.min.js for anything I've done and in fact came across issues if I did what you did. Also, just to deflate my reputation further, my comment about iFrame was flat out wrong and a red herring.

Regarding your PS: Are you referring to not being able to see the Table border? Adjusting the monitor brightness / contrast not work? Please take an image of the portion of screen (using Microsoft Snip) of the page you are working on (not published but in WWB) and put it on the page we have been discussing so I can log back in and see what you see.

Sam

[SamT]

Roy,

Aha. I've just read your other post in the Extensions section regarding the issue. That's a much clearer definition of your issue. Ignore my PS request.

I have some spare time so I'll tease the issue and see if I can't come up with something.

Sam

[SamT]

Roy,

With that page on view in WWB and no element selected click on the menu bar (in HOME) on the HTML icon.
Check the the heading of the pop-up states 'Page HTML'. if it doesn't you've accidentally selected an element inside the page before clicking on the HTML button.

On the bottom half of the pop-up you have various tabs. Select 'Between <head></head> tags *'
Now type:

<style>
table, th, td {
border: 2px solid grey;
}
</style>

and click on OK and publish.

That should work.

Sam

[roygore]

Good morning Sam,

Sorry for not getting back sooner - I'm based in the UK and it's now 9:35am

This problem only applies to inserting a Table into the content area - my fall back position is to just remove the option of Tables from the button menu.

I think I have followed your instructions (which sounds like it should be the answer) correctly but I'm afraid it doesn't seem to have made a difference.

If you login to the Admin page again and edit 'Proposed New Groups', you will see I have added a Table underneath the paragragh of text for testing. While there is a very, very faint line around the table, it's not sufficient to outline the table. It's very difficult to find the boxes of the table in order to input data. Certainly anyone with poor or aging eyesight won't be abe to see it.

I've also tried reducung the brightness on my screen right down to 15% but it doesn't help the faint lines.

It would be great if the Table was lined the way Word does it.

Again, I can't thank you wnough for your help.

Roy

[SamT]

Roy,

My bad. I've wasted both our time buy misreading your requirement. My solution works for displaying the table borders on the public view of the page you want edited and not show up the feint border when actually editing the page via editable content admin.
My apologies.

As small assist, but not covering your entire needs is this:

On the editable content admin page, click on the CMS_ViewEidtableContent1 (or another number but usually 1) element.
Go to Properties. Change the border colour to darker grey (or black). Change the Border Width to 2.
You will note the whole element border will match your new settings but it will also darken the main Table border (although regretfully not the columns or rows. But its the best that can be done, as far as I am aware, without a change in the Extension itself, as you have requested.

Its the best I can do.

Sam

[roygore]

Sam,

Thanks for all your efforts.

Your suggestion is certainly in the right direction and I think will suffice for now. At least it outlines the table so users can find it.

Asa you say, I think the answer to outlining the internal areas as well is in changinfg the extension - hopefully Pablo will be able to make that happen.

I will use your suggestion for now and hope for an update to the extension.

Can't thank you enough for your assistance and expertise on both my problems.

Roy

[BaconFries]

Roy as you may be aware or not summer note is a third party script / application so Pablo will not have control over how it works or not in this instance. Also note that all the editors are provided "As Is". If you have a need for a feature then it may be best to contact the developer of summermote for help or requests for new features.

As usual if you have a suggestion then you can make it at the following
viewforum.php?f=28

[roygore]

Thanks BaconFries,

Yes, I am aware that Summernote is not supported which is why my initial enquiry ended several weeks ago and I've been hisitant about asking for further assistance.

However, thankfully, someone came forward and was able to make helpfull suggestions which have helped me considerably.

Roy

[SamT]

Roy,

One final assist.
Its still not ideal but improves on my earlier suggestion.

You changed the Appearance properties of the CMS_ViewEditableContentAdmin by increasing the Border Width to 2 and Border Color to a darker grey.

Now, just below Alternate Row is Background Colour. Change that to a mid dark grey (not too dark or the black text will appear harder to read).
For editing purposes, the entire area background is grey but it shows up slightly better the light grey Table border on row and cells. You might want to change the Border Color back to a very light grey so its 'brighter' against the mid grey Background Color.

Sam

[roygore]

Thanks Sam,

I'll have a play with the colours.

Roy