close ad
Install the LAtest Updates to Work with CC 2017 and CC 2018
open ad
View Menu

Technical Support Forums

Free, outstanding support from WebAssist and your colleagues

rating

CKEditor 3 questions

Thread began 11/12/2012 10:39 am by bill3786 | Last modified 11/16/2012 3:37 pm by bill3786 | 2026 views | 13 replies |

bill3786

CKEditor 3 questions

Just incorporated Power CMS builder into a client's site for the first time and successfully created all the content areas. After seeing your other answers about CKEditor 4 that I posted, a few questions on version 3.

1. Can the editing window of CKEditor 3.6.5 somehow be made to mimic the real width of the content area on the live site so that the client will see a representative width in the editing window? We have a mixture of narrow and wide divs where content will be inserted and it would be easier for the client to see a true width where content was being inserted (this is obviously the great advantage of version 4 with its inline editing).

2. I'm finding the Power CMS builder facility instructions confusing to allow the client to create their own additional pages.
After creating a dreamweaver template, what are the necessary steps to do this?

3. When extra pages are added by the client can links be added on other pages by the client to navigate to the extra pages?

Sign in to reply to this post

Jason ByrnesWebAssist

1) on the admin_cms/contents_update.php and contents_insert.php pages, the wdith is set by the following line:

$CKEditor_config["width"] = "98%";


there is not a way to dynamically set this so you can have different widths for different content areas, but you can change the width globally by editing that line.

2 - 3 ) see the "Create New Pages from PowerCMS Templates" youtube video for details:
watch?v=kbplAlzNexI&list=PL21CA2EF37DE22B2C&index=2&feature=plpp_video

Sign in to reply to this post

bill3786

Thanks for point 1. (Currently looking into points 2 and 3)

The content area most used on the site is 810px wide so I started off with changing

$CKEditor_config["width"] = "98%"; to $CKEditor_config["width"] = "810px";

This was far too wide for the editor content area so gradually reduced it to get to 574px which gave the same effective editor window width as the site div width.

Now its much easier to see the position of the line breaks etc on the editor window as they match the position of the line breaks on the site.

This is much easier for the client to use.

Sign in to reply to this post

bill3786

This difference in widths is due to site default font family and size being different to the default font family and size in ckeditor.

Therefore, where can the default font family and size be set in ckeditor?

Sign in to reply to this post

Jason ByrnesWebAssist

CKEditor does not offer a way to change the default fonts or sizes, this is not an available setting.

Sign in to reply to this post

bill3786

Ok, thanks.

When I was searching for stuff on the default font family for ckeditor I came across this on you tube

ckeditor-default-style-or-class-for-the-textarea

watch?v=-aY5qm8KCGU

Would be interested in your opinion on this, I couldnt even find which document he was editing.

Sign in to reply to this post

Jason ByrnesWebAssist

you can try editing the body class of the webassist/ckeditor/contents.css to set the color and font family

Sign in to reply to this post

bill3786

Thanks, that seems to do the trick.

Had to readjust the width of $CKEditor_config["width"] to compensate for the change of font and size.

The editor window now shows the same width and fonts, background colour etc. as the rendered site.

The only drawback is that it introduces a horizontal scroll bar in the editor window but appart from that, it is a true repesentation of the site page and will be much easier for the client to create their own content as its WYSIWYG.

Sign in to reply to this post

bill3786

Please can you clarify a few points on ckeditor

1. Do the settings in the webassist/ckeditor/contents.css file only control what is displayed in the editor window or what is transfered to the cms content areas?

2. What takes priority in the cms content areas if there are already styles set for the body, h1 and h2 for the site pages.

3. Where can the h1 and h2 styles be set for ckeditor?

Sign in to reply to this post

Jason ByrnesWebAssist

Originally Said By: bill3786
  Please can you clarify a few points on ckeditor

1. Do the settings in the webassist/ckeditor/contents.css file only control what is displayed in the editor window or what is transfered to the cms content areas?  


the webassist/ckeditor/contents.css file only effects what is displayed in the CKEditor window.

Originally Said By: bill3786
  2. What takes priority in the cms content areas if there are already styles set for the body, h1 and h2 for the site pages.  



the styles in the webassist/ckeditor/contents.css file take precedence in the CKEditor window

Originally Said By: bill3786
  3. Where can the h1 and h2 styles be set for ckeditor?  





you can add style for the h1 and h2 elements to the webassist/ckeditor/contents.css file to change how they appear in the CKEditor Window.

Sign in to reply to this post
loading

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