TinyMCE paragraph formatting

In the editor, it looks like when I press return to start a new line, it isn't acting like a return should.

For example, if I use the Paragraph dropdown to change a line to a h3, then hit return and start typing on a new line, that new line is also an h3.

If I then try to change that second line to a paragraph, the h3 in the line above also becomes a paragraph.

It does work if I paste a bunch of text into the editor and then put the cursor into one of the lines and then change that line to an h3, so whatever the problem is is connected to the behaviour of the return rather than the line.

In the html view in the editor, the h3 isn't being closed, the line breaks are converted to br tags, so the h3 continues and there is no way to stop it without editing the html - easily done if you know how, but not simple for the average TinyMCE user.

Also, there is a great difference between the heading/paragraph formatting between the layout in the editor and in the final page view - but I suspect that this may be part of the same problem. The perpetual joys of TinyMCE line breaks.



--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 12/19/14 02:14:20PM

In the editor:


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 11/14/14 04:47:27PM

In the page:


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)
updated by @ultrajam: 11/14/14 04:47:54PM

I just updated the core with the latest release of TinyMCE - probably related. I will check it out.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Reload the Core 5.2.14 - I just made a small change to the editor config. Looks like in TinyMCE 4 the "force_root_block" option has an impact on this (even with keep_style set to FALSE). I've removed the "force_root_block" option and it looks like it is working here for me - please test it and let me know if that looks better. That option has been in the config for a long time, so I'm hopeful it is not going to break anything by removing it.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Yes, that does fix it, thanks Brian.

I'm probably missing a step somewhere, but I can't get a button to save in the editor. I have added "button" to the list of Allowed Html Tags for the quota, but it is being stripped out on saving the form. I also tried adding "section" but that is stripped out as well.

Are there limits as to what can be added to Allowed Html Tags or am I missing a step?

Thanks


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Also, adding a link with a class, the link is saved but the class is stripped out.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

Yes - there are limits. For the most part, adding a tag to the allowed tags only adds the tag - NOT any tag params (i.e. you want an "input" tag but it won't allow the "type" parameter).

The core uses HTML Purifier, with a white list of allowed params, so it is something we have to add for it to be fully supported. Are you looking for an "input" element with type "button"?

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

I was trying with the button element, but a link with classes would do the same thing.

But what I am aiming to do is to add most bootstrap 3 elements and components via the TinyMCE templates button.

I don't need the form elements, but classes will be needed for styling, and other attributes for validation.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

If you could send me a list of the HTML elements and their attributes that you need, I can check on getting them added to the core support.

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Ok, I'll email those. There are quite a few - I hope the purifyer can accept data-* and aria-* attribute wildcards... but I couldn't see how in their docs.

I've been trying to add them via a html_purifier_listener, but get an error in the log saying "Cannot set directive after finalization invoked... "

I can see my section and button tags in the array when I call $_data->get('HTML.AllowedElements'), yet they are still being stripped out.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)

That may not work - HTML Purifier is pretty strict and is not 100% flexible on tag attributes, but we can try.


Doing it via listener is actually the best way to do this, and we do this in the iframe support module - I would check that out and see how we did it (as you have to add attributes as well).

Hope this helps!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

On a similar thought plain I have been wondering is there a need to introduce the notion of a short codes system to Jamroom, integrated into TinyMce for buttons, tables, alert + notice boxes, tabbed content etc.

I have seen various html templates now that have the notion of short codes in addition to WordPress.

Can you give me an example of what you mean? For formatting I think of something like BBCode or Markdown.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

I would defiantly go the route of BBCode as markdown is another added complexity level.

Heres an example of one I use on a wordpress site quite regualry.


This in turn is out putted like this http://tinypic.com/r/303cnc7/8

JR already supports bbcode for the most part - not a ton of tags, but most of the styling ones.

Thanks!


--
Brian Johnson
Founder and Lead Developer - Jamroom
https://www.jamroom.net

Yes, but with WP Shortcodes they add a button to Tinymce and then an interface to build these elements.

It goes way beyond the standard BBcode elements.

Thanks Gary, yes shortcodes are really handy, but the people who I want to use this are already using html, and part of my current job involves training them to update their skills in html5, css3 and jquery.

Limiting that training to Bootstrap seems like a sensible idea (because it is so well worked out, thoroughly tested and perfectly documented).

I'd like them to use Jamroom in some way (of course), and I'm hoping that they will love the tools I am developing to make their lives easier. (and my life too - the last time I had "the pleasure" of working with dreamweaver was about 10 years ago, and it hasn't improved one bit).

Those tools would mean that they can create their stuff without getting bogged down in html (which is what they really, really want), but the tools don't stand a chance of being adopted if they prevent access to the html - and I completely agree with the policy there. If people are willing and able, they should be given all encouragement and support to keep up to date with the fundamentals of the internet. Literacy is a "big thing" in both education and libraries.


--
¯\_(ツ)_/¯ Education, learning resources, TEL, AR/VR/MR, CC licensed content, panoramas, interactive narrative, sectional modules (like jrDocs), lunch at Uni of Bristol. Get in touch if you share my current interests or can suggest better :)