primefaces pe:ckEditor not work use custom toolbar in dialog framework

Question

I'm doing HTML editor with PrimeFaces Extensions pe:ckEditor and use custom toolbar, it's in a dialog framework. When the pe:ckEditor is opened, it is not working as expected. Here is my code:

<h:form id="myBeanForm">
    <!--other component-->
    <p:commandButton value="button" action="#{myBean.openDialogFramework}" process="@this"/>
</h:form>

@ViewScoped
@ManagedBean
@Named("myBean")
public class MyBean{

    @PostConstruct
    public void init() {
        //do something
    }

    public void openDialogFramework(){
        Map<String,Object> options=new HashMap<String, Object>() {
            {
                this.put("height", 625);
                this.put("width", 1280);
                this.put("modal", true);
                this.put("resizable", true);
                this.put("contentWidth", "100%");
                this.put("contentHeight", "100%");
            }
        };
        Map<String, List<String>> params=new HashMap<>();
        params.put(keyValue, new ArrayList<String>() {
            {
                this.add(jsonValue);
            }
        });

        openDialog(dialogPath,options,params);
    }
    private void openDialog(String outcome, Map<String, Object> options, Map<String, List<String>> params) {
        RequestContext.getCurrentInstance().openDialog(outcome, options, params);
    }
}

<h:form id="myDialogBeanForm">
        <pe:ckEditor id="ckEditor" width="100%" id="detailEditor" height="400"
                     toolbar="[['Cut','Copy','Paste','PasteText','-','Format','Font','FontSize','-',
                                'Bold','Italic','Underline','Strike','Subscript','Superscript','-','NumberedList','BulletedList','-',
                                'JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock','-','BidiLtr','BidiRtl','-',
                                'TextColor','BGColor','-','Image','Link','Unlink','-','RemoveFormat']]"/>
</h:form>

@ViewScoped
@ManagedBean
@Named("myDialogBean")
public class MyDialogBean{

    private Bean bean;

    @PostConstruct
    public void init() {
        bean= getParam(keyValue);
    }

    private <T> T getParam(String key) {
        HttpServletRequest request = (HttpServletRequest)
            FacesContext.getCurrentInstance()
                    .getExternalContext().getRequest();
        String beanJson= request.getParameter(key);
        if (StringUtils.isEmpty(beanJson)) return null;
        try {
            ObjectMapper mapper = new ObjectMapper();
            mapper.configure(DeserializationFeature
                .FAIL_ON_UNKNOWN_PROPERTIES, false);
            mapper.configure(DeserializationFeature
                .FAIL_ON_IGNORED_PROPERTIES, false);
            return mapper.readValue(beanJson, Bean.class);
        } catch (IOException e) {
            e.printStackTrace();
            throw new RuntimeException(e);
        }
    }
}

In this case, when I click on the button, the dialog view opens, but the pe:ckEditor showed like this (blank area):

If the pe:ckEditor update again, it working:

If I do not use customised pe:ckEditor, the problem is gone. However sometimes, even though the editor is customised, it works.