Summernote editor - how to modify?

[Bluesman]

Hi all... Installed the "Summernote" editor with cms tools... I have heard good things about it, but looks a litte limited. Have checked in the forum for suggestions but can't find. One thing is the limitation of fonts that are active in the list, another is that you can nor set your own sizes?,
Just the styles; Header 1, Header 2,... ? I'm checking the Summernorte website but can not figure out how to implement the coding?

[mixextra]

HI,
I set the options in the Editor/Editor Settings item in the property inspector of the cms object (editable content).
For example, this is my setup, which is deliberately limited to only certain options:

Code: Select all

'toolbar': [
             ['style', ['style', ]],
             ['font', ['fontname', 'fontsize', 'bold', 'italic', 'underline', 'clear', ]],
             ['color', ['forecolor', 'backcolor', ]],
             ['insert', ['link', 'picture', ]],
             ['misc', ['undo', 'redo', 'codeview', ]],
           ],

'fontNames': ['Raleway'],
'fontNamesIgnoreCheck': ['Raleway'],
'fontSizes': ['15'],
'fontSizesIgnoreCheck': ['15']

I have collected some settings that you can combine as needed:

Code: Select all

'toolbar': [
            ['style', ['style',]],
            ['font', ['fontname', 'fontsize', 'bold', 'italic', 'strikethrough', 'clear',]],
            ['color', ['forecolor', 'backcolor', ]],
            ['para', ['ul', 'ol', 'height']],
            ['insert', ['link']],
            ['misc', ['picture', 'fullscreen', 'codeview', 'print', 'help', ]],
        ],

'fontNames': ['Spectral', 'Quicksand'],
'fontNamesIgnoreCheck': ['Spectral', 'Quicksand']

toolbar: [
    // [groupName, [list of button]]
   ['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']]
  ]
  
toolbar: [
    // [groupName, [list of button]]
    ['style', ['bold', 'italic', 'underline', 'clear']],
    ['font', ['strikethrough', 'superscript', 'subscript']],
    ['fontsize', ['fontsize']],
    ['color', ['color']],
    ['para', ['ul', 'ol', 'paragraph']],
    ['height', ['height']]
    
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']],

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']],

[Bluesman]

Thanks mixextra! Sorry not coming back to you. I was using the codes in a totally wrong way, but now I gripped it
So now I can use your examples and it's very helpful.

[Bluesman]

Hi again mixextra. Tnx for your help. I have started to figure out how to do some changes, the toolbar contains now the buttons/menus that I want... but I have not still managed to fill up the font menu with more fonts? For example I added one font "Merriweather" to the code you had... but clearly I am not implementing this in the right place and in the right way... please am greatful for advice.

This is the code I trying to implement

Code: Select all

'fontNames': ['Spectral', 'Quicksand'], 'Merriweather'],
'fontNamesIgnoreCheck': ['Spectral', 'Quicksand'], 'Merriweather']

To this code that works well:

Code: Select all

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

[mixextra]

Hi Bluesman,

you can try for example like this:

Code: Select all

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

'fontNames': ['Spectral', 'Quicksand', 'Merriweather'],
'fontNamesIgnoreCheck': ['Spectral', 'Quicksand', 'Merriweather']

with these options, you can precisely specify tools in cms for users to use during editing, so that they do not spoil the design of the page, such as fonts, font size, etc.

[Bluesman]

Hi Bluesman,

you can try for example like this:

Code: Select all

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

'fontNames': ['Spectral', 'Quicksand', 'Merriweather'],
'fontNamesIgnoreCheck': ['Spectral', 'Quicksand', 'Merriweather']

with these options, you can precisely specify tools in cms for users to use during editing, so that they do not spoil the design of the page, such as fonts, font size, etc.

Hi mixextra... tnx a lot. That works. Just that the different styles ex italic, bold, bold italic etc doesnt work... And how do I know that the fonts I setup in the list works on the web? Shall I install this fonts as usual in wwb with the webfonts...?
Example fontname: Merriweather Sans Light, Merriweather Sans Light Italic....

Now I have changed the name of Merriweather in the code to Merriweather Sans Light. I get it in the menu but when viewing in webbrowser the font gets a little bolder. I have the webfont Merriweather Sans Light installed with WWB...

[mixextra]

Hi,
I don't know for sure, but I think that the editor itself does not add any font to the website that is not directly part of it.
If the chosen specific font is not part of the website, it will probably be replaced by a safe font.
Pablo could react to these connections as it is...

Off topic.......I had a problem with the white background of the Summernote editor on one of my pages. The page itself had a dark background style and the white font text was not visible when editing in cms. If you have the same problem, I have a solution to change the white background of Summernote to transparent, that means the editor inherits the background color from the cms element.

[Bluesman]

Hi,
I don't know for sure, but I think that the editor itself does not add any font to the website that is not directly part of it.
If the chosen specific font is not part of the website, it will probably be replaced by a safe font.
Pablo could react to these connections as it is...

Off topic.......I had a problem with the white background of the Summernote editor on one of my pages. The page itself had a dark background style and the white font text was not visible when editing in cms. If you have the same problem, I have a solution to change the white background of Summernote to transparent, that means the editor inherits the background color from the cms element.

Tnx for your concern mixextra
It doesn't make sense... The font I try to make work is "Merriweather Sans Light" I have it in the editors menu, it is the main font of the website... works good everywere except summernote editor. I can set it, but it is not exactly... little bolder that I wrote before. When I save and enter the edit page again, the font has changed back to a default Arial bold...??
I have the font with webfonts installed for the site, I have also added the font to the font folder of summernote on the server??
Here some pics:




Of topic:
I have not yet come up on this issue, but surely I will do later on... so first I must solve the font issue so I can go on with my project...
Any ideas?

[mixextra]

HI,

do you want this kind of behavior? ... after logging in, open summernote, click in the text field and it will immediately display your font even after changing and saving ...

you can try to edit and save. don't forget to delete cookies

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

[Bluesman]

HI,

do you want this kind of behavior? ... after logging in, open summernote, click in the text field and it will immediately display your font even after changing and saving ...

you can try to edit and save. don't forget to delete cookies

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

Buenos dias mixextra, yes that seams to work perfect... I don't get arround mine that is changing all the time...
I have 7 fonts listed in my menu... but it changes all the time. Do you copy the fonts you use in the dedicated font folder in summernote folder on server?

[Bluesman]

HI,

do you want this kind of behavior? ... after logging in, open summernote, click in the text field and it will immediately display your font even after changing and saving ...

you can try to edit and save. don't forget to delete cookies

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

Yes... please
I'm stunned why it don't works for me? I have tried several options, instlled the fonts to the "fonts" folder on server... installed them in the project... but no...?! How do you manage this

[mixextra]

HI,

In my case, the font displayed in the summernote text area during editing is the same as the font set in the cms admin element, which is set in the property inspector (summernote probably inherits the font displayed in the text area from the cms admin element)

This means that the selected font type is saved in the edited text of the website when editing in summernote, but after the next opening, the font from the cms admin element is displayed in the text editing area in summernote.

From this behavior, I assume that summernote is suitable when it is required to edit the text of the same font, which is the same as the font of the cms element and the edited text on the page.

I cannot explain this behavior better, it is possible that it is related to the WWB code, on the basis of which summernote always selects the font that is set in the cms admin element when opening.

ps: I do not install fonts in summernote on the server.

[Bluesman]

Goodmorning again mixextra... tnx again for trying to help me out of this. I was having some thoughts in your way, but since the font behaves correct until I shall edit the post/page a second time... when it changes.
The fonlist in edit mode is exactly the same I have setted in the (admin element) and it behaves correctly during the editing. Correct fonts and sizes are showing in the editing area, but after saving and enter the post/page again it has changed. Two of the fonts in the list adapt settings and it is: Arial and Merriweather. They keep the changes in the right way?
Other websafe fonts like Times is not working? Which is a mystery... How do you write the font names in the "editor settings" ?
For me looks like there is a serverside setting that prevents for saving... but that some fonts are saved and some not talks against that



In code if you want to test

Code: Select all

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

'fontNames': ['Arial Regular', 'Arial Black', 'Times New Roman', 'Merriweather', 'Merriweather Sans'],
'fontNamesIgnoreCheck': ['Arial Regular', 'Arial Black', 'Times New Roman', 'Merriweather', 'Merriweather Sans']

How it looks in editor view



1. Menu ok
2. The Merriweather text ok
3. Was setted to Times New Roman but changed back to Arial

Pics and videos are saved...

[Bluesman]

Hi mixextra, tnx for all help. I have some working fonts in the Summernote editor menu now I have got the fonts that I want but I can not explain why they in some tryes doesn't work and in some does? It seams to depend in which order and what you type the fonts to. When in some cases the font doesn't work I have placed it in another place in the menu and then it works
For example one font "Courier New" they used in the "Summernote Deep dive" page, but didn't work for me... I then deleted the "New" part in the name and the font started to work correctly? Did some other changes to and got the fonts I shall use working For example I completed the menu with the Bold and Italic buttons which also seams to have stabilized the function of the fonts.
So wether I don't know the structure of this... I have a menu that works for the project I shall proceed with. I'm happy with that

[Bluesman]

Hi all... aspecially "mixextra" that I got some good input from Now it starts to look and work nice with The Summernote editor in the CMS tool. I have managed to make the most important modefications for design work; the typefaces I want, customized the size list and the line hight list.
Allthough there is still a "headbanger" some fonts that should work with the editor and that I can see other use... don't work for me For exampel; Arial Black, Palatino, Merriweather Sans Light, Gill Sans and some other... can not figure out this.

If someone is interested of the toolbar I have put together I show some pics beneth and down under the code that shall be inserted in the Admin property tool at the Summernote editor settings:

Full toolbar


Font menu


Font sizes


Line hight


The code:

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': ['Courier', 'Franklin Gothic', 'Fran', 'Georgia', 'Jost', 'Helvetica', 'Impact', 'Merriweather', 'Tahoma', 'Times', 'Verdana'],
'fontNamesIgnoreCheck': ['Courier', 'Franklin Gothic', 'Fran', 'Georgia', 'Jost', 'Helvetica', 'Impact', 'Merriweather', 'Tahoma', 'Times', 'Verdana'],

'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']

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

[Bluesman]

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

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

[Bluesman]

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

[Bluesman]

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

[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]

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.

[Bluesman]

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

[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?

[Bluesman]

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

[Bluesman]

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)

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

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

[mixextra]

Sorry,

this is a hosting provider security issue.
What country are you logging in from? I set the GeoIP permission

[Bluesman]

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

[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

[Bluesman]

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

[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 """

before saving to the database it is necessary to replace """ 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('"', "'", $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('"', "'", $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

[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

[Bluesman]

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

before saving to the database it is necessary to replace """ 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('"', "'", $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('"', "'", $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
Now Pablo added the "

Code: Select all

$content = str_replace('"', "'", $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...