WYSIWYG file manager/image editor (FCK/TinyMCE)

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

Please do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.

This forum is for discussing mojoPortal development

This forum is only for questions or discussions about working with the mojoPortal source code in Visual Studio, obtaining the source code from the repository, developing custom features, etc. If your question is not along these lines this is not the right forum. Please try to post your question in the appropriate forum.

You can monitor commits to the repository from this page. We also recommend developers to subscribe to email notifications in the developer forum as occasionally important things are announced.

Before posting questions here you might want to review the developer documentation.

Do not post questions about design, CSS, or skinning here. Use the Help With Skins Forum for those questions.
This thread is closed to new posts. You must sign in to post in the forums.
8/27/2009 7:49:36 AM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

You can add your own style templates and use them in TinyMCE the same as in FCKeditor. What you can't do is add toolbar items for things like font size colors etc whereas in FCKeditor you could override this by the custom config file and add those items to the toolbar. For a CMS its a bad idea though because you will then have your users creating hard coded styles in your content that are not subject to skinning. To have a skinnable site where the style changes complately by changing the skin you must use only css and no hard coded styles. The hard coded styles that your users enter into the system will still be there and may look awful a year from now when you design a new skin and those hard coded styles don't match the skin.

Style templates allow you to define css classes that your users can apply from the style dropdown in the editor. Then if you later make a new skin you can change the style rules accordingly in the new skin for the same css classes.

To build a UI for customizing the TinyMCE would be a big job to figure out how to validate that approopriate settings are made else users can easily cause a javascript errors and break the editor completely.

The CKeditor looks like it has a config file but not the same as FCKeditor, not much in there and no clue how to configure it because there is no documentation about it. As soon as I learn how I will be removing the unwanted toolbar items from that editor as well. For now I consider it an experimental editor.

Best,

Joe

8/27/2009 8:09:04 AM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

What I will do for the next release is add a Web.config setting

<add key="TinyMCE:IncludeHardCodedStyleTools" value="false" />

if you set it to true then my code will include those toolbar items but I will strongly recommend that people don't do that for the reasons mentioned.

I have already implemented the setting for the editor skins so that will also be in the next release and will be in svn trunk in te next day or so.

<!--- valid options for the TinyMCE skin are: default, o2k7default, o2k7silver, o2k7black -->

<add key="TinyMCE:Skin" value="default" />

To my eyes the default skin is the cleanest and best looking.

Best,

Joe

8/27/2009 9:10:00 PM
Gravatar
Total Posts 34

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

 What I will do for the next release is add a Web.config setting

 

Sweet! much appreciated

 

 You can add your own style templates and use them in TinyMCE the same as in FCKeditor.

 

Hmm, I have had trouble getting this to show up in the drop down, it would solve all my "shortcut" problems. (I did read everything in the documentation about how to do this originally just making sure I am doing it right)

 

In my stylesheet for instance, I have:

 

h1.blue {color: #09F; font-size:xx-large; font-weight:bold; font-style:italic;}

 

and in the content style templates I have:

 

Name: H1 Blue

Element: H1

CSS class: blue

Is Active: True

 

Lastly, in user.config I have:

 

<add key="CacheCssOnServer" value="false" />

<add key="CacheCssInBrowser" value="false" />

<add key="AddSystemStyleTemplatesAboveSiteTemplates" value="true" />

<add key="AddSystemStyleTemplatesBelowSiteTemplates" value="false" />

 

But I don't see anything appear so must be missing something?

8/28/2009 10:12:22 AM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

For style templates you should just define a css class not attached to an element like .blue{} rather than h1.blue{}

Any style templates you create should immediately show up in the dropdown, but there is a difference in the way it works in TinyMCE vs FCKeditor. When creating a style template we specify an element, FCK uses this but TinyMCE does not it only uses the class name. FCKEditor will in some cases wrap the selected content in the element say if the element is defined as span and you select some text it will wrap it in a span and assign the class. In other cases FCK will filter the templates according to the element so if you create a style template with the img element FCK will only apply it if you select an img in the editor.

Tiny MCE doesn't use the element we define at all. I think if you first create the text, select it, choose heading1 from the format dropdown then select your style template it should apply the class to the h1. If you just select text and apply the style I think it just wraps a p around the text and applies the class.

One thing to be aware of is the site heading is h1 the module title is h2 so really inside the content you should start with h3 to structure it ideally.

Note that changes you make to your user.config are not detected automatically by the runtime like changes to Web.config are, so if you make a change to user.config you must touch web.config to make it reload config settings.

Hope it helps,

Joe

8/28/2009 12:26:22 PM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

I have completed the discussed improvements and am working now on packaging a new release. Check out the built in image resizing in TinyMCE on demo.mojoportal.com.

Best,

Joe

8/28/2009 12:41:17 PM
Gravatar
Total Posts 215

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

That is very slick!!!!!!!!!!!!!!  Nice work Joe, and glad I could contribute a little there. This is now perfect for users and should save me some space and bandwidth on the web server. All those 200000px wide images people upload add up after a while ;)

8/28/2009 2:25:10 PM
Gravatar
Total Posts 34

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

Hmm, still think I am missing something, in the style template editor it won't let me leave the element field blank (Using TinyMCE)

 

 http://i117.photobucket.com/albums/o74/Aquapussy/1-1.png

 

 http://i117.photobucket.com/albums/o74/Aquapussy/2-1.png

8/28/2009 4:48:03 PM
Gravatar
Total Posts 2207

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

I noticed on the demo site that you can't use the TinyMCE file browser to insert a link to a site page anymore.

Has this functionality been moved to a different button that I'm not seeing or was it forgotten. Undecided

-Joe

8/28/2009 5:24:30 PM
Gravatar
Total Posts 215

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

Good point indeed - very important.    Joe: TinyMCE allows for a "link list" that will display a drop-down box when you pull up the hyperlink window.

external_link_list_url : "link_list.aspx",

Then in this link_list.aspx structure would look like this:

var tinyMCELinkList = new Array(
["Moxiecode", http://www.moxiecode.com],
["Freshmeat", http://www.freshmeat.com],
["Sourceforge", http://www.sourceforge.com]
);

You could insert the logic you use to create the site map for example to display a listing of the pages in the site. Then the user would simply have to select from the drop-down menu to link to an internal page. It would be nice if the drop-down menu showed some sort of structure with indentation for ease of use.

If I knew .NET/mojo better I'd try and built this, but that's the general concept.

 

NOTE: It would also be slick to include an image list of files in the "media" folder only. For small sites or if the user knew exactly what they wanted this woudl save a step.
external_image_list_url : "image_list.aspx",

Here's an ASP version of this image list I have built that may provide some ideas: (it includes all sub directories as well).
http://www.proactivedesign.net/_admin/upload-area/files/mojoportal/image_list.zip

8/28/2009 5:31:41 PM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

Linking to pages is working right in the 2.3.1.5 release. I must have introduced this bug fixing something or implementing the image resizing. I'll look into it in the morning. Thanks for finding it and pointing it out Joe.

Best,

Joe

8/29/2009 12:06:26 PM
Gravatar
Total Posts 18439

Re: WYSIWYG file manager/image editor (FCK/TinyMCE)

The link browser is now fixed and allows browsing and linking to pages in the site as it did before.

Aqua Kitty, element is required because FCKeditor requires it and you could switch to FCKeditor at any time. Just put in an element that you think would be reasonable for use in FCKeditor and understand that it is not used in TinyMCE but you still must put something there.

The new 2.3.1.6 release is available now with the new improvements.

Best,

Joe

You must sign in to post in the forums. This thread is closed to new posts.