How to improve WYSIWYG experience

Topics: Administration, Core, Customizing Orchard, General
Feb 6, 2015 at 12:59 PM
Edited Feb 6, 2015 at 2:14 PM
My users are not happy with the interated WYSIWYG in Orchard 1.8.1.
  1. No syntax highlighting in source code mode
  2. When copy paste from one window to another (even within orchard and within tinyMCE) strange markup is created (crazy inline styles).
I use now (not maintained for a year). It does not have any media picker. How is this solved in the tiny mce solution?
Feb 6, 2015 at 2:43 PM
A newer version of TinyMce will be used in Orchard 1.9. It is currently available in the 1.x branch
Feb 6, 2015 at 2:45 PM
I also prefer CKEditor but as you say it doesn't have a media picker and it hasn't been maintained for a long time.
Feb 6, 2015 at 2:45 PM
Stanley Goldman made a pull request to integrate Code Mirror in the editor.
Feb 6, 2015 at 2:48 PM
Will it be accepted? I would love to see CodeMirror in Orchard CMS.

The ludckeditor is running now in my test environment. I am thinking about updating it on my own to the latest CKEditor version.

But the second issue with the media picker:
It looks like an Orchard Windows not a TinyMCE window. So problably it would not be that hard to solve it. I do not know. I have C# knowledge but I never developed an Orchard Module.
Feb 6, 2015 at 2:49 PM
Feb 6, 2015 at 2:49 PM
He also created an issue if you wanna vote :
Feb 6, 2015 at 2:50 PM
Flavour would not be useful for my own use case. It would be nice to switch between Code and WYSIWYG seamlessly.
Feb 6, 2015 at 2:53 PM
CKEditor seems to have a codemirror addon:
Feb 6, 2015 at 2:54 PM
Feb 6, 2015 at 2:54 PM
Cool! We have to try it :)
Feb 6, 2015 at 3:37 PM
Actually there is a "Pick from Orchard Media Library" Button in ludcckeditor!
Feb 6, 2015 at 4:02 PM
Feb 19, 2015 at 8:34 AM
I'm currently evaluating a cms for our school.
What i miss is the comfort of wordpress:

The Users don't have to care about image upload and url address, its just "in the flow".
If i drag and drop, as user a picture into CKEditor, check out what happens ;-(
[hint, de picture is added to the html text NOT the media library]
Feb 19, 2015 at 8:54 AM
Hello grungy. I am currently working on a module based on an earlier module for CKEditor.
For me the feature you describe sounds like the images get inline base64 encoded.
As long as there is a CKEditor plugin I could try that out.
Do you have further information about CKEditor plugins they are using?
Feb 19, 2015 at 11:57 AM
Edited Feb 19, 2015 at 11:57 AM
Hi Jost
i just installed orchard for myself and in modules i searched an installed the latest CKEditor.
I'm not so interessted in the drag&drop "feature" more interessting it would be to have the "Add Media" Button like in wordpress:
Feb 19, 2015 at 12:05 PM
This Plugin called "ludcckeditor" has an orchard media picker.
It is not up to date but owrks (not latest ckeditor).
I am working right now on a new plugin based on this one.
Feb 19, 2015 at 12:32 PM
i just installed the LuDC.CKEditor and tested it.
Yes it has the "Pick from Orchard Media Library" Button. But thats now the same as in wordpress:

Wordpress has a Button "Add Media". When you klick it, it opens a upload dialog for the Media Library AND inserts the picture where your cursor stands.
Much nicer intgrated into the flow.
Feb 19, 2015 at 12:46 PM
You can select any folder After you click the Picker button and then click on Import you will see then the upload dialogue.
Feb 19, 2015 at 3:24 PM
i see, so basically there are only 2 small problems then:
  • Button should be HUGE and say "Add Media"
  • Media Gallery Dialog should be more userfriendly
Feb 19, 2015 at 3:27 PM
Good points. The Media Gallery should be easier. It takes to many clicks to do things.
Mar 4, 2015 at 8:03 AM
I started with the development of a custom CKEditor module. There is still an issue with the configuration described here: