I use primefaces editor within a project (http://www.primefaces.org/showcase/ui/input/editor.xhtml). My problem is that it always generates SPAN elements.
E.g. test is exported as
<span style="font-weight: bold;">test</span>
Instead of this, I need to generate markup (and so for the other functions) liek this:
<b>test</b>
Any idea?
(it is not my personal wish but a need to be compatible with a legacy API)
Instead of <p:editor> use <pe:ckEditor> primefaces extension, and there are various options available for this choose according to your requirement primefaces editor will always generate span for text.
Related
I am trying to change the p:growl position of primefaces through the .ui-growl class to use position: sticky. However, since the component is rendered at the end in body, the relative behavior of the position does not work as I would like.
Is there any way to use the sticky position for this component?
Or some way to get the component to render where it is declared?
PrimeFaces 5.1;
Mojarra 2.1;
Disclamer: I tried this with the PF 7.0 showcase, but I think the basics also work with the 5.1 version.
You effectively have 4 options. The latter three all need you to inspect the javascript source of the component (which is open, so you can ALWAYS inspect it before asking questions, the java source is irrelevant here) and for the first solution it helps to see how the component works, but inspecting with a browser developer tool is sufficient (that is how I did it).
Basic analysis with or without looking at the source
This is a variant on your "Or some way to get the component to render where it is declared?". Since on the client side, it is all plain html, css and javascript, you can manipulate with al tools available on the client-side.
You can see that the main part of the grow is html technically rendered where it is declared. Check the PrimeFaces showcase and you'll see
<span id="j_idt700:growl" class="ui-growl-pl" data-widget="widget_j_idt700_growl" data-summary="data-summary" data-detail="data-detail" data-severity="all,error" data-redisplay="true"></span>
right inside the form where it also is in the xhtml. The javascript of the component creates the client side dom things, amongst which is the container that you see right before the end of the body (from the showcase)
<div id="j_idt700:growl_container" class="ui-growl ui-widget" style="z-index: 1002;"></div>
This last piece is html is where the individual growls are added to when they need to be rendered and hence the part that makes the component in most normal cases behave correctly but needs to be done differently in your case.
Solution 1, pure client-side component agnostic solution
Effectively this is as simple as moving this piece of html in the dom, see How to move an element into another element?.
In the online showcase I put the following jquery code in the browser developer tool console
$("#j_idt700\\:growl_container").prependTo(".layout-content");
And added the following css
position: sticky;
top: 10px;
float: right; // this is needed in the showcase, might not always be needed
And it worked.
The jquery should be put somewhere in your page where it runs after the component javascript is executed, so best is to do it right before the end of the body.
Keep in mind that the j_idt700 prefix is the dynamic id of the form in the showcase (it does not have a fixed id here), but you can also use different selectors based on the classes or whatever)
Solution 2, changing the source 'locally'
In the javascript source, you can see where the container is technically rendered
render: function() {
//create container
this.jq = $('<div id="' + this.id + '_container" class="ui-growl ui-widget"></div>');
this.jq.appendTo($(document.body));
//render messages
this.show(this.cfg.msgs);
},
Changing the this.jq.appendTo($(document.body)); in some way to have it appended to the current html node ('this'?) will make it work too. Regarding the overriding, you have two options
How do I find and/or override JavaScript in Primefaces component based on widgetVar?
Override a method from a Primefaces specific widget
Solution 3 Changing the source server side
Effectively you do the first part of #2 but patch the source and create a new custom PrimeFaces version
Solution 4 Make this feature avaiable for others too
What can be done here is to create a new attribute on the component and patch the source in some places so it is configurable to have the component behave as it is now or as sticky (they changed the existing 'sticky' attribute to 'keepAlive' in 7.0.x so sticky is avalable again ;-)). Of course this should be submitted as a patch then...
I'm interested how I can display dash line into p:tree?
In this tutorial there is no dash line maybe the only way is to add it manually.
Is there a way to add it?
You can do this using CSS selectors.
Internally Primefaces v.2 use a YUI tree view, so the CSS classes are the same - they're documented here.
Primefaces v.3 I think use their own set of CSS classes for the tree view - you can either find them in the documentation or figure them out analysing the showcase example using e.g. Firebug.
I have a small issue implementing TinyMCE into a Symfony project. I get the text editor to come up and save rich text to a database field. But when I go to "echo" it on a page, I get all the HTML tags instead of the rich text itself. Is there a special way that I need to "echo" this so that it parses the html? I also want it so that when people manually type in html tags, that they are displayed as regular text (to avoid people people adding hyperlinks and other unwanted things to their posts). Here is what displays:
<p>Test</p> <p><strong>Bold Test</strong></p> <p><span style="text-decoration: underline;"><strong>Underline Text</strong></span></p>
Instead of this:
Test Bold Test Underline Text
Symfony2 uses output escaping for security. You can read about it here: http://symfony.com/doc/current/book/templating.html#output-escaping
To echo a variable without escaping it you can do this:
{{ article.body|raw }}
In order to clean up and restrict which tags can be used you will want to use HTMLPurifier which has a bundle here: https://github.com/Exercise/HTMLPurifierBundle
For Symfony 1.4
Symfony 1.4 has similar output escaping. You can get the raw data with:
$sf_data->getRaw('varName');
or if it's a method on an object you can add ESC_RAW as a parameter to the method call (warning: symfony will do some magic here)
$myObject->getMessage(ESC_RAW);
more on 1.4 output escaping here
Is it possible to make the PrimeFaces's Editor component, right to left?
It seems not to support dir and style attributes... :(
in my experience controls in jsf framework like prime/open/etc.. don't support RTL using html #dir,
usually the interfaces of these controls are built using Javascript, so probably you should work at that level.
Can I suggest you to consider two other alternatives to jsf controls in this case?:
Using a javascript html editor (like elrte, maybe is easier to customize and it has also Arabic translation). http://elrte.org/
Using the Flex html editor (is Flash, if you can, and Flex support RTL for all controls)
F.
Just bumped into this thread by accident,
anyway I remember that i did the RTL with jquery like this:
<script type="text/javascript">
jQuery(document).ready(function($) {
$("j_idt33:inputtextlist").contents().find('html').attr('dir', 'rtl');
});
had to find the id with firebug , inputtextlist was the id i gave to the editor , and ypu can always use a smarter jquery selector (with suffix match)
I am following the example given here to override the default DocumentLibraryForm rendering template
MSDN - Override a Default Control Template
<SharePoint:RenderingTemplate ID="DocumentLibraryForm" runat="server">
... Custom stuff here ..
</SharePoint:RenderingTemplate>
(Thats the 2007 version, the 2010 version is the same but not complete, it doesn't show the directives)
And that all works just fine. There are lots of other examples on t'internet of overriding control rendering templates.
However I am trying to override things like ListTitleViewSelectorMenu and that isn't working.
<!-- Definition from allitems.aspx -->
<SharePoint:ListTitleViewSelectorMenu AlignToParent="true" id="LTViewSelectorMenu" runat="server" />
SharePoint:RenderingTemplate can only be used to override defined templates, usually in the generation of forms and list views. I dont think they can be used to replace random controls that are placed on page layouts.
I think i have tried what you are trying do, customise that view dropdown on list layout pages. I have an control that shows it sorted. The way that you replace controls is with a DelegateControl (http://msdn.microsoft.com/en-us/library/ms470880.aspx), but unfortuately ListTitleViewSelectorMenu is not wrapped by a DelegateControl in the standard list layouts. You may have to replace the entire bread crumb.