Disable auto-adding of <p> tag - html

I'm trying to remove auto-adding of <p> tag in CQ5(Version 5.6.0.20130125). I've tried to add these properties to the text component I'm using but with no effect.(source)
removeSingleParagraphContainer true
singeParagraphContainerReplacement (empty string)
I've also tried this solution. Again, no effect.
Is it possible to disable auto-adding of <p> tag?
Thanks for any ideas
EDIT I've tried this answer but CQ still adds <p> tags to my code. For example, I have this HTML code
<strong>Headquarters:</strong>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
and after I submit it, the code changes to
<p><strong>Headquarters:</strong></p>
<p>MY - COMPANY a.s.<br>
Random Street 77<br>
Random City</p>
my RTE looks like this
<text jcr:primaryType="cq:widget"
hideLabel="{Boolean}true"
name="./text"
xtype="richtext">
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
</text>
EDIT2 this is what my hierarchy looks like

You can keep the RTE from surrounding your text with <p> tags by setting the removeSingleParagraphContainer property to true as long as you only create one paragraph.
With Chrome on Mac OS X (at least), holding shift while pressing enter inserts line breaks instead of paragraph breaks so you can still create text with multiple lines. Since you said in your last question that you're using the misctools plugin, you can use the source edit view to peek at the markup as you go.
Finally, to set the removeSingleParagraphContainer property, you'll need to create another child called blockHandling under your htmlRules node in your dialog. You don't need to mess with singeParagraphContainerReplacement property, but if you did, you would set it on the same node:
<rtePlugins jcr:primaryType="nt:unstructured">
...
</rtePlugins>
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
...
</docType>
<blockHandling
jcr:primaryType="nt:unstructured"
removeSingleParagraphContainer="{Boolean}true"/>
</htmlRules>
Edit regarding your edit: using the source edit feature of the misctools plugin and pasting this exact text saves and loads without p tags for me in Chrome on Mac OS X:
<strong>Headquarters:</strong><br>
MY - COMPANY a.s.<br>
Random Street 77<br>
Random City
Are you sure your dialog.xml deployed properly? Maybe double-check that your component's dialog hierarchy looks how you'd expect it to in CRXDE Lite:

The property removeSingleParagraphContainer should be added in node with xtype is richtext.
Example:
<text jcr:primaryType="cq:Widget"
hideLabel="{Boolean}true"
name="./text"
height="{Long}520"
removeSingleParagraphContainer="{Boolean}true"
xtype="richtext">
CRXDE Lite: configuration in crxde lite
Note: And this configuration is only used for single paragraph.
Refer: more info about removeSingleParagraphContainer

Try using #context='html' in your code. This lets you set the context of the text as html so even if there are tags in your dialog value, they will be rendered as equivalent html and not as tag on the page.
eg :
{properties.something #context='html'}

For Touch UI, you can also create a custom paraformat option in the AEM Touch UI, cq/gui/components/authoring/dialog/richtext, and then using Java Backend, Sling Model, to text-transform the output, so that your Sightly HTL can render the output Html as expected. For the full tutorial, you can find it here.
https://sourcedcode.com/blog/aem/aem-richtext-remove-p-tag-removesingleparagraphcontainer-for-touch-ui

Try using #context='unsafe' in your code. You should be able to get rid of the unnecessary HTML tags, worked for me

Related

Handling Show More/Less text in React Native

I'm getting a response from a remote API in HTML format. The whole thing is not supposed to be shown unless you press Read More button
The response looks as follows:
"<p>A suspension concentrate (SC) formulation containing 450 g/litre of napropamide (41.4% w/w) for the control of annual grass and broad-leaved weeds in winter oilseed rape.</p>\r\n<p><strong>DIRECTIONS FOR USE</strong><br /> IMPORTANT: This information is approved as part of the product label. All instructions within this section must be read carefully in order to obtain safe and successful use of this product.</p>\r\n<p><strong>RESTRICTION/WARNINGS</strong><br /> Weed control may be reduced where the spray is mixed too deeply into the soil. <br />Do not treat crops adversely affected by poor soil, adverse weather or cultural conditions. <br />Avoid spray overlap, particularly on headlands. <br />It is important to ensure that the seedbed is free from clods and weeds, and in good tilth.<br /> Incorporation under wet conditions is not satisfactory. <br />AC650 can be used on a wide range of soils but should not be applied to Sands (ADAS ’85 system)
...
I render it using react-native-render-html library which unfortunately does not have numberOfLines prop.
I tried a solution suggested on Github that involves adding custom renderer that substitutes all the <p> tags with react native <Text> tag which has numberOfLines props that I need:
<HTML
html={`<p>${description}</p>`}
renderers={{p: (_, children) => <Text numberOfLines={5}>{children}</Text>}}
/>
It worked but the problem is that I have several <p> tags inside my description variable and it shows all of them shortened to whatever number of lines I entered instead of shortening the whole article. So I figured that I must use a unique tag to wrap the whole HTML content and then apply the same logic
<HTML
html={`<section>${description}</section>`}
renderers={{section: (_, children) => <Text>{children}</Text>}}
/>
Again, the solution worked but it messed up the content inside. Line breaks were not applied, etc.
After a few more Google searches up stumbled upon a 3rd party library called react-native-read-more-text
I understand that it only works with content inside <Text> tag so once again I wrapped by <Text> using template string
<ReadMore
numberOfLines={10}
renderTruncatedFooter={renderTruncatedFooter}
renderRevealedFooter={renderRevealedFooter}>
<HTML
html={`<Text>${description}</Text>`}
/>
</ReadMore>
This time I received an error:
I would appreciate any help
My suggestion would rather be not to mess-up with react-native-render-html, and instead do the following:
wrap your HTML content inside a container which height approximates 5 lines;
this container has a fading effect towards its bottom (typical in user-review platforms such as Goodreads);
at the bottom of this container, a "read more" button can be pressed to expand the container height to fit the html content height.
If however you need one tag renderer in peculiar to implement such feature, you should take a look at this SO post: https://stackoverflow.com/a/69200348/2779871
This is now supported by react-native-render-html
import HTML from 'react-native-render-html'; // V6.3.4
const defaultTextProps = {
numberOfLines: 10,
};
return (
<HTML
source={{ html: text }}
defaultTextProps={defaultTextProps}
/>
);
Github Issue
I hope this helps. I would be interested to know what you went with in the end as I am currently solving a similar use case.

p:textEditor <br> line separator instead of <p>

I am using JSF (PrimeFaces) tag p:textEditor for my forum. This tag use Quill rich text editor. Default behavior is wrapping every line in blocks (wraping in paragraphs tags p /p):
<p>line1</p>
<p>line2</p> ....
And it does not looks nice, because of output too much spaces between lines.
Instead, I need to get like this (use tag br/ between lines):
<br/> line1
<br/>line2 .....
For example, PrimeFaces extension has tag pe:ckEditor, that use ckEditor (rich text editor). And I can change its behavior just adding "config.enterMode = CKEDITOR.ENTER_BR;" in config.js file.
Is there in p:textEditor and its Quill (rich text editor) same ability or some another way that can fix my problem?
I was looking into feedback of Quills owner -
https://github.com/quilljs/quill/issues/1074 . And I checked all new versions after this feedback.
So yet Quill does not has this ability. The owner suggests to use css-style for fixing this behaviour (adjust paddings). Yes, it can resolve a problem of big spaces, but:
1) this way is not so comfortable;
2) this way is not suitable for forums quotations, because separate every line in own quote.
Here the problem is discussed and here is some js approach to fix it. But I am not going to use it because I use Quill built in JSF library. So I switch to pe:ckEditor and ckEditor rich text editor

execCommand('Italic") issue

I'm trying to make use of execCommand as I thought it is enough for my purpose, but when testing it under IE 8, there is strange thing: only 'italic' options fails to revert (I can set italic but it wont go off for the next execCommand call), or rather the browser cannot recognise that italic was already applied, because when run queryCommandState('italic', false, null)) I receive false. Thing is, that there is problem only with italic other looks ok(actually check couple;-)).
There is another point that I use contentEditable on html element, when I moved it to iframe it worked but I really do not want to use iframes. Furthermore there is styleWithCSS command to force styling html by style attribute rather than by tags like b -> `style="font-weight: bold" But this of course doesn't work in IE too.
Could you please advise or maybe suggest some other tool to handle some basic text editing in html
update: I just run command in js:
document.execCommand(actionToCall,false, args);
it correctly format selected text in my contentEditable:
<div contenteditable="true" type="text" class="myeditor-editable" style="white-space:pre-wrap">
<i>test</i>
</div>
but seccond call do nothing -> it actually tries to append <i></i> again. ( when look at HTML bar in FF console, then I see that there is some manipulation with html but like I said it stays italic)
Edit2: It looks that there must be a conflict in my code as in fiddle it's working(http://jsfiddle.net/kpskxfbo/1/ ), I thought that can be because the result in jsfiddle is returned in iframe but I have try it on my local computer and it looks fine too... I will post update once I found the problem.

How to prevent browser from inserting HTML into a contenteditable element

When a user inserts linebreaks in a contenteditable element, browsers insert HTML into the element.
Here is what you get when you hit [Enter] in various browsers:
IE: <p></p>
Chrome: <div><br></div>
Safari: <div><br></div>
Firefox: <br />
Opera: <br />
(Test for yourself with this JSFiddle demo.)
Is there a way to get the browser NOT to insert HTML when the user hasn't inserted any HTML? Of course, I could just use
<textarea></textarea>
...and that does behave very similar to how I want, however, I don't want a strictly "text-only" input, as I will be adding and modifying HTML in the editable element using Javascript.
I considered constantly stripping all HTML out as the user types, only allowing HTML with a special class that I create to remain. That doesn't seem like a great solution, however. Is there something like wrap='soft' or some other way to say "stop making up HTML and putting it in my element!"
If you make it content editable, you are implicitly allowing the user to change the content of the HTML.
Pressing return should insert some kind of newline - either as closing a paragraph (</p>) and starting a new one (<p>), or entering a line break (<br>). Both of which in HTML require HTML tags, for the simple fact that a standard newline character (eg. \n or \n\r) is rendered as a single space, which is not what the user would expect - so inserting a raw newline as a "soft wrap" would not make sense and will ultimately lead to users impotently slamming their enter key getting mad at your site for not inserting a break when they think it should.
An even more fun fact is that if a user highlights some text, they can (or should) be able to bold and italicize text using keyboard shortcuts, which will again insert HTML.
Short of writing Javascript to override this behaviour, I am not sure you can disable the enter key inserting HTML tags to render the requested newlines.
To demonstrate this, here is a really simple page:
<html>
<body>
<div contentEditable="true"> Some things.</div>
</body>
</html>
(In Internet Explorer at least) If you double click on the text it becomes editable. Move to the end of line and type the following:
Enter - ( A new paragaph is made (wrapping the prior text in p tags).
Type "Words", the select it and hit Crtl + b - the text is now wrapped in <strong> tags.
Hit Shift + Enter - a line break (<br>) is now inserted.
Type "More words", select it and hit Crtl + i Its now italicised in <em> tags.
And the source should look like:
<html>
<body>
<div contentEditable="true">
<p>Some things.</p>
<p>
<strong>Words</strong>
<br>
<em>More words</em>
</p>
</div>
</body>
</html>
If you want complete control over the content going into the area, I'd recommend using a WYSIWYG editor, or alternative, accept that the browser probably knows what its doing and let it do its thing so you don't need to worry about it.
There is no cross-browser way of disabling or forcing an editable div to interpret enter keypress differently from what the browser intended.
Besides, different browsers will do different things with the new line. Some will wrap lines inside <p> tags, some will add <br>.
The idea is that it's the browser that controls the editable div, not you.
If you try to fiddle with the output in real time, you will be like a passenger occasionally trying to snatch the wheel from the driver's hands.
You're not even guaranteed to get the key events from such a div. For instance, your fiddle does not seem to work in IE11.
I would rather do it just like this very SO editor does: use a textarea for user input and generate whatever rich HTML you want in another, non-editable div.

<strong> tag getting replaced to <b> tag in CQ5

I'm using Rich Text Editor with MiscTools plugin to edit text in my website but when I open the HTML editor and create sth like this
<p><strong>Strong text</strong></p>
the CQ immediatelly rewrites it to
<p><b>Strong text</b></p>
Is it possible to disable this behaviour? I need to use the <strong> tag because of my CSS styles.
I'm using copy of text component from /libs/foundation/components/text.
Thanks for any help
There isn't very much documentation around this, but the default htmlRules configuration is eating your tags as part of its DOM processing/clean-up.
In particular, the defaults for the HtmlRules.DocType semanticMarkupMap (part of the typeConfig configuration property) will change <em> tags to <i> tags and <strong> tags to <b> tags.
I don't know if you can disable this directly, but you can update the map with an identity mapping (i.e. map b tags to b tags) so that nothing gets changed.
Add an htmlRules node like the following to your dialog.xml (as a sibling of the rtePlugins node):
...
<rtePlugins jcr:primaryType="nt:unstructured">
...
<misctools
jcr:primaryType="nt:unstructured"
features="sourceedit"/>
</rtePlugins>
<htmlRules jcr:primaryType="nt:unstructured">
<docType jcr:primaryType="nt:unstructured">
<typeConfig jcr:primaryType="nt:unstructured">
<semanticMarkupMap jcr:primaryType="nt:unstructured"
b="b"
i="i"/>
</typeConfig>
</docType>
</htmlRules>
...
...
or you can add nodes directly to your dialog in CRXDE Lite if you're not using maven or something similar (this screenshot shows the default, unmodified <i> to <em> mapping -- don't forget to change that if that's not what you want):
in semanticMarkupMap, add property "strong" with value "b" to automatically replace tags with in your rte text (and "em" property with value "i" for italic)