close ad
Databridge V2 with MySQLi support IS Now Available!
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

Modifying HTML Editor Styles and Font Dropdowns

Thread began 11/04/2019 5:50 pm by BillHobbs | Last modified 11/08/2019 8:47 pm by Ray Borduin | 53 views | 4 replies |

BillHobbs

Modifying HTML Editor Styles and Font Dropdowns

In the latest HTML Editor is there a tutorial on how to change the dropdown values for the Styles and Font values? I want to have custom values for each of these dropdowns. I would like it consistent across the whole website so that they all have the same dropdown.

Also, I'd like to make the session longer than the default login time. Like a day instead of a few minutes.

Sign in to reply to this post

Ray BorduinWebAssist

There is a UI for adding styles that is part of the HTML Editor interface. Just click the edit button next to the Styles List dropdown to define your own.

It will edit the styles.js file that is in your webassist/ckeditor folder. It will be shared and can be edited manually as well. The file is fairly well documented if you want to open it up and give it a shot.

To edit the fonts you would have to manually edit your config.js file in the same folder. You can add fonts using this sytnax in the config function that is already defined:

config.font_names =
'Arial/Arial, Helvetica, sans-serif;' +
'Times New Roman/Times New Roman, Times, serif;' +
'Verdana';



The name of the font that appears in the list is before the slash and the actual value added the code is after.

Changing the session timeout can be done by updating your php.ini file. The two settings that are important for that are:

session.cookie_lifetime
session.gc_maxlifetime
Sign in to reply to this post

BillHobbs

Thanks Ray i'll try this.

Sign in to reply to this post

BillHobbs

Okay I got the Styles and Font list to show what I want, but there are a couple of problems.

1. This code in the styles.js file doesn't show up: { name: 'Square Bulleted List', element: 'ul', styles: { 'list-style-type': 'square' } },

2. When I select a font from the dropdown it isn't displaying the font selected. Do I need to add a style sheet and if I do, is it added to the page header or is there another way of adding the font styles to the WYSIWYG?

I've attached the two files.

Attached Files
config.js
styles.js
Sign in to reply to this post

Ray BorduinWebAssist

Do the other styles work?

It may be a limitation in styles and UL elements. Are you using the latest version of CKEditor? I found this in a google search:

https://ckeditor.com/old/forums/CKEditor-3.x/Add-Style-Unordered-List


The full documentation on editing styles is here:
https://ckeditor.com/docs/ckeditor4/latest/guide/dev_howtos_styles.html

If you send me a url and ftp access to your site then I could take a look and see what I can find.

Sign in to reply to this post

Build websites with a little help from your friends

Your friends over here at WebAssist! These Dreamweaver extensions will assist you in building unlimited, custom websites.

Build websites from already-built web applications

These out-of-the-box solutions provide you proven, tested applications that can be up and running now.  Build a store, a gallery, or a web-based email solution.

Want your website pre-built and hosted?

Close Windowclose

Rate your experience or provide feedback on this page

Account or customer service questions?
Please user our contact form.

Need technical support?
Please visit support to ask a question

Content

rating

Layout

rating

Ease of use

rating

security code refresh image

We do not respond to comments submitted from this page directly, but we do read and analyze any feedback and will use it to help make your experience better in the future.

Close Windowclose

We were unable to retrieve the attached file

Close Windowclose

Attach and remove files

add attachmentAdd attachment
Close Windowclose

Enter the URL you would like to link to in your post

Close Windowclose

This is how you use right click RTF editing

Enable right click RTF editing option allows you to add html markup into your tutorial such as images, bulleted lists, files and more...

-- click to close --

Uploading file...