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/28/2019 2:35 pm by Ray Borduin | 148 views | 8 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
Did this help? Tips are appreciated...

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
Did this help? Tips are appreciated...

BillHobbs

I'm still having an issue with the dropdown displaying the fonts. I've sent the logins you requested in the private message. Thanks.

Sign in to reply to this post

Ray BorduinWebAssist

To get the fonts to display, you have to add the font definitions to the webassist/ckeditor/contents.css file.

I've add the last three to the list you can find it on lines 208-219

Sign in to reply to this post
Did this help? Tips are appreciated...

BillHobbs

-- Disregard This-- I figured out what the problem was. It was the fonts themselves that were the problem. Of course I chose two fonts to test that wouldn't work. Most of the others worked fine. --




t've got the fonts dropdown to show the font and it attaches the proper css code around the text. Now the problem is some fonts show up correctly on the pages that display the HTML Editors source code and some don't. The fonts display correctly on the admin page that has the HTML Editor on all three browsers, but not on pages that display the HTML Editor content.

The fonts displays correctly on the pages using Safari, but not on Chrome and Firefox. I assume it's a browser issue reading the CSS styles.

Here is what I am using:

HTML Editor coded text:
<span style="font-family:Pixie;"><span style="font-size:28px;">Body Text</span></span>

contents.css:
@font-face {
font-family: Pixie;
src: url(../../fonts/Pixie.ttf);
}

fonts.css -- this is linked to the page that displays the HTML Editor content.
@font-face {
font-family: 'Pixie';
src: url('fonts/Pixie.eot');
src: url('fonts/Pixie.eot?#iefix') format('embedded-opentype'),
url('fonts/Pixie.woff') format('woff'),
url('fonts/Pixie.ttf') format('truetype'),
url('fonts/Pixie.svg#Pixie') format('svg');
font-weight: normal;
font-style: normal;
}

Sign in to reply to this post

anonymous

Thanks for the information Ray!

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