primefaces editor toolbars disabled in IE 11

Question

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

@Templar Try this in IE11 [Primefaces's showcase](http://www.primefaces.org/showcase/ui/editor.jsf). The editor is disabled on load, and doesn't work as it should. There is an exception in a Javascript (jquery.js) runtime (as per the debugger in IE11, which by the way , even crashed when I ran a series of test). After few months of learning the framework, I can attest that IE is not _by_ _default_ compatible with some features of Primefaces, this case is just another example. But most of time by tweaking facelets with some css and javascript code you can find your way out to make it 'work'. — , Dec 04 '13 at 21:13
@SujanSivagurunathan - I did post the question in their forum, and they do not seem very interested in IE bugs. How do I make this work in IE 11? — janenz00, Dec 05 '13 at 05:06
@janenz00 I saw your posting there. But honestly I can understand them.. It's really not their fault. They have no obligation to follow IE's rules and standards. You need to debug it yourself or report it as a bug , hoping it will be fixed someday. If you really need the editor, you can use the alternatives I've posted below. — , Dec 08 '13 at 13:29
@SujanSivagurunathan - I understand its not their fault. I'm checking various options and trying to find out an elegant solution. Working on it now. Will post as soon as I finish. — janenz00, Dec 08 '13 at 15:29

score 2 · Answer 1 · answered Dec 05 '13 at 21:20

2

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

answered Dec 05 '13 at 21:20

Hamid Samani · Answer 2 · 2013-12-05T09:04:21.993

1

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

edited Dec 05 '13 at 09:04

answered Dec 05 '13 at 08:46

Hamid Samani

445
5
15

score 1 · Accepted Answer · edited May 23 '17 at 12:21

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 .

score 0 · Answer 4 · answered Dec 04 '13 at 10:03

0

Try adding the following tag in the head:-

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

answered Dec 04 '13 at 10:03

Madhura

551
5
18

It doesn't work. See this - http://msdn.microsoft.com/en-us/library/ie/jj676915(v=vs.85).aspx – janenz00 Dec 04 '13 at 11:01

score 0 · Answer 5 · edited May 23 '17 at 12:03

0

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

edited May 23 '17 at 12:03

Community

1
1

answered Dec 06 '13 at 07:53

BholaVishwakarma

581
6
18

primefaces editor toolbars disabled in IE 11

5 Answers5