"P editor" Text on iPad

Locked
akassaw
Posts: 3
Joined: 11 May 2015, 22:27

12 Jan 2016, 16:44

Good Morning,

First, I'm not a coder. I'm a project manager for a project that utilizes PF Spark UI theme. My development team is telling me that PF has a bug in their "p editor" that will always show the HTML within the text entry box. The text is:

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<html>

<head></head>

<body>
</body>
</html>
Image

The text only shows up on my iPad and Android devices. My developers say there's no way to get rid of this and we'll just have to deal with it. I have a hard time believing this when I can run the demo site locally and not have this issue at all.

I could use some insight here or at least some help with some links on how to get rid of this issue.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

13 Jan 2016, 00:13

Hi Akassaw,

Can you please try showcase demo on Mobile Devices?
http://primefaces.org/showcase/ui/input/editor.xhtml

I couldn't see a text like in your screenshot. And What PF-version are you using?

akassaw
Posts: 3
Joined: 11 May 2015, 22:27

13 Jan 2016, 17:08

Aragorn,

We are using PF 5.2.

Here is a test URL: "http://173.219.108.117:8080/test.jsf"

We are able to test this on PC and see no embedded HTML tags. Although, when we pull this up on iPad or Android we see the HTML tags.

Note:

1. The HTML string is coming from a JSF bean and the string is hard-coded.
2. For testing, we have coded a separate XHTML page "test.xhtml", where you can see that it is using primefaces <p:editor/> component, which is referring to the hard-coded HTML string in corresponding bean class (Plase refer attached code.png)

Image

Code: Select all

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
	xmlns:ui="http://java.sun.com/jsf/facelets"
	xmlns:h="http://java.sun.com/jsf/html"
	xmlns:f="http://java.sun.com/jsf/core"
	xmlns:p="http://primefaces.org/ui"
	xmlns:fn="http://java.sun.com/jsp/jstl/functions"
	xmlns:lims="http://java.sun.com/jsf/composite/lims">

<h:head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
</h:head>
<h:body>
	<ui:composition template="/templates/masterLayout.xhtml">
	
		<ui:define name="head">
			<h:outputScript name="lims_grid.js" library="js" />
		</ui:define>
		<ui:define name="windowTitle">Panel LIMS WT :: Tests</ui:define>
		<ui:define name="mainPanel">
			<div class="maincontent first">
			<h:form id="form"  dynamic="true" cache="true" enctype="multipart/form-data">
			<p:outputPanel id="notesPanel">
			<div id="mainNotesUploader">
			<div class="row" style="margin-top: 10px;">
				<!-- row -->
				<div class="col-lg-12 col-xs-24">
					<div class="panel panel-default">
						<div class="panel-heading" style="padding: 18px !important;">
							<h4>Images</h4>
						</div>
						<div class="panel-body" style="padding: 10px !important;">
							<p:fileUpload id="fileupload" 
								fileUploadListener="#{manageRptTestAndPanelBean.upload}" auto="true"
								mode="advanced" multiple="true" process="@form"
								update="@(.mainNotes)" oncomplete="initializeDataTable();"
								sizeLimit="#{utilityBean.attachmentMaxSize}" />
						</div>
					</div>
				</div>
				<div class="col-lg-12 col-xs-24">
					<div class="panel panel-default">
						<div class="panel-heading" style="padding: 18px !important;">
							<h4>Closing Notes</h4>
						</div>
						<div class="panel-body" style="padding: 10px !important;">

							<p:editor id="mainNotes" styleClass="mainNotes"
								value="#{manageRptTestAndPanelBean.testHtml}" widgetVar="mainNotes"
								onchange="submitMainNotes(); mainnotesiframe();" />
							<p:remoteCommand name="submitMainNotes" process="@parent"
								update="@none" />
						</div>
					</div>
				</div>
			</div>
		</div>
		</p:outputPanel>
		</h:form>
	</div>
		</ui:define>
	</ui:composition>
</h:body>
</html>
Tested on Android Galaxy 10.1 and the HTML text did NOT appear. It appears to be an issue related with iOS pulling the HTML from the above code and displaying it within the editor.

On iOS:
Image

On Android Galaxy 10.1:
Image

akassaw
Posts: 3
Joined: 11 May 2015, 22:27

15 Jan 2016, 05:22

/bump

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

17 Jan 2016, 00:48

This issue isn't a layout or theme issue. I replicated this issue without Spark.
We are using CLEditor (a 3rd part API) for p:editor and saw some checks for IOS. I overrode this checks. Please try the following JS code;

Code: Select all

<script type="text/javascript">
//<![CDATA[
$(window).load(function () {
    var ua = navigator.userAgent.toLowerCase(),
            iOS = /iPhone|iPad|iPod/i.test(ua); // Test for iPhone/iTouch/iPad

    if (iOS) {
        var $this = PF('editorWidget'),
                contentWindow = $this.editor.$frame[0].contentWindow,
                doc = $this.editor.doc = contentWindow.document,
                $doc = $(doc),
                buttons = $this.editor.$toolbar.find(".ui-editor-button");

        $this.editor.$frame.show();
        $this.editor.$area.hide();

        $doc.on("keyup mouseup", function () {
            if (!$this.editor.focused) {
                $this.editor.$frame[0].contentWindow.focus();
                window.focus();
                $this.editor.focused = true;
            }

            enabledButtons(buttons);
        });

        buttons.on('click', function (e) {

            setTimeout(function () {
                enabledButtons(buttons);
            }, 2);
        });
    }
});

function enabledButtons(buttons) {
    $.each(buttons, function (idx, elem) {
        var $elem = $(elem);

        $elem.removeClass('ui-editor-disabled');
        $elem.removeAttr('disabled');

    });
}

//]]>
        </script>

Taproot
Posts: 3
Joined: 17 Jun 2016, 01:50

17 Jun 2016, 06:23

I have run into the same problem and was able to solve it with the script that aragon provided. However, in two cases my code used the editor within a dialog (<p:dialog>) and in those cases script is not effective.

I experimented with combining the script with the code that shows the dialog (running it right before or after the the dialog is shown) but did not have any success. Any insights for making this work when the <p:editor> is used with a <p:dialog> would be much appreciated.

I am using Primefaces 5.3.

mert.sincan
Posts: 5281
Joined: 29 Jun 2013, 12:38

20 Jun 2016, 08:57

I experimented with combining the script with the code that shows the dialog (running it right before or after the the dialog is shown) but did not have any success. Any insights for making this work when the <p:editor> is used with a <p:dialog> would be much appreciated.
Can you please try this issue without Layout and Theme? I think it is not a Layout or Theme issue. if right, please use core forum; http://forum.primefaces.org/viewforum.php?f=3

Also, we are using CLEditor (a 3rd part API) for p:editor. Please try with CLEditor.

Locked

Return to “Spark”

  • Information
  • Who is online

    Users browsing this forum: No registered users and 3 guests