Forums / Cotonti / Extensions / Support / CKeditor - How can we change the output?

foxhound
#1 2012-06-03 13:22

On a test site I am working on I am trying to add Slimbox since the Sienna plugin does not work on 0.9.9 and to make it work I need to add the following code to all images I want to use Slimbox on: rel="lightbox".
However, if I edit the code of the page on which the images are the CKeditor constantly removes the rel="lightbox". I have already set the HTML Purifier tidy level to "none" to not remove my code but it keeps getting removed.

So, I figured I might have to change the CKeditor output and searched with a google a bit. I found that to change the output you need to change the CKEDITOR.htmlWriter but I can not find such a file in the plugin. Since this was converted to a Sienna plugin should I change the output elsewhere? I checked all files (except images) to see if any of those files contained output but I simply do not see it.

Any help is very much appreciated smiley

PS: I have big issues to get used to this editor, my text/links/code anything always is completely screwed up blush

 

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
Trustmaster
#2 2012-06-03 14:17

Could you share a link that tells about CKEDITOR.htmlWriter?

If you don't like CKE, you should try elRTE or clEditor, they are more simple and transparent. Or if you don't like WYSIWYG, you can stick with markItUp! and edit contents in source mode.

May the Source be with you!
foxhound
#3 2012-06-03 15:48

I am not sure what you mean, I liked to the output explanation in my above post (I think, I have no idea what they are on about):
http://docs.cksource.com/CKEditor_3.x/Developers_Guide/Output_Formatting
Or maybe you need this?
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.htmlWriter.html

But, I always prefer to listen to people with more knowledge than me. So if you advice me to use those others I will try them wink
I will try to make my Slimbox code work with those editors and come back here if those too do remove the rel=&quot;lightbox&quot; part


About markitup!, the site should have an html editor with lots of options etc and I think it is time I too keep on moving forward and thus should not stick with Markitup, no matter that I have issues while using those new editors. I just have to adapt cool
And with my posting troubles I meant using the editor here, as you see above I always screw up adding codes and have troubles adding links (I know, I should be ashamed, but till now I did not manage to make a single correct post in 1 time).

<img src="http://www.armaholic.com/datas/thumbs/green-sea-battalion-uniforms-version-03-preview_4.jpg" alt="green-sea-battalion-uniforms-version-03-" />
Trustmaster
#4 2012-06-03 19:26

Sorry, I missed the link. It doesn't make the solution much easier though, I only partially understand what they mean and how it would help to allow the rel attribute to work :)

Look at it the other way: CKEditor and HTML isn't claimed to be "better" or "more up2date". CKEditor is just extremely popular and has a lot (even too many) features. We bundle it by default because: a) non-tech people want WYSIWYG, b) CKE is known to be good for them and it has so many features. But it doesn't mean that it's the best.

You can pick any markup parser and any editor you like most with Cotonti and if I were you I would do so ;)

May the Source be with you!
Macik
#5 2012-06-04 00:18

There is another way that meet you needs. It's improvement of default Image dialog for adding Rel attribute.

Here is the sample code for (ckeditor/lib/plugins/image/dialogs/image.js):

{
    type : 'text',
    id : 'txtdlgGenRel',
    label : editor.lang.link.rel,
    'default' : '',
    validate : function() {
	var regexValidRel = /^\w+$|^$/i;
	var aMatch = this.getValue().match(regexValidRel), isValid = !!(aMatch);
	if (!isValid)
	    alert('Not allowed type of Rel');
	return isValid;
    },
    setup : function(type, element) {
	if (type == IMAGE) {
	    var genRel = element.getAttribute('rel');
	    if (!genRel && element.$.prop('rel'))
		genRel = element.$.prop('rel');
	    this.setValue(genRel);
	    var regexValidRel = /^\w+$|^$/i;
	    var rel = element.$.prop('rel');
	    aMatchRel = (rel ? rel : '').match(regexValidRel);

	    this.attributesInStyle = {
		rel : !!aMatchRel
	    };
	}
    },
    commit : function(type, element) {
	if (type == IMAGE && (this.getValue() || this.isChanged())) {
	    element.setAttribute('rel', this.getValue());
	}
    }
}

Full code is here: http://www.cotonti.com/pastebin/170

 

https://github.com/macik
правильный хостинг — https://goo.gl/fjCa1F