Hi there,
I have been developing a front end editor plugin and to date I have been using Aloha.
One of the problems with Aloha is that when the user selects a portion of a paragraph and chooses 'Heading 1' for example the whole paragraph block gets changed to heading 1. This is really not what the user expects since in things like Word only the selected portion has the style applied. The user has gone through the process of making a selection and so logically they expect only what they have selected to be affected by whatever the do next. So basically this is, I'd say, critically, un-userfriendly and confusing.
I have had a go at modifying Aloha so that if the user selection is part of a block level element the text before is closed with the old tag and the text after is opened with the old tag while the selected text has the selected tag applied. This is still buggy so not up on Alohas git yet, but does basically solve the problem.
Another factor though is that non-tech users also don't know that the created H1 will be a block element and so probably actually expect it to look like the incorrect result of <p> some text<h1 style="display:inline;">Some h1 selection</h1> the rest of the paragraph</p>.
This could be gotten around with <p> some text<span class="h1">Some h1 selection</span> the rest of the paragraph</p>. where the designer makes sure that their h1 styling also applies to span.h1 too.
But neither Aloha or CKEditor currently solve this issue.
So I'd like to know if s this something the CKEditor team might view as a priority fix (Aloha say they do but have not done anything about it in 2012) or should I continue with my own Aloha fix?
Raptor editor doesn't have this problem
Hi there, I just found another alternative to CK and aloha that does not have this problem
http://www.raptor-editor.com
Any reason why this question is being totally ignored? Have I inadvertently trolled or something?
There is, in fact, nothing to
There is, in fact, nothing to fix here, since CKEditor already supports such customisations.
Take a look at "format_*" definitions in current CKEditor API: http://docs.ckeditor.com/#!/api/CKEDITOR.config
You can easily customize each of the Format styles to use whatever elements and styles you wish, for example:
and then define "my_custom_class" to apply the styling that you want.
Documentation Manager, CKSource
See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!
Thanks for getting back to me
Thanks for getting back to me...
So is the only solution with CKEditor is to hide the format drop down all together and just make some 'inline styles' that mimic the actual H1 styles? Unfortunately this is very complex for me since I am providing a function where users can change the styling on H1's etc on their site on the fly, to have to extend that to also modify the editor stylesheet again was something I was hoping to avoid precisely by using an inline editor...
While I appreciate that we all know what an inline style is, most users do not. They really are going to expect the changes they make to affect the text they have selected I feel. Its different if they just put the cursor in a block and dont make a selection. And I understand that 'thats not how it is supposed to work' and that users should learn that h1 are block level etc- but they simply wont. We understand it because we work on the web all the time. If our sole experience was Word we would expect 'style' changes (and we would include 'Heading 1' in that) to only affect the selection we have made, not go ahead without our say so and screw up the whole paragraph...So I would suggest that 'Raptors' way of doing things is simply far better for the user and maybe something CKEditor and Aloha should emulate...
If you find that CKEditor
If you find that CKEditor could benefit from a different approach it's always a good idea to open a new ticket at our Development site and let fellow developers (both us and others) discuss this. And if enough people find it interesting, it might be done as a GitHub patch, for example.
Documentation Manager, CKSource
See CKEditor 5 docs, CKEditor 4 docs, CKEditor 3 docs, CKFinder 3 docs, CKFinder 2 docs for help.
Visit the new CKEditor SDK for samples showcasing editor features to try out and download!
ok will do ;)
ok will do ;)
This is by design and we have
This is by design and we have decided that such behaviour is better than applying block level to selection and then splitting containing block element like P in two.
The latter is in our opinion far more unexpected than first.
I will add that popular desktop editors like Word also do that - this is one of the reasons why we have decided to take such approach. Users who had to do only with MS Word (which is much more common) and not with whole bunch of online editors will definitely be less surprised.
Please see also http://dev.ckeditor.com/ticket/1499#comment:1 and http://dev.ckeditor.com/ticket/9753#comment:18 for more details.
Can I make this Mod myself?
Hi there,
Relating to this discussion and the previous ones you directed me to, I strongly feel that my users need this and would like to have a go at doing this myself. I have done it with my version of Aloha, but I feel that generally the CK editor feels more developed and a better option generally than the Aloha editor.
I am using Aloha in the front end of wordpress via the 'FrontEnd Editor' Plugin and its this that I was talking about in my other post regarding whether there was a Wordpress plugin for inline editing- sorry I didn't make that clear.
I feel that users expect that if they make a selection only that selection is affected by what they do next. Whist I appreciate that Heading are block level and therefore will split a paragraph, in the scenario where the user has explicitly chosen some text this is preferable to their selection being disregarded totally. This is what happens in Word 2010 (I don't have another version to hand) in that Word only changes the selection (it also leaves it inline).
In the case where the user just places their cursor in the paragraph and clicks 'Heading 1' then yes CK acts correctly and like Word etc does.
I appreciate that since Word leaves the selection inline and changes it to heading 1 users will be surprised by the splitting of the block, but when they do this in a long paragrah it is far clearer what to do next when the block is split and far more likely to be what you wanted anyway than changing the whole paragraph into some massive font etc. Most of the time when users change a font to heading 1 the very next thing they do is press return anyway. In the latter scenario users will think 'Thants not what I said to do! How the hell do I just change that bit?!?' Being uninformed in HTML block level elements they will not instinctively think 'Ahh I need to change the bit I want to change into a heading into its own block level element first and then reselect it and then choose Heading 1' - I seriously think nobody who is not trained in this stuff would think that without alot of frustrating trial and error.
So I'd like to make a modification and perhaps it could be a configurable option? I can see there is a Github that I can work from but anychance of a little pointer as to where to start the customisation?
Thanks in advance ;)
I started a discussion on dev
I started a discussion on dev list whether this feature makes sense. The thing is that it is rather impossible for non-core developer to change styles system behaviour because this is very complicated feature. All the logic is placed in core/style.js file.
Piotrek (Reinmar) Koszuliński
CKEditor JavaScript Developer
--
CKSource - http://cksource.com
--
Follow CKEditor on: Twitter | Facebook | Google+