Editable Content - Summernote Setup

All WYSIWYG Web Builder support issues that are not covered in the forums below.
Forum rules
IMPORTANT NOTE!!

DO YOU HAVE A QUESTION OR PROBLEM AND WANT QUICK HELP?
THEN PLEASE SHARE A "DEMO" PROJECT.



PLEASE READ THE FORUM RULES BEFORE YOU POST:
http://www.wysiwygwebbuilder.com/forum/viewtopic.php?f=12&t=1901

MUST READ:
http://www.wysiwygwebbuilder.com/getting_started.html
WYSIWYG Web Builder FAQ
Post Reply
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
User avatar
BaconFries
 
 
Posts: 5325
Joined: Thu Aug 16, 2007 7:32 pm

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by 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
 
 
Posts: 43
Joined: Fri Jun 05, 2020 11:29 am

Re: Editable Content - Summernote Setup

Post by 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
User avatar
roygore
 
 
Posts: 140
Joined: Wed Mar 25, 2020 6:34 pm
Location: United Kingdom

Re: Editable Content - Summernote Setup

Post by roygore »

Thanks Sam,

I'll have a play with the colours.

Roy
Post Reply