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/12/2009 8:04:44 AM
Gravatar
Total Posts 221

WYSIWYG file manager/image editor (FCK/TinyMCE)

I'm looking into the WYSIWYG editors provided within the CMS and trying to determine the best one to go with. Along with this I'd really like to have a better file/upload/image editor as well (even if it costs a little something). The default FCK option works OK, but I've had experience with TinyMCE on other projects and it feels more polished to me. They offer (for purchase) a really nice file manager and image editor plug-in as well.

I'm mostly curious if anyone has successfully implented any advanced functionality around this topic. Anyone get TinyMCE working with it's plug-ins? I suspect this isn't easy out fo the box with the way it needs to integrate with mojoPortal. Or maybe there's a plug-in for FCK that does the file manger/image editing that will integrate easier?

My clients are all computer boneheads and I need their experience to be as simple as possible, yet functional. They need to upload and manage documents and photos and do not have image editing software on their computers. This is why an image editing plug-in would be great, all it needs to do is resize, compress and save. And then if the file manager could limit them to one main "content" folder where they don't see any other directories that would be ideal, thumbnail previews would be great too :)

Thanks for any help that's out there or pointing me to an existing post if there is one, I looked but didn't find much.

8/13/2009 5:35:18 AM
Gravatar
Total Posts 18439

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

My ultimate goal is to build that kind of functionality in a way that I can plug it in to the various supported editors but its not a trivial development task. I can't use commercial add ons so I have not pursued looking into integration with them. I know that there exists CKFinder for FCKeditor but I don't know the integration details. I have my eye on CKeditor which is the replacement for FCKeditor, but currently FCKeditor is the only one that has image browse and upload out of the box, though it does not have thumbnail browsing nor image resizing.

The version of TinyMCE we have is admittedly very old, I tried to upgrade once but it broke so I backed out of it, when I get a chance I'll give it another try. But currently the Content Templates and Style system is only integrated with FCKeditor so that is the editor I use and recommend most at the moment.

Best,

Joe

8/13/2009 9:14:36 AM
Gravatar
Total Posts 221

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

Thanks for the feedback.

Or maybe you integrate a commercial upload/image editor as an add-on module? Add the cost of the commercial license and $50-$75 for you. Maybe the module costs $150 or so (just guessing)? Just an option that might be easier/quicker and free up development time. I'd spend $150 today if there was a solution I could just plug-in.

8/14/2009 5:40:03 AM
Gravatar
Total Posts 18439

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

Just fyi, yesterday I spent the day struggling to get the newest version of TinyMCE working. There was a bug in it that was preventing it from updatng the textarea so it was not updating the content back on the server. Its supposed to automatically detect when the form submits and update the text area with the content from the iframe wysiwyg. Anyway I conquered in the end, it turns out if you instantiate the editor using exact mode with the id of the textarea it has this bug where it never updates, but if you instantiate based on a css class it works.

So, now that we will have the new TinyMCE I'm looking at integrating the content templates and styles and then building my own image browser for it. Have to admit their documentation is very good, its more clear how to build a plugin for it than for FCKeditor or CKEditor. I really need to be working on my next product Fund Raiser Pro but sometimes I can't help myself and have to work on what is interesting to me at the moment. ;-)

Best,

Joe

8/14/2009 9:31:25 AM
Gravatar
Total Posts 18

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

We have successfully integrated the Tereik WYSIWYG editor into our Mojo Portal Solution, and have also written some features around the Image, Flash and Document managers. Telerik provide some verygood tools, but unfortunately they are not cheap.

In order to integrate the RadEditor (Teleriks WYSIWYG editor), Itook one of the existing editor providers and edited it. It didn't take too long and was quite easy.

Kev

8/14/2009 9:35:54 AM
Gravatar
Total Posts 221

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

You rock!  I also have used both FCK and TinyMCE, I really like Tiny as well and you're right, the documentation is excellent - many options that can be tweaked. FCK always feels a little clunky to me from a UI perspectice, but both do the job.

My offer below stands, so when the upload/image tool is complete I'll be donating $150 to your work. Thanks.

 

*Somewhat related, but it would be nice it Content authors/admins/editors could only see ONE folder in the "files/upload" area. Ideally they'd have just one choice as far as where they should store all their PDF/Word/videos/images/etc. They should be allowed to create sub-directories, but not see all the other more admin type of folders in the files area. Too many confusing options for one, and possibly dangerous if they start mucking up the skins folder for example.

8/17/2009 5:19:20 AM
Gravatar
Total Posts 18439

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

Kevin,

I'm sure others would love to be able to use the provider you implemented if you wanted to share it on the Community Downloads

Eric,

I can't help myself, I'm in the process of building a file browser/manager for TinyMCE. Already got the browsing part working. Not sure it will have image resizing in the first iteration but it does allow previewing the images so its going to be a little better than what we have in FCKeditor today.

I've also got the content templates and content styles integrated and working in TinyMCE. Have a feeling I will be making TinyMCE the default on new installations.

Cheers,

Joe

 

8/19/2009 2:20:58 PM
Gravatar
Total Posts 18439

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

Hi all,

Just a quick post to mention I've uploaded the latest build to demo.mojoportal.com which has the new TinyMCE file browser and I've set it as the editor though of course someone may change it in site settings.

Would be interested in your feedback. One thing I noticed right away after trying it on the demo was that I need a way to get back to the root folder once you have drilled down to other folders. Will work on that tomorrow, for now you could dismiss the dialog and open it again.

Been working on this the past few days,it has not been without its challenges but its been kind of fun. Definitely this is going to be easier to evolve since the dialog itself is in .NET whereas in FCKeditor the dialogs are using a built in html frameset and all you can do is supply xml data. 

Notice that content templates and content styles work too.

Admins get to browse/upload from /Data/Sites/[SiteID]/ but non admins can either browse/upload to  /Data/Sites/[SiteID]/media/ or /Data/Sites/[SiteID]/userfiles/[UserGuid]/ depending on the permission settings I've added in site settings under Security > Permissions

Have a look and let me know what you think.

Best,

Joe

8/19/2009 2:39:36 PM
Gravatar
Total Posts 2253

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

Well, you've been really busy. I really like the changes you have made with the security/permissions stuff and the TinyMCE changes are great! I think a lot of people are going to love using TinyMCE vs FCKEditor.

I made some changes to FCKEditor yesterday to make it show thumbnails for images. Problem is, it tries to show thumbnails for everything else too. I'll keep that on my site until the next mojo release.

I think making TinyMCE the default will be a good step considering FCKEditor is being replaced by CKEditor anyway.

A paginated view of thumbnails for the TinyMCE preview functionality would be nice because clicking on each file to see the preview takes a while to find what you are looking for. That kind of functionality isn't immediate though becuase what you have done is so much better than what we have with FCK anyway!

Thanks for your hard work!

-Joe D.

8/19/2009 2:48:38 PM
Gravatar
Total Posts 2253

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

Oh yeah, one more thing. TinyMCE doesn't appear to have the very annoying extra <p> tag issue like FCKEditor!

8/19/2009 3:10:09 PM
Gravatar
Total Posts 221

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

Yea, this is looking SWEET! It's much more user friendly and easy to figure out. The TinyMCE feels more modern and sexy too. Here are my comments/questions so far:

1) The permissions for uploading is HUGE, I greatly appreciate that one. My users are idiots and this is the only way I'd trust them editing their web site. Very, very cool.

2) The file manager/image viewer is greatly improved. Previewing the images was critical.
    - I don't see a way for content publishers to "delete" files in the file manager. Maybe a little red X next to the left of each file name?
    - Not sure how possible, but possibly a "max" prevew size limitator. People are going to upload 800x800 photos and it would be nice if the preview wasn't quite that large. Not critical but a nice to have.
    - It might be good to rearrange the file manger interface a little so it's clearer how to create a new folder, upload a new file and make a file selection. The form fields could be shorter to give you more room, most authors will only be visually looking at this and don't know what the paths mean anyhow. If there was a way so that at each folder level it was somehow clearer where you are so when a user uploads or creates a new folder it goes in the right place. If you're curious I could put a graphical layoutout togeter for you just as food for thought. Nothign too fancy, just to break the options up a little.
    - If you are previewing a larger image the list of files folders centers next to the image instead of staying at the top. Aligning to the top so it stays in that position would be better.
    - There's a bug in the demo area. Log in as eric@eric.com / eric and go to file manager. If you click on the eric test folder I created it keeps repeating itself and the files over and over and over again.
   - I like the way the folders expand and collapse, very elegant!

I'll play around more later!!! Gotta run.....

8/19/2009 5:45:04 PM
Gravatar
Total Posts 221

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

As promised, enjoy the 30 beers Joe! Can't wait to see this functionality in the production release!

8/20/2009 6:55:47 AM
Gravatar
Total Posts 18439

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

Hey Eric,

Many thanks! It is very appreciated and very needed!

For this coming release I am only targeting it to be as good or better than what we have now in FCKeditor, so its almost ready, just needs a few tweaks and fixes for things like you pointed out about the folders listing multiple times.

But it will be a lot easier to improve this going forward than it was with FCKeditor because the dialog is in .NET.

Really I'm kind of torn because I'm not making enough revenue and still operating at a loss against my savings every month. I could take what I have and make a much more enhanced version with thumbnail browsing etc and sell it as an add on. But then again I see the editor experience as one of the most important aspects of a CMS and having those more advanced features built in out of the box may help distinguish mojoPortal among the competition. But then others will probably copy my code to improve their own so competitive advantage may be short lived.

Anyway, getting very close to a new release.

Best,

Joe

8/20/2009 9:40:41 AM
Gravatar
Total Posts 221

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

We need to figure out a way to get this CMS more exposure. I really think it's great. I've used DNN for years now with a 300 child portal installation and HATE it. It's slow, buggy, complex, unpolished and not nearly as easy to work with skins and to build custom modules as Mojo.

You should encourage others in this community to build modules for mojo as well and resell them. Maybe they get 15% of sales or something like that on the ones they've built? I bet there are users that have built themselves modules for various purposes but have no incentive to really share. Sharing is nice, but "incentive" probably would help people part with what they've built.

8/20/2009 9:54:26 AM
Gravatar
Total Posts 2253

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

10 Beers your way Joe. Thanks for your hard work!

Eric, I couldn't agree more. mojoPortal is a very good product. If I was more of a developer, I would be writing modules and contributing them. Instead, I can only help in the Forums, with documentation, donations, and of course, pushing it to my customers. Helping in the Forums is kind of hit and miss because Joe is so darn good at responding to dang near every single post! I've not seen that kind of dedication in other communities.

-Joe D.

8/20/2009 10:21:56 AM
Gravatar
Total Posts 18439

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

Hey Joe,

Many thanks for the beers and for the help in the forums. Its a big help. Sometimes answering forum posts eats up a lot of my morning when I could be working on improvements to mojoPortal. It really helped having you take care of some of them today.

I definitely want to encourage others to develop and sell add on features. I'm happy to even link to their products if they don't directly compete with my own. I think developing and supporting a commerical product is a lot different than just implementing something for a particular customer. It has to be polished up a lot more for general consumption.

Eventually I would like to be able to let 3rd parties sell items in my store so I could earn commissions but the WebStore feature has a long way to go to really support a market place with multiple vendors. I think there are a lot of business logistics to work out too as far as distributing payments and keeping things transparent. Also it seems it could hurt my reputation if a vendor does not support their product well and its for sale on my site.

Best,

Joe

8/23/2009 11:51:14 AM
Gravatar
Total Posts 18439

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

Check out the latest build on demo.mojoportal.com, I got the spelling checker working in TinyMCE, its really nice. You click the spellchecker button then it puts squiggly lines under misspelled words, right click the squiggly word and it suggests corrections. Its using the google spell checker service, way nicer than the spell checker in FCKeditor.

New release is coming very soon.

Cheers,

Joe

8/23/2009 12:23:21 PM
Gravatar
Total Posts 221

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

That is slick, very nice. Where did you find documentation to add that spell check? I'd like to use that service in some of my projects.

I was thinking you might want to set TinyMCE to allow editor window resizing (vertical). This allows people on larger monitors to drag the bottom of the editor window and adjust for their screen size preference. It will default to your standard size but simply allow the option (if should even remember the users choice if I recall right).

Somthing like this I think:

theme_advanced_resizing : true,"
theme_advanced_resize_horizontal : false,"

Looking good though!!!!!!

8/23/2009 12:28:42 PM
Gravatar
Total Posts 18439

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

Many of the features do have a module setting for edtor height, but notice that both TinyMCE and FCKeditor have a toolbar icon to go full screen, its right next to the spell checker button in TinyMCE.

This blog post is what I found googling for TinyMCE spell checker. http://www.kelvinluck.com/2009/01/using-spell-checker-for-tinymce-with-net-on-iis/

The .NET code provided with TinyMCE has the needed logic, you could just use their dll but I integrated the code into mojoPortal and changed it a little here and there.

Best,

Joe

8/23/2009 3:20:22 PM
Gravatar
Total Posts 221

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

I think it's easier just to drab the corner of the editor window though. That way "users" can change the editor height based on their monitor, it isn't something an admin should set for example. Full screen editing isn't a great idea for usibility either, I'd rather have the user editing in the site template itself, that way they have a visual reference while designing to keep things in perspective.

But minor, just a thought. And thanks for the link!

8/23/2009 6:38:22 PM
Gravatar
Total Posts 34

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

Just want to say so far I really, really like this CMS,  and the new TinyMCE would be a perfect addition.

8/24/2009 10:44:01 PM
Gravatar
Total Posts 221

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

Joe, I'm running the latest version on one of my servers and notice that bug is still in the file manger where folders repeat forever. Here's a screen shot showing what I mean:

http://www.proactivedesign.net/_admin/upload-area/files/bug.gif

8/25/2009 6:28:07 AM
Gravatar
Total Posts 18439

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

The problem is the spaces in the file and folder names. The editor won't let you create folders or files with spaces but if your file tree has them it causes this problem because it fails to match the selected path vs the current folder. I could not find a good solution other than to not use spaces in folder and file names which I think is a best practice anyway for the web because otherwise you end up with ugly urls with escape characters.

Hope it helps,

Joe

8/25/2009 8:16:33 AM
Gravatar
Total Posts 221

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

Problem is I've built a couple Flash photo galleries that dynamically read files/folders from a directory. They use the folder names as the photo gallery sub-directory names. So spaces and capitilaliztion are necessary in this instance mainly.

Note this example: (the folder names are making up the gallery categories, it would look bad if there were dashes in there).
http://newsite.dsaw.org/photo-gallery.aspx

Well, I'll have to give it some thought and see about a work around.

8/25/2009 8:29:27 AM
Gravatar
Total Posts 18439

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

Hi Eric,

I am forcing lower case but you can override that with these config settings:

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

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

by changing to false. The reason I make the lower case is in case you ever later wanted to move the site to linux/mono/apache hosting where file names and urls are case sensitive.

I don't have a solution about the spaces other than you could just use FCKeditor. Or maybe you could modify the Flash to replace dashes with spaces for display.

Hope it helps,

Joe

8/25/2009 8:32:43 AM
Gravatar
Total Posts 221

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

Yep, I'm thinking to possibly replace dashses with spaces and Capitalize each word of the flash directory on the fly.

I agree completely with you about spaces and lower-case. Just was this gallery I didn't think about... I'll get it!

Thanks again,

8/25/2009 9:00:20 AM
Gravatar
Total Posts 221

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

Hey Joe, In the new TinyMCE file manager how do users delete files and folders? Maybe not a feature yet... but thought I'd ask.

8/25/2009 9:13:35 AM
Gravatar
Total Posts 18439

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

Yeah, not a feature yet, FCKeditor doesn't have it either so I was just trying to get to equivalent functionality. Its not trivial at all to do what you suggested previously showing a delete button next to folders and files. I thought about enabling a delete button next to the select button but it would only be unambiguos for files. Since folder selection does not appear there it might be unclear what is about to be deleted. Complex enough problem that I punted on it for now.

Best,

Joe

8/25/2009 9:18:01 AM
Gravatar
Total Posts 221

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

I see, thanks for the quick responses. I wonder how my users will delete stuff though? hmmm

8/25/2009 9:21:45 AM
Gravatar
Total Posts 18439

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

Probably I will implement some variation of the File Manager separate from the editor that limits user access to the same folders but allows more functionality for managing files. Then the editor can be just for quick browse uploads while creating content. I'll ponder it.

Best,

Joe

8/25/2009 10:43:22 AM
Gravatar
Total Posts 221

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

Hello, back on this task. I made some modifications to the MCEFileDialog.aspx (file explorer) and wanted to get your feedback. Here's a screen shot:
http://www.proactivedesign.net/_admin/upload-area/files/mojoportal/file-manager/file-manager-preview.gif

And here's the new .aspx file you could download: (it goes in the /dialog/ folder within mojo)
http://www.proactivedesign.net/_admin/upload-area/files/mojoportal/file-manager/MCEFileDialog.zip

What I've done:

  1. Images are limited to a fixed width and height. Smaller images still display at their true size, but larger (say 900px) images only display at 450px for example. Makes previewing nicer I think. A lot of users are stupid and upload 300dpi images (sigh).
  2. I also modified the interface a little and added some instructions.
  3. For selecting a file I just list the path without the form field showing, seems cleaner.

Note: See how I have the "delete this file" link? That doesn't actually work right now....but maybe someone with programming knowledge could help here. I would think we could grab the file path at this preview point and then delete the file. I confirmation box would be nice (are you sure you want to delete). This would at least allow file deletion which I feel is critical.

Thoughts?

8/25/2009 11:31:07 AM
Gravatar
Total Posts 18439

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

That looks really nice! I just downloaded your zip and will consider integrating your changes as soon as I get a chance.

Best,

Joe

8/25/2009 11:34:12 AM
Gravatar
Total Posts 18439

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

I guess my only mixed feeling is that if the user uploads a huge file and then visually it looks right sized it doesn't tell them there is a problem to use this file. Ultimately we do need smart automatic image resizing. My original thought was that they would see it was too big and needed to be resized before using it in a web page.

8/25/2009 11:53:04 AM
Gravatar
Total Posts 221

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

lol, you're giving my users WAY too much credit. I've literally seen 2000x2000pixel images loaded on client sites with their CMS. They just scale the image down to postage stamp size and think it's good. The page takes minutes to load as you watch the images download bit by bit, lol. And honestly, 90% of my end users do this, I never see images formatted correctly for the web. They just upload from their 27megapixel cameras and GO.

But yea, smart image resizing would be the holy grail. Resize, crop and resample/save. By tomorrow Joe?   :)

8/25/2009 12:01:50 PM
Gravatar
Total Posts 18439

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

Well, the fact that the dialog page is in .NET code makes this not that difficult to implement.

Its just a matter of deciding what the resizing logic should be. Do we just make a config setting for max width and max height and then constrain within those while keeping the aspect ratio the same. Do we discard the full size file or let them max out their disk space quota etc. Seems like we would not want to keep it since they could then use it defeating our purpose.

Best,

Joe

8/25/2009 12:10:29 PM
Gravatar
Total Posts 221

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

I like the option of setting max width/height variable somewhere (say 550x550) and then constrain within those keeping the aspect ratio (if file is larger than max size only). That would at least give usable graphics and not eat up so much disk space. Users would still manually resize in the editor window, but it would be better. And yes, then discard the original file. For people who know to resize ahead of time the resampling wouldn't affect them.

8/26/2009 6:29:12 AM
Gravatar
Total Posts 34

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

Hi, how can I change the skins of the new tinyMCE editor, or add/edit features?

8/26/2009 7:02:10 AM
Gravatar
Total Posts 18439

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

I'm just looking into the TinyMCE skin options now. I will see about adding a web.config setting for it in the next release.

As far as making the features configurable I don't have a good answer for you at this time. TinyMCE does not load an external config file the way FCKeditor does so I don't have an easy way for you to override anything. I have configured toolbars consistent with what I think they should be depending on the feature it is used in and whether the user is an admin or not.

Best,

Joe 

8/26/2009 8:46:51 AM
Gravatar
Total Posts 221

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

Just a rainy day option but: in TinyMCE you could write out the javascript dynamically. This means on a settings page you could simple have a few open text boxes with all the option in it (hr,spell,code,help,table,etc).... that way people could customize what buttons show up from within mojo. Or even contain the entire MinyMCE javascript block in a textarea on a settings page, that way admins could tinker with all the various settings. Then just write that out in the areas where Tiny needs to load.

But obviously Joe has a lot on his plate!! Probably bigger fish to fry.

8/26/2009 12:36:49 PM
Gravatar
Total Posts 34

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

So TinyMCE is compiled that way? Just would be nice to have a way to add our own styles like FCKeditor will try using the CKeditor I see it has a config file

 

Cheers

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 221

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 2253

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 221

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

8/29/2009 5:04:35 PM
Gravatar
Total Posts 34

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

Thank you. So the content style items only show in the dropdown in FCKeditor? (I see them there now). I was assuming you meant they should show in tinyMCE as well.

 

FTR I am absolutely in love with this CMS though, so many things can be done easily and cleanly, no more nasty Joomla messes.  :)

 

8/31/2009 12:20:09 PM
Gravatar
Total Posts 18439

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

Aqua Kitty,

I did mean they should show up in TinyMCE, they do for me. Does it work different for you on our demo site vs your local installation?

8/31/2009 12:23:17 PM
Gravatar
Total Posts 18439

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

Hi All,

Check out the demo.mojoportal.com site, I've got the file browser working now in FCKeditor and CKeditor the same as in TinyMCE. You may need to clear your browser cache for it to work correctly, I did. I also did some work trying to get the content templates and styles working in CKeditor but so far can't seem to get those items working. I think there are some issues in CKeditor that will probably be resolved in later versions and then it will be possible to get the templates and styles working.

Best,

Joe

8/31/2009 6:44:58 PM
Gravatar
Total Posts 34

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

Well I made a test content style template on the demo site named "test". It shows up in fckeditor but not in tinymce (name of it is "test" creative, I know) same as on my site.

9/1/2009 6:45:34 AM
Gravatar
Total Posts 18439

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

Hi Aqua Kitty,

When I checked the demo site I saw you had put test for the element and h3 for the class name. I fixed that but still get the same result as you, it does not appear in the dropdown. Weird thing is its working correctly on my local machine. I will investigate it.

Best,

Joe

9/1/2009 6:54:23 AM
Gravatar
Total Posts 18439

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

I take it back, I "thought" it was working on my machine because it was showing one custom style, but when I added another one it did not show up. I found the problem and fixed it so it will work correctly in the next release.

Best,

Joe

9/1/2009 9:02:15 AM
Gravatar
Total Posts 34

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

 

 When I checked the demo site I saw you had put test for the element and h3 for the class name.

Whoops.. must have been day dreaming, but thanks for the fix :)

9/14/2009 3:27:21 AM
Gravatar
Total Posts 34

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

One major issue is with tinyMCE, for some reason it keeps trying to format my code with <br /> and <p></p> tags, it is inserting huge chunks of these tags making my pages unreadable... so had to switch back to FCKeditor, anyone else having this issue or know what could be up? I tried the tinyMCE forums but couldn't find much on this issue since theres no way to edit the settings.

9/14/2009 5:41:11 AM
Gravatar
Total Posts 18439

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

I noticed that issue right after releasing 2.3.1.7. I've since corrected it and uploaded the packages again. Ifyou download 2.3.1.7 again and then just replace the /bin/mojoPortal.Web.dll with the new one it will fix that issue with the brs

Hope it helps,

Joe

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