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