Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Editor re-writes HTML when startup mode is set to wysiwyg #102

Open
muddeatr opened this issue Feb 13, 2019 · 38 comments
Open

Editor re-writes HTML when startup mode is set to wysiwyg #102

muddeatr opened this issue Feb 13, 2019 · 38 comments

Comments

@muddeatr
Copy link

@muddeatr muddeatr commented Feb 13, 2019

If the editor Startup Mode is "wysiwyg" and I switch to Source mode when opening a dnn module for edit the source html is re-written by the editor if it believes the source is not compliant. This breaks a lot of special effects that we have with gallery overlays and such.

If the Startup Mode is "source" and I open the module for edit the source html is fine as long as I don't toggle the source button.

@etisdew

This comment has been minimized.

Copy link

@etisdew etisdew commented Oct 24, 2019

Request for follow up on this issue. I'm evaluating the health of this repository and would like to know if this was ever resolved or if this dependency just doesn't care about issues.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 24, 2019

As far as I know it is still an issue. I have uninstalled the editor because of the issues and reverted back to the old editor. I would like to be kept up on the update so I can re-install it and try it again.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 24, 2019

Just a thought here @etisdew . Maybe you can add a toggle setting for advanced user to turn off strict HTML enforcement and allow the user to make their own mistakes if they use this setting.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 24, 2019

This DNN CkEditor is like a wrapper around the existing CkEditor.
Actually that behavior is by design. It's a CkEditor" feature, not really an issue of this project.
You can however reconfigure the way the editor behaves.
You can read how here: #129

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 25, 2019

Ok, as this question has come up a few times lately, I wrote a blog post about it: https://dnncommunity.org/blogs/Post/2841

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 25, 2019

But this question is STILL legit. For me anyways the editor re-writes my HTML according to it's "rules".
Here's a block of my HTML
image
And here is what happens to that HTML when I open it using the editor. Note the changes in the way the HTML and this was done just by opening the existing HTML code. If I didn't notice and saved then my HTML wouldn't work the way it was intended by me to work not an HTML editor.

Here's the CkEditor:
image

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 25, 2019

Oh and that was after I added the "extraAllowedContent" from your blog.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 25, 2019

Could you try this without the

<center> as that is not supported in HTML5 https://www.w3schools.com/tags/tag_center.asp

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 25, 2019

Off topic, but if you are inserting such specific HTML, please consider researching a structured content module like Open Content. That is much more controllable and scalable.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 25, 2019

It's not the center tag. It's the fact that the editor is trying to enforce a "div" tag is not allowed between the opening and closing "a" anchor tags so it moves the. Here's without the center tag. And with Bootstrap and/or Bootstrap variants using div's with just a span in it to display their icons, this editor reconfigures that as well. And don't get me wrong, I wish I can get this working because I love the CKEditor UI much better.

My HTML
image

CKEditor
image

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 25, 2019

Ah, right. Seems like an issue for others too: https://dev.ckeditor.com/ticket/9457 might have been fixed in CK 5?

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Oct 25, 2019

This happens because CKEditor 4 only supports HTML 4 dtd. Html5 is not supported. However there is a workaround

ckeditor/ckeditor4#514

You would need to place the js code in your site. For example via the custom js option in the editor provider.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 25, 2019

So then is any of this available for DNN?

@OllyHodgson

This comment has been minimized.

Copy link

@OllyHodgson OllyHodgson commented Oct 25, 2019

@muddeatr

So then is any of this available for DNN?

As @w8tcha said:

You would need to place the js code in your site. For example via the custom js option in the editor provider.

If I remember correctly (I don't have a DNN install in front of me right now), I think you can visit Site Settings > Site Behavior > More > HTML Editor Manager, find the Custom JS box, and paste in:

CKEDITOR.dtd['a']['div'] = 1;
CKEDITOR.dtd['a']['p'] = 1;
CKEDITOR.dtd['a']['i'] = 1;
CKEDITOR.dtd['a']['span'] = 1;

I don't think there's a CKEditor 5 editor provider for DNN at the moment.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Oct 25, 2019

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 26, 2019

I just tried the suggestion by @w8tcha & @OllyHodgson , but I did not manage to select a custom JS file.
Uploaded it, synced file system but I cannot select it (does not appear in he drop-down).
Anybody else managed to do this?

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Oct 26, 2019

By default js files are not allowed. In the site settings you need to add ja to the list of allowed file extensions.

@etisdew

This comment has been minimized.

Copy link

@etisdew etisdew commented Oct 26, 2019

Utilizing a shtml like document with script tags would be uneffected yes? I'll also say that I'v never seen anyone actually enforce restriction besides extension. Could probably just lie and call it .css or something if you really needed. How do these things translate to DNN?

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 27, 2019

By default js files are not allowed. In the site settings you need to add ja to the list of allowed file extensions.

Hmmm, right I had thought about that being the limitation here.
I'll try again.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 27, 2019

Utilizing a shtml like document with script tags would be uneffected yes? I'll also say that I'v never seen anyone actually enforce restriction besides extension. Could probably just lie and call it .css or something if you really needed. How do these things translate to DNN?

Actually, not allowing JS is a security limitation of DNN.
The settings page uses DNNs way of getting a list of files and by default DNN does not show (or allow upload of) js files.

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Oct 27, 2019

Well the alternative would be to add the code to the editorOverride.js file in the folder "Providers\HtmlEditorProviders\DNNConnect.CKE\js"

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 27, 2019

Ok, I tried both options but the editor keeps changing.

<a><div>x</div></a> to
<div><a>x</a></div>

I added this to both files and in the console I do see that div = 1, but it has no effect.

	// Simply redefine DTD like this:
	CKEDITOR.dtd['a']['div'] = 1;
	CKEDITOR.dtd['a']['p'] = 1;
	CKEDITOR.dtd['a']['i'] = 1;
	CKEDITOR.dtd['a']['span'] = 1;
	
	console.log(CKEDITOR.dtd[ 'a' ]);
@valadas

This comment has been minimized.

Copy link
Contributor

@valadas valadas commented Oct 28, 2019

Could it need a "Clear Cache" or a hard-reload after the changes?

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Oct 28, 2019

Yes you need to clear the cache or reload the page via ctrl+f5 at least in my tests it works as it should be.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 28, 2019

@w8tcha Ok thanks.
Hmm, I did that, I'll try again.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Oct 29, 2019

@w8tcha Ingo, I tried again, cleared the cache, but the editor keeps changing the HTML.
I added a custom.js file, that has this content:

CKEDITOR.dtd['a']['div'] = 1;
CKEDITOR.dtd['a']['p'] = 1;
CKEDITOR.dtd['a']['i'] = 1;
CKEDITOR.dtd['a']['span'] = 1;
console.log (CKEDITOR.dtd);

In the console I see:

image

Which seems correct & the JS runs
But if I enter this in source view:

<a href="test"><div>test</div></a>

It's still transformed to:

<div><a href="test">test</a></div>

when I swtich back and forth to WYSIWYG
Any pointers? Am I doing something wrong?
Thanks, Timo

@etisdew

This comment has been minimized.

Copy link

@etisdew etisdew commented Oct 31, 2019

Man with this much trouble it might be worth just making your <a></a> the size of the container with css.

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Nov 3, 2019

@timo which browser are you using? At least in chrome it works as expected

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Nov 3, 2019

Then I have a stupid question. Why doesn't it work with all other browsers other than SPY Crap Chrome? I've used Edge, IE, and Firefox but none of them work. Don't use Chrome never will. I've closed many accounts from finance companies to fitness software to anybody that tells me that they recommend Chrome 👎

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Nov 3, 2019

Well it also works in edge (which is also based on chrome)

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Nov 3, 2019

Then I guess I have to re-visit that because I was having the same issue with edge about six months ago. Thanks

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Nov 3, 2019

But i guess you didnt apply the fix i posted above six month ago

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Nov 3, 2019

That I can't say for sure so it is worth re-visiting. The past 6 months have been hell where I work. We were hit with ransomware that took out our whole network of 30 shipping terminals throughout the northeast.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Nov 4, 2019

@w8tcha FF, I'll have a try in Chrome.

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Nov 5, 2019

Same in chrome, I must be doing something differently..

@w8tcha

This comment has been minimized.

Copy link
Contributor

@w8tcha w8tcha commented Nov 5, 2019

I don't know. I use a fresh installed dnn and the default editor config. No modifications.

@muddeatr

This comment has been minimized.

Copy link
Author

@muddeatr muddeatr commented Nov 5, 2019

@w8tcha so you don't use your own CKEditor? You use the default one that comes packaged in DNN?

@Timo-Breumelhof

This comment has been minimized.

Copy link

@Timo-Breumelhof Timo-Breumelhof commented Nov 5, 2019

Ok, I'll try a fresh install, this test install started off as DNN 9.1.1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
6 participants
You can’t perform that action at this time.