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
Related
I am using two separate text editors for my chat feature - a kendo editor and a normal editor. I would like to pass data between them when the user changes the editor. The text from kendo editor contains various html tags like <p>,<li>,<ul>. I would like to manually replace them with appropriate spacing and empty lines accordingly.
Right now I am using this code
this.messageBoxValue =messageBox.value.replace(/<[^>]*>/g, '');
Is there anyway I can use it to replace different html tags with different values? eg: replace <p> with next line <strong> with just space etc. Any help is appreciated.
Edit : By normal editor I mean the inbuilt kendo text area for the kendo conversational ui. It is just for typing and has no features like bold or italics.
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
This should be very simple, i can not believe that a company the size of Wordpress cannot provide users a very simple way to make line breaks.
I know how to use the text tab and code the page using html (im a developer). However my clients have absolutely no idea what html is so they obviously can not use it.
All the client wants to do is make a "space between lines" , in our terms a break line. They only want to use the visual editor.
Now when they start typing and hit enter, it creates & nbsp; or closes a paragraph tag.
Many articles are saying that shift + enter will make one, however this 100% does not as ive tried.
Ive tried a plugin that most articles are suggesting called "tinymce advanced". But this does not resolve the problem.
Is there any way possible for a normal user with no html knowledge to only use the visual editor and create br lines without actually using code?
Holding down Shift+Enter definitely works.
Alternatively, you can always prevent Wordpress from automatically adding <p> tags to the markup using the following code inside of your theme's functions.php file:
remove_filter('the_content', 'wpautop');
I had this problem on my site, it began when I updated the theme, which had not been updated for years.
The "miraculous" solution was to update
all the plugins as well.
I have realized that the
<br / > and the < p >
symbols are not present in the wp editor in text mode
So there must be a conversion between \n (newline) and <br / > and < p > taking place, I have not investigated this further, but maybe somebody can explain how WordPress is working.
With the WordPress upgrade to version 3.2, the text editor seems to remove the line break by itself.
Add a filter in the functions.php file which adds a clear attribute to the <br/> tag. When the attribute is added, the <br/> tag is not removed by WordPress.
function clear_br($content){
return str_replace("<br/>","<br clear='none'/>", $content);
}
add_filter('the_content','clear_br');
Then apply this filter on a variable where you need break should come in that text content
$specification = apply_filters( 'the_content', $specification );
For more info: https://blog.templatetoaster.com/wordpress-line-break-not-working/
This small code fixed my issue.
echo nl2br(category_description( the_content);
Just replace the content tag with this in you file
We are using TinyMCE as our text editor for the Wordpress portion of our site.
Our problem is that TinyMCE does not wrap our copy in tags by default, but instead it uses <span>.
This is not cool, because the person who updates our posts has to literally go into the html editor instead of the visual editor and manually add <p> tags. This is the only way she can guarantee that our post is not one big long paragraph. This person does not know anything about code, so this is a hardship for her.
I need to make TinyMCE react so that when she types a paragraph, and hits enter/return, it breaks to a new paragraph and wraps proper <p></p> tags around the text.
I tried to switch to CKEditor, but I was not able to embed YouTube videos or images with it.
This is a major part of our blog, so I'm forced for now to stick with TinyMCE.
here's an example of what is generated for us:
<span style="color: #373737; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 19.5px;">
... sample text ...
</span>
I need this block of copy to look like this:
<p>
... sample text ...
</p>
This is strange because normally Tinymce would break it into paragraphs. You do not need to add <p> tags in Wordpress html as this is done automatically even though it does not show inside the editor. Could it be a plugin conflict? --- Try disabling all plugins except TinyMce and then try typing a paragraph, and hit enter, to see if it breaks to a new paragraph and wraps. Does the paragraph break when you press enter with TinyMce disabled (so you know for sure its TinyMce causing the issue )? Then try again with all plugins disabled to make sure its not a theme issue. and if that all fails it may be a theme conflict with the plugin, are you using a pre-made theme or did you create it?
You should check if the following tinymce parameter is set correctly (forced_root_block):
forced_root_block : 'p',
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