Editor is using Divs instead of Paragraphs for base elements

[Bratzilla]

I'm doing extensive testing of editors for a project aimed at novelists, and this editor has my attention, very beautiful and I can see how my users would enjoy it, and the Word post features are fantastic (and necessary as you know people will just copy and paste).

However, there is a serious issue with semantics. When I looked at the generated HTML after, say, posting from Word or applying positioning (such as centering). Divs are being used, and that can be an issue, especially in my environment (Joomla) which uses divs extensively for layout.

In addition, semantically speaking, paragraphs should be the default type, not divs. This is also a requirement for our publication standards.

Is there a way to override this so that I can set the paragraph tag as my default block type (like in TinyMCE and CKEditor)? Thanks!

[Petah]

I'm considering making the clean plugin have an option to convert all div to p. What do you think @faceleg

[faceleg]

@Bratzilla's right, p should be the default block type for editable content. If you update the clean plugin, we have to make sure it prevents nested p's after converting div tags to p.

I would lean more towards making div tags removed a default, adding the option to prevent this (correct) behaviour if desired.

[Bratzilla]

@faceleg: Agree!!! And thank you for chiming in. Clean markup is a requirement for publication on the web.

[Petah]

I have added a helper function few test cases for replacing unwanted tags with correct tags (in this case divs to ps).

You can check it out in the .../raptor/tests/cases/clean/convert-elements.html directory.

The concept is, that no matter how an unwanted tag gets into the content block (pasting, other plugins, source code editor, etc), it will be converted to the correct tag.

Let me know if this would work for your situation, or if it fails in any cases, then Ill look into integrating it into a core plugin.

[faceleg]

@Bratzilla @Petah will this suitably address the issue you raised here? Please let us know, so we can look at integrating it into a plugin.

[Bratzilla]

@facelog:

Regarding the tests, I keep getting errors (running this from my local test server). A partial snapshot is provided below. Looks like a path issue.

Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/theme/theme.css
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/rangy/rangy-serializer.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/rangy/rangy-selectionsaverestore.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/jquery.js
Uncaught ReferenceError: jQuery is not defined /test/editor/raptor/tests/:12
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/rangy/rangy-core.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/rangy/rangy-cssclassapplier.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/jquery.ui.editor.init.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/jquery.ui.editor.i18n.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/dependencies/raptorize/jquery.raptorize.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/jquery.ui.editor.domtools.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/jquery.ui.editor.support.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/jquery.ui.editor.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/tools/jquery.ui.editor.element.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/tools/jquery.ui.editor.fragment.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/tools/jquery.ui.editor.selection.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/tools/jquery.ui.editor.range.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/toolbartip/jquery.ui.editor.toolbartip.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/logo/jquery.ui.editor.logo.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/clicktoedit/jquery.ui.editor.clicktoedit.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/dock/jquery.ui.editor.dock.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/color-picker-basic/jquery.ui.editor.color-picker-basic.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/alignment/jquery.ui.editor.alignment.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/clear-formatting/jquery.ui.editor.clear-formatting.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/basic/jquery.ui.editor.basic.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/clean/jquery.ui.editor.clean.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/float/jquery.ui.editor.float.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/viewsource/jquery.ui.editor.viewsource.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/history/jquery.ui.editor.history.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/save/jquery.ui.editor.savejson.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/save/jquery.ui.editor.saverest.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/save/jquery.ui.editor.saveui.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/raptorize/jquery.ui.editor.raptorize.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/list/jquery.ui.editor.list.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/cancel/jquery.ui.editor.cancel.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/hr/jquery.ui.editor.hr.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/tagmenu/jquery.ui.editor.tagmenu.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/paste/jquery.ui.editor.paste.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/guides/jquery.ui.editor.guides.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/fontsize/jquery.ui.editor.fontsize.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/blockquote/jquery.ui.editor.blockquote.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/imageresize/jquery.ui.editor.imageresize.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/link/jquery.ui.editor.link.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/length/jquery.ui.editor.length.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/unsavededitwarning/jquery.ui.editor.unsavededitwarning.js
Failed to load resource: the server responded with a status of 404 (Not Found) http://localhost/jquery-raptor.com/private/jquery-raptor/src/plugins/i18n/jquery.ui.editor.i18n.js
....

[faceleg]

@Petah looks like he is using the loader?

[Bratzilla]

Sorry for the wait.

I've done some detailed testing using copy and paste straight from Word (the worst-case scenario, which I can guarantee writers will do), and just natively typing within the page.

The page does use some divs for its structure, so I tested to see how clean everything is.

So far, it looks good. The text I typed and posted all seem to use paragraph tags now.

I'll keep watch as I work on my project and let you know if anything odd pops up, but at least for now, I'd say this works. :)

SIDE QUESTION: I really like your Word paste dialog window... is there any way to hide the "Formatted Unclean" option? I shudder to think what could/would happen if I turned THAT option loose in the wild.

[HugoHeneault]

Hello there.

Today I can say that editor start again (I don't know since when) to use div instead of p.

[HugoHeneault]

I think this is fixed now, nope ?

[Petah]

This is similar to https://github.com/PANmedia/raptor-editor/issues/107

Although I'm not convinced this will solve all problems. For example if create a CMS block with div element already in it. However I'll close this issue for now.

Anything like this comes up again we should make a new issue.