Использование CKEditor вместо PrimeFaces Editor - PullRequest
Новая
       7

Использование CKEditor вместо PrimeFaces Editor

6 голосов
/ 13 мая 2011

Я пытаюсь использовать CKEditor в своем приложении JSF. Как получить содержимое CKEditor в бэк-бин ..?

index.xhtml 

<form action=""  method="post">
            <p>
            My Editor:<br />
                <textarea cols="90" rows="20"  id="editor1" name="editor1" value="#{EditorBean.value}"></textarea>
                <script type="text/javascript">
                        CKEDITOR.replace( 'editor1',
                        {
                            uiColor: '#85B5D9'
                        });
                </script>
                <input type="button" value="Clear" name="clear" onclick="clear1()"/>
            </p>
        </form>

BackingBean

@ ManagedBean открытый класс EditorBean {

private String value;

public String getValue() {
    return value;
}

public void setValue(String value) {
    this.value = value;
    System.out.println("Content: "+value);
}

}

Когда я пытался напечатать значение, оно не печатается. Помогите мне в этом вопросе. Редактор PrimeFaces не поддерживает функцию «Вставить таблицу». Итак, я хочу использовать CKE.

Ответы [ 5 ]

7 голосов
/ 13 мая 2011

Поскольку el не сможет оценить не-JSF-компонент.

Добавьте это на вашу страницу: 

<h:inputHidden value="#{EditorBean.value}" id="editorValue"/>

и onblur редактора textarea присваивают значение скрытому элементу, используя 

document.getElementById(editorValue).value = this.value;
6 голосов
/ 05 апреля 2012

Поскольку этот вопрос каким-то образом встал ....

Существует еще одна опция:

Вы можете использовать PrimeFaces Extensions , вот ссылка Расширения PrimeFaces CKEditor

Вот пример из витрины 

<p:growl id="growl" showDetail="true" />  
<pe:ckEditor id="editor" value="#{editorController.content}" interfaceColor="#33fc14">  
    <p:ajax event="save" listener="#{editorController.saveListener}" update="growl"/>  
</pe:ckEditor>  

<p:commandButton actionListener="#{editorController.changeColor}" update="editor"  
      value="Change color with AJAX" style="margin-top:10px;"/>
2 голосов
/ 03 мая 2013

попробуйте это: 

<textarea class="ckeditor" cols="80" id="editor1" rows="10"/>
<h:inputHidden value="#{tskCtrl.selected.dsc}" id="editorValue"/> 
<p:commandButton onclick="document.getElementById('editorValue').value = CKEDITOR.instances.editor1.getData();" action="#{tskCtrl.create()}" value="Post" />
1 голос
/ 19 апреля 2012

Ответ от niksvp был полезен и направил меня в правильном направлении, но проблема в том, что обработчик размытия никогда не срабатывает. Я должен был скопировать значение из текстовой области в inputHidden на обработчике onclick Кнопка command: 

<textarea id="textareaValue" .../>
<a4j:commandButton execute="editorValue" onclick="document.getElementById('editorValue').value = document.getElementById('textareaValue').value;"

...

или 

<a4j:commandButton execute="editorValue" onclick="jQuery('#editorValue').val(jQuery('#textareaValue').val())"

Я пытался использовать onbegin и onbeforedomupdate, но они не работали.

0 голосов
/ 02 марта 2019

Другим вариантом является использование JSF-версий формы и текстовой области. (Скорее всего, это можно сделать и с элементами сквозного прохождения, но я этого не пробовал.) 

<h:form id="form">
  <p>
    My Editor:<br />
    <h:inputTextarea cols="90" rows="20"  id="editor1" value="#{EditorBean.value}" />
    <script type="text/javascript">
      ClassicEditor.create(document.querySelector('form\\:editor1'))
        .then( editor => {
               console.log( editor );
           } )
        .catch( error => {
                console.error( error );
            } );
    </script>
  </p>
</form>

Предполагается, что у вас нет prependId=false.

Странный \\: - проблема с выходом. Без этого не получится. Вы получите сообщение об ошибке «неверный селектор» в консоли.

Вы можете идентифицировать form и editor1 с другими именами, но вам также потребуется изменить селектор. Вы не хотите оставлять настройки по умолчанию, так как они хрупкие и часто меняются при обновлении страницы. Теперь это изменится, только если вы измените структуру, где editor1 относительно form. Например. если вы добавите fieldset вокруг editor1, то идентификатор будет выглядеть примерно так: form\\:fieldset\\:editor1, где fieldset - это идентификатор fieldset, как указано в JSF. JSF создаст для вас длинную версию.

Для этого также необходимо добавить скрипт CKEditor в заголовок, например: 

  <script src="https://cdn.ckeditor.com/ckeditor5/11.2.0/classic/ckeditor.js"></script>

Этот конкретный пример относится к версии ClassicEditor. Если вы хотите другую версию, вам нужно изменить сценарий и часть, которая говорит ClassicEditor.

Различия между сценарием, который вызывается в вопросе, и этой версией может заключаться в том, что это текущая версия (как я ее пишу), пока вопрос старше

В качестве альтернативы, вы можете предпочесть h:outputScript. Но тогда вам может потребоваться разместить скрипт в папке ресурсов, а не использовать версию из CDN.

Смотри также:

...