Summernote editor - how to modify?

This section is for posting questions which are not directly related to WYSIWYG Web Builder.
Examples of off topics: web server configuration, hosting, programming related questions, third party scripts.

Note that these questions will generally not be answered by the administrators of this forum.
Post Reply
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi Bluesman,

i made a test project it works like this:
http://mixextra.sk/Test3/index.html

try admin password: admin

If it is correct, I will send you the wbs project so that you can see the settings.
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Fri Aug 12, 2022 2:04 pm Hi Bluesman,

i made a test project it works like this:
http://mixextra.sk/Test3/index.html

try admin password: admin

If it is correct, I will send you the wbs project so that you can see the settings.
Hi mixextra, tnx for being back on this issue 🙏What concern to myself I had to leave this specific subject because of time limit. I made the toolbar work for my specific project but not as you which it should work. So I'm very greatful for your help to understand this issue :roll:
I tested your example and have now edited so the different fonts should show the correct font in the size 24 pt. both in the separate posts and in the mixed post.
Not much is working. Some fonts keep the setting in the view area but not when you go back to the admin ?
You can see how it looks now...
If you have different result I can make some screenshots?
Muchas gracias

Added:
For example the fonts Gill and Palatino doesn't show the right font in the menu
The only font that acts correct for me is "Merriweather Sans Light"
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi Bluesman,

I think this could be what we are looking for:

http://mixextra.sk/Test3/index.html
admin password: admin

try changing the text, font, size,
also managed to solve the correct display of text formatting in the text-area summernote.

Bluesman, I will ask for feedback if the new solution is better than the last one.
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Tue Aug 16, 2022 9:56 pm Hi Bluesman,

I think this could be what we are looking for:

http://mixextra.sk/Test3/index.html
admin password: admin

try changing the text, font, size,
also managed to solve the correct display of text formatting in the text-area summernote.

Bluesman, I will ask for feedback if the new solution is better than the last one.
Hi mixextra, for sure getting closer. Almost all works.
- The font "Palatino doesn't show right in menu and does not display right in the view, but keep the sizes :)
- The font Gill Sans doesn't show right in the menu and doesn't show right in admin, but is right in view and sizes are right.

I have looked in different forums and in github etc... but nowhere tells where Summernote editor populate the fonts from? I have put out some questions about this.

One thing I noticed is if you/I populate a menu with two fonts in the same family... like; Arial and Arial Black, Merriweather Sans Light and Merriweather Sans ExtraBold they seams to corrupt each other and only one works...? Have you noticed this?
Wonder if you can try to make a font menu like I write to you here
- Arial
- Arial Black
- Courier
- Fran
- Georgia
- Jost Light
- Jost Black
- Impact
- Merriweather
- Merriweather UltraBold
- Merriweather Sans Light
- Merriweather Sans ExtraBold
- Tahoma
- Times
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra... can you show the code you have for your last toolbar? 🙏
I want to compare with how I make mine...
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi Bluesman,

I also tried some modifications in the same project:

http://mixextra.sk/Test1/index.html
administrator password: admin

try changing the text, font, size.

I tested Firefox, Edge, Chrome, Android Internet, Android Chrome.

Bluesman, I'm asking for feedback on whether the new solution is better than the last one.

Current summernote settings:

Code: Select all

toolbar: [
    // [groupName, [list of button]]
   ['style', ['style', 'clear']],
   ['font', ['fontname', 'fontsize', 'fontsizeunit' , 'height', 'bold', 'italic', 'forecolor' , 'backcolor' , 'underline', 'strikethrough', 'superscript', 'subscript']],
   ['misc', ['undo', 'redo']],
   ['color', ['color']],
   ['para', ['ul', 'ol', 'paragraph']],
   ['table', ['table']],
   ['insert', ['link', 'picture', 'video', 'hr']],
   ['view', ['codeview', 'help']]
  ],

'fontNames': ['Merriweather Sans Light', 'Krona One', 'Arial Black', 'Palatino', 'Gill Sans'],
'fontNamesIgnoreCheck': ['Merriweather Sans Light', 'Krona One', 'Arial Black', 'Palatino', 'Gill Sans'],

'lineHeights': ['0.2', '0.3', '0.4', '0.5', '0.6', '0.8', '1.0', '1.2', '1.4', '1.5', '2.0', '3.0'],

'fontSizes': ['7', '8', '9', '10', '11', '12', '13', '14', '16', '18', '24', '36', '48' , '64', '82']
If it's okay, I'll try to make a project with the fonts you mentioned above.
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi Bluesman,

project for requested fonts:
Arial
Arial Black
Jost Light
Jost Black
Merriweather Sans Light
Merriweather Sans ExtraBold

http://mixextra.sk/Test2/index.html
administrator password: admin

try changing the text, font, size.

I tested Firefox, Edge, Chrome, Android Internet, Android Chrome.
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Sat Aug 20, 2022 2:03 pm Hi Bluesman,

project for requested fonts:
Arial
Arial Black
Jost Light
Jost Black
Merriweather Sans Light
Merriweather Sans ExtraBold

http://mixextra.sk/Test2/index.html
administrator password: admin

try changing the text, font, size.

I tested Firefox, Edge, Chrome, Android Internet, Android Chrome.
Yes... this works good.

The settings you published above are not the settings you use in this proof?
One more difference though... I don't know if it matters - you are using the "Editable content" tool and I am using the CMS tool...
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

I can also test in cms tool, the principle can be the same.

Can you send me a copy of the file "cmsadmin.php" from the server where you have published the project?
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Sat Aug 20, 2022 5:46 pm I can also test in cms tool, the principle can be the same.

Can you send me a copy of the file "cmsadmin.php" from the server where you have published the project?
Hi mixextra... can be good if we have a communication outside the forum? And just publish the solutions here. If you direct me to a contact form or something so I can send to you... email etc. If you want you can contact me through my signature in this post were I have a contact form :D
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Sat Aug 20, 2022 5:46 pm I can also test in cms tool, the principle can be the same.
I think there can be a difference because the CMS tools requires the MySQL database... (or thats what I'm using)
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

I have no experience with cms tool, I made one project according to the cms demo and it seems that it works with cms tool as well:

http://mixextra.sk/Test4/index.html
administrator password: admin

try changing the text, font, size.

If it works as you want I will post the whole solution as it works for me.
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

Hi mixextra... tnx, sorry but the "Administrator" link is broken?

Forbidden
You don't have permission to access /Test4/administrator.html on this server.

Or can be permissions settings...
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Sorry,

this is a hosting provider security issue.
What country are you logging in from? I set the GeoIP permission
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Mon Aug 22, 2022 8:57 am Sorry,

this is a hosting provider security issue.
What country are you logging in from? I set the GeoIP permission
Good morning... I'm in Ecuador
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi,

I hope it worked permission set to Ecuador (GeoIP - "EC").

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

click - "Administrator"
Username: none
Password: admin

clik - "Edit"
try the changes

clik - "Save"
edited content will appear on click - "Content"


(Alternatively, if you have an optional vpn, you can log in from a server from the countries of Slovakia (SK) or the Czech Republic (CZ), these are enabled by default by the provider.)

have a nice day
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Mon Aug 22, 2022 12:41 pm Hi,

I hope it worked permission set to Ecuador (GeoIP - "EC").

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

click - "Administrator"
Username: none
Password: admin

clik - "Edit"
try the changes

clik - "Save"
edited content will appear on click - "Content"


(Alternatively, if you have an optional vpn, you can log in from a server from the countries of Slovakia (SK) or the Czech Republic (CZ), these are enabled by default by the provider.)

have a nice day
That was better. The typefaces works also ok...? I am stunned. I checked your earlier settings and it seams to be same as mine when it comes to the fontlist. Do you have any other settings as CSS... I can not get it. Are the font installed on your server?

I did the test with Pablos example just as you did now and it seamed to work correctly. But it was after setting up my own design I started to modify the toolbar and fontlist.
The only difference in usage is that I use Layout grids for the design...
"Make My Day"

See my Website
mixextra
 
 
Posts: 99
Joined: Sat Mar 21, 2020 11:45 pm

Re: Summernote editor - how to modify?

Post by mixextra »

Hi Bluesman

he did a lot of tests before I was able to isolate the problem.enjoy the procedure:

This is the procedure that works for me with the SUMMERNOTE editor + the "CMS Admin" and "EditableContentAdmin" tools:

1.
Summernote generates """ characters when saving to the database. For example, we write the word "test" in the editor and select the font "Jost Black" and the size "14px".

summernote generates such code, which it writes to the database:

Code: Select all

<p><span style="font-family: &quot;Jost Black&quot;; font-size: 14px;">test</span><br></p>
and when retrieving the text from the database, it is not displayed correctly for the characters "&quot;"

before saving to the database it is necessary to replace "&quot;" for "one quote" so that the resulting code is:

Code: Select all

<p><span style="font-family: 'Jost Light'; font-size: 14px;">test</span><br></p>
I achieved this by adding "CMS Admin" or "EditableContentAdmin" to the php code after publishing to the server. Open "editablecontentadmin.php" or "cmsadmin.php" and find the line:

Code: Select all

$content = isset($_POST['content']) ? $_POST['content'] : '';
add the code under this line:

Code: Select all

$content = str_replace('&quot;', "'", $content);
and save changes.

Attention when publishing a new website to the server, it must be repeated!

2.
In the WWB project and in the "CMS Admin" or "EditableContentAdmin" element in the "Object Html/Before Tag" tab (CTR+H), it is necessary to complete the path for the used fonts, for example:

Code: Select all

<link href="NameProject.css" rel="stylesheet">
(I use not googleFonts in this case and add fonts to the server manually via WWB)
or

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Raleway:400&subset=latin-ext&display=swap" rel="stylesheet"> 
(I use it for googleFonts)

I don't know why, but the summernote editor doesn't see the css style listed in the header of the website and it is necessary to add this path to "CMS Admin" or "EditableContentAdmin".

Always test on a device browser that does not have fonts installed in WIN or WWB
I'm not a programmer, I tested this procedure with mysql and json database. Works well and as expected.

Have a nice day.


Perhaps Pablo could advise:
1. how to add "$content = str_replace('&quot;', "'", $content);" directly in WWB so that "editablecontentadmin.php" or "cmsadmin.php" does not have to be rewritten every time after publishing to the server.

2. why Summernote does not see the css style listed in the website header
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

Thanks a lot mixextra, shall try to wrap my head around this. But good if we can address Pablo and see if he has a simpler solution to this issue...
I shall try to get him notice this :D
"Make My Day"

See my Website
User avatar
Bluesman
 
 
Posts: 1115
Joined: Mon Feb 01, 2016 5:43 pm
Location: Sweden
Contact:

Re: Summernote editor - how to modify?

Post by Bluesman »

mixextra wrote: Mon Aug 22, 2022 4:01 pm Hi Bluesman

he did a lot of tests before I was able to isolate the problem.enjoy the procedure:

This is the procedure that works for me with the SUMMERNOTE editor + the "CMS Admin" and "EditableContentAdmin" tools:

1.
Summernote generates "&quot;" characters when saving to the database. For example, we write the word "test" in the editor and select the font "Jost Black" and the size "14px".

summernote generates such code, which it writes to the database:

Code: Select all

<p><span style="font-family: &quot;Jost Black&quot;; font-size: 14px;">test</span><br></p>
and when retrieving the text from the database, it is not displayed correctly for the characters "&quot;"

before saving to the database it is necessary to replace "&quot;" for "one quote" so that the resulting code is:

Code: Select all

<p><span style="font-family: 'Jost Light'; font-size: 14px;">test</span><br></p>
I achieved this by adding "CMS Admin" or "EditableContentAdmin" to the php code after publishing to the server. Open "editablecontentadmin.php" or "cmsadmin.php" and find the line:

Code: Select all

$content = isset($_POST['content']) ? $_POST['content'] : '';
add the code under this line:

Code: Select all

$content = str_replace('&quot;', "'", $content);
and save changes.

Attention when publishing a new website to the server, it must be repeated!

2.
In the WWB project and in the "CMS Admin" or "EditableContentAdmin" element in the "Object Html/Before Tag" tab (CTR+H), it is necessary to complete the path for the used fonts, for example:

Code: Select all

<link href="NameProject.css" rel="stylesheet">
(I use not googleFonts in this case and add fonts to the server manually via WWB)
or

Code: Select all

<link href="https://fonts.googleapis.com/css?family=Raleway:400&subset=latin-ext&display=swap" rel="stylesheet"> 
(I use it for googleFonts)

I don't know why, but the summernote editor doesn't see the css style listed in the header of the website and it is necessary to add this path to "CMS Admin" or "EditableContentAdmin".

Always test on a device browser that does not have fonts installed in WIN or WWB
I'm not a programmer, I tested this procedure with mysql and json database. Works well and as expected.

Have a nice day.


Perhaps Pablo could advise:
1. how to add "$content = str_replace('&quot;', "'", $content);" directly in WWB so that "editablecontentadmin.php" or "cmsadmin.php" does not have to be rewritten every time after publishing to the server.

2. why Summernote does not see the css style listed in the website header
Hi again mixextra... happy friday :D
Now Pablo added the "

Code: Select all

$content = str_replace('&quot;', "'", $content);
" thanks to you, so now the menu works and keeps the font changes after saving and enter. After this I tested to turn off the fonts used in the windows system... then I don't get the right fonts in the menu... the names are there but get standare serif and sans-serif... And when I have the fonts activated in system it show correct in menu and viewpage but not on external pc:s ??
Which procedure must I do that you adviced above for achieve this? I'm using the "@font.face fonts" in my projects...

After some trial 'n error empty cashes etc seams to work now. One mistake I did though was to install the fonts I wanted in WWBs @font-face, but I didn't use the font in the project so it didn't install the font to the server... so now works...
"Make My Day"

See my Website
Post Reply