CODEWITHSUNDEEP
internet-explorerjsfprimefaceseditor
janenz00
janenz00

Reputation: 3310

primefaces editor toolbars disabled in IE 11

I have the following primefaces editor code, which works fine in all browsers except IE 11. In IE 11, the text formatting toolbars show as disabled on load. Any idea how to correct?

    <?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:h="http://java.sun.com/jsf/html"
             xmlns:f="http://java.sun.com/jsf/core"
             xmlns:ui="http://java.sun.com/jsf/facelets"
             xmlns:p="http://primefaces.org/ui">

      <h:head>
      </h:head>

    <h:body>
        <h1>Hello World PrimeFaces</h1>

        <h:form>
            <p:editor value="#{editor.value}" />
        </h:form>

    </h:body>

  </html>

Things I have tried: Solution given in p:editor visible in chrome but not rendered properly in IE

Upvotes: 3

Views: 4796

Answers (5)

janenz00
janenz00

Reputation: 3310

I tried out different options given above. The practical options are to either emulate a lower IE version or replace the editor with another one, depending on the nature of application you are developing.

Option 1. Emulate a version of IE other than 11. The <p:editor> renders fine till IE10. So, emulateIE10 will do. This can be done by adding the following meta tag:

    <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" />

The following SO link explains this in detail - What does <meta http-equiv="X-UA-Compatible" content="IE=edge"> do?

If your editor is included as part of a composite component, you can use the facet tag for resource ordering as follows, in the <head> part of the xhtml for the composite component:

    <f:facet name="first">
        <meta http-equiv="X-UA-Compatible" content="IE=EmulateIE10" /> 
    </f:facet>

This will make sure that the tag will render in the beginning, in the page that renders the composite component. Here is the help - http://blog.primefaces.org/?p=1433

However, I could not use this option because of some application dependencies.

Option 2: Use alternatives. ckeditor renders fine in IE11. The following snippet worked for me:

    <h:form>
     <pe:ckEditor id="editor" value="#{editorBean.text}">                
     </pe:ckEditor>
    </h:form>
    <p:commandButton value="Save" process="@form"  action="#{editorBean.saveListener}"/>

Primefaces extensions has to be installed for using the <pe:ckEditor> tag as in - https://github.com/primefaces-extensions/primefaces-extensions.github.com/wiki/Getting-Started .

Upvotes: 1

BholaVishwakarma
BholaVishwakarma

Reputation: 582

IE11 has inbuilt compatibility for IE8,IE9, which can be adjust so. Makeing JSF compatible in IE9,10,11

Upvotes: 0

user2880020
user2880020

Reputation:

You can use WYSIWYG editors like TinyMCE or ckeditor or Redactor, there are plenty of alternative solutions easily integratable with Facelets.

Upvotes: 2

Hamid Samani
Hamid Samani

Reputation: 445

Why not replace PrimeFaces editor with PrimeFaces Extensions CKEditor?

It has many rich features than PrimeFaces editor. I tested showcase and it has IE support too.

Getting started guide is described here

Upvotes: 1

Madhura
Madhura

Reputation: 589

Try adding the following tag in the head:-

<meta http-equiv="X-UA-Compatible" content="EmulateIE8"/>

Upvotes: 0

Related Questions