How to use documentViewer and ckEditor in primeFaces?

Question

How to use documentViewer and ckEditor in primeFaces?

Navigation

#1 by (0 votes)

0

I have created a pdf file with iText and the javascript plugin ckEditor, later when I try to show it in the document viewer of primefaces it sends me the following error:

ckeditor.js: 94 GET link 404 (Not Found)

As far as I can see, the error is that it does not find the plugin of the extension ckEditor of primefaces, however it did not use the plugin of primefaces but I downloaded the javascript one because I can customize it.

This only happens when I add the document document of primefaces. I have searched for why the error is sent but I can not find at what time or why it looks for the extension of primefaces instead of my javascript plugin.

javascript primefaces java-ee jsf

asked by Ken 14.03.2017 в 05:28

source

1 answer

iss express does not work in my project Load spinner in a specific layout

score 0 · Answer 1

You can use the ckEditor component of PrimeFaces and customize the configuration in this way.

PrimeFaces Component:

<pe:ckEditor id="editorPlantilla" widgetVar="wEditorPlantilla" value="#{plantillaControl.plantillaSelected.texto}" width="100%" height="500px" skin="kama"
             toolbar="[['Cut', 'Copy', 'Paste', 'PasteText', 'PasteFromWord', 'Undo', 'Redo'], 
             ['Bold', 'Italic', 'Underline', 'Strike', 'Subscript', 'Superscript'], 
             ['NumberedList', 'BulletedList', 'Outdent', 'Indent', 'Blockquote', 'CreateDiv'], ['HorizontalRule'],
             ['JustifyLeft', 'JustifyCenter', 'JustifyRight', 'JustifyBlock'], 
             ['Font', 'FontSize'], ['Table'], ['Maximize']]"
             contentsCss="#{resource['/css/plantillaContrato.css']}" customConfig="#{resource['/js/config.js']}"
             required="true" requiredMessage="Escriba el contenido de la plantilla" />

This is the config.js file that I have customized:

CKEDITOR.editorConfig = function (config) {
    config.language = 'es';
    config.height = 300;
    config.toolbarCanCollapse = true;
    config.allowedContent = true;
    config.extraAllowedContent = 'span(*)';
    config.enterMode = CKEDITOR.ENTER_BR;
    config.fontSize_sizes = '8/8pt;9/9pt;10/10pt;11/11pt;12/12pt;14/14pt;16/16pt;18/18pt;20/20pt;22/22pt;24/24pt;26/26pt;28/28pt;36/36pt;48/48pt';
};

CKEDITOR.on('dialogDefinition', function (ev) {
    // Take the dialog window name and its definition from the event data.
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if (dialogName === 'table' || dialogName === 'tableProperties') {
        // Estilo propio
        var advTab = dialogDefinition.getContents('advanced');
        // Width por defecto
        var stylesField = advTab.get('advStyles');
        stylesField ['default'] = 'width: 100%';
        // Clase por defecto
        var styleClassesField = advTab.get('advCSSClasses');
        styleClassesField ['default'] = 'tabla';
        //styleClassesField ['hidden'] = true;

        var info = dialogDefinition.getContents('info');
        var defAncho = info.get('txtWidth');
        defAncho['default'] = '100%';
        //defAncho['hidden'] = true;

        var defHeader = info.get('selHeaders');
        defHeader['default'] = 'row';
        //defHeader['hidden'] = true;
    }
});

CKEDITOR.on('instanceReady', function (ev) {
    var blockTags = ['div', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p', 'pre', 'li', 'blockquote', 'ul', 'ol',
        'table', 'thead', 'tbody', 'tfoot', 'td', 'th', 'tr'];

    for (var i = 0; i < blockTags.length; i++) {
        ev.editor.dataProcessor.writer.setRules(blockTags[i], {
            indent: false,
            breakBeforeOpen: true,
            breakAfterOpen: false,
            breakBeforeClose: false,
            breakAfterClose: true
        });
    }
});

It's just an example.