I have a component with encapsulationset to ViewEncapsulation.None and a property named question which contains text from server call, which might contain HTML tags like
<strong>Main Question</strong> and some more text
in my view I use the property like this
...
<p [innerHTML]="question"></p>
...
and the produced HTML is
<p>
<strong>Main Question</strong> and some more text
</p>
but the thing is that strong tag apart from the semantics should also make the text bold, which doesn't happen.
1) Why this happens and browser does not render it correctly?
2) which is the correct way to fix it?
I know there are similar questions but they couldn't help.
Angular Version Used: Angular 2.4.7
Related
consider that I have several HTML templates and they have custom HTML tags. For ex: c-icon, c-text, c-button etc.
For some usecase(Display other content along with innerHTML), I need to access c-icon tag HTML inside c-text and append it to some text so that I can render it with some other html text. In future, I may have another component called c-badge and even I want to refer and render.
Could you please provide any suggestions for achieving the same?
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
Here is a nonstandard HTML element that I defined (AngularJS makes this easy):
<exercise id="Sample Exercise" language="Scala" lectureId="5437">
This is the text of the lecture
</exercise>
If I use this element in an HTML document, each time I switch from CKEditor's rendered mode to source mode a new empty paragraph is added between each of the block elements in the document:
<p> </p>
The 2nd time I switch, I get two insertions:
<p> </p>
<p> </p>
The 3rd time I switch, I get three insertions between each block-level element, etc:
<p> </p>
<p> </p>
<p> </p>
Can anyone suggest a workaround?
It seemed easier to avoid custom elements and so I used HTML5 data attributes.
<div class="exercise" data-id="Challenge #42" data-language="Scala" data-lectureid="5437">
<p>Create a program that outputs the meaning of life, the universe, and everything.</p></div>
This worked out. Maybe greater integration between CKEditor and AngularJS will evolve over time.
Pekka's question is very good - why do you need to load a custom element into CKEditor? Neither browsers (which do one part of WYSIWYG editing) not CKEditor (which does another part) know how to handle this element, what it means, how to render it and how editing features should work around it. For example, if I understood your question, you wrote about <exercise> that it is a block element. How do CKEditor and browsers know that it is a block element? :|
Second thing you should understand is that CKEditor is not a WYSIWYG website builder, but a "documents" editor. Its content has to have a meaning for it and that tag won't have it.
Anyway, if you must go this way, there are some things you can do.
Here are two answers that can give you an idea what you can do: CKEditor strips <i> Tag.
If you'll decide not to protect source of your <exercise> tags, but to render them, then you should also know about the CKEDITOR.dtd object, which I described briefly here: ckeditor how to allow for .insertHtml("<customTag myAttr='value'"></customTag>").
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
I am using a spark RichText component to render a html text in my Flex Web Application.
The html text that is given to me is with HTML elements with 'style' attribute having all the styles.
For Example:-
<p style="text-align: left;"><b>Hello</b> <i>this is a sample</i>
<font style="color: #ff0000;">HTML text</font></p><p style="text-align: right;">
<u>to be rerndered in FLEX</u></p>
Now, the Flex spark RichText does not show all these styles applied to the text.
However, if I have HTML with inline property attributes (without 'style' attribute) e.g. :-
<font color="#ff0000">Hello</font>
With the above, I get the desired style.
Any pointers/ solution to get around with this, and render the styles will be appreciated.
Thanks,
Mangirish
Try using <span style="color:#FF0000;">HTML text</span> and see if that makes any difference? I'm not too sure how well Flex renders older HTML tags. Besides, <font> is deprecated anyway.
If your css is fix, you can use StyleSheet Object
Here is a tutorial : http://learnola.com/2008/12/03/actionscript-3-tutorial-using-html-and-css/
If you need more information, just ask it in comments.
Short answer, TLF won't support that kind of styles that I know of, but you can always try to convert it to see what happens:
var textflow:TextFlow = TextConverter.importToFlow(yourHTMLString, TextConverter.TEXT_FIELD_HTML_FORMAT);
However, I have a sneaking suspicion that it won't convert the style properly and probably just ignore it altogether. The only solution I can think of is
Have a custom way to parse the html and get the style out and set it on the textflow or
Have the 'server' html be fixed to be compatible with the flex TLF (inline styles)
I would personally prefer the second option since it's easier to implement on the client.