Использование ckeditor в jsf странице

Question

Как использовать пользовательский CKEditor на странице jsf? У меня много проблем, пытаясь его реализовать. То, что я сделал:

• Я сделал пользовательский CKEditor с ckEditor builder
• загруженных и поместил его в моей папке WebContent.

test.xhtml страница:

<script src="/ckeditor/ckeditor.js"></script> 
    <form> 
     <textarea name="editor1" id="editor1" rows="10" cols="80"/> 

     <script> 

     CKEDITOR.replace('editor1'); 
     </script> 
    </form> 

Не работает, только что стандартное текстовое поле. Поэтому я изменил ГКЗ к:

<script src="ckeditor/ckeditor.js"></script> 

Это работает, но это не мой обычай CKEditor построить это был ванильный один.

Так что я использовал тег h: OutputScript. (У меня было 2 CKEditor папки в одном проекте с целью облегчения доступа во время тестирования):

<h:outputScript library="script/ckeditor" name="ckeditor.js"></h:outputScript> 

текстовое поле просто исчезает. Моя текстовая область просто исчезает. Он находит скрипт, потому что, если я помещаю неправильное имя сценария, моя текстовая область восстанавливается.

Так что я удалил папки CKEditor ... И волшебство Произошло: Это все еще работает при использовании этого:

<script src="ckeditor/ckeditor.js"></script> 

У меня был нулевой файл ckeditor.js в моем проекте, и все же сценарий работал ,

Тогда я попробовал расширение primefaces с этим в pom.xml:

<dependency> 
     <groupId>org.primefaces.extensions</groupId> 
     <artifactId>primefaces-extensions</artifactId> 
     <version>3.1.0</version> 
    </dependency> 

и это в XHTML:

<pe:ckEditor id="editor" value="" checkDirtyInterval="0"> 
</pe:ckEditor> 

Но результат был стандартный HTML текстовое поле окно снова. Как я могу использовать его?

Answer 1

Я переключился на primeface extension.

Таковы зависимости, необходимые (я забыл вторую, именно поэтому он не работал):

<dependency> 
    <groupId>org.primefaces.extensions</groupId> 
    <artifactId>primefaces-extensions</artifactId> 
    <version>3.1.0</version> 
</dependency> 
<dependency> 
    <groupId>org.primefaces.extensions</groupId> 
    <artifactId>resources-ckeditor</artifactId> 
    <version>3.1.0</version> 
</dependency> 

то пространство имен в файле Xhtml:

xmlns:pe="http://primefaces.org/ui/extensions" 

и here is a link that explains step by step.

Если вы не используете интерфейсы, вы можете заставить его работать, следуя комментарию w vd L

Answer 2

Я использовал его в JSF Richfaces. Стандартные интерфейсы поставляются с CKEditor 3.3, я хотел 4.0, поэтому я также установил пользовательский CKEditor.

Для меня единственное, что нужно было, - это настроить редактор на лету.

Что я сделал:

XHTML: Главная

.... 
// setting 'root' path of the CKEditor on the landing page (before the actual editor page) 
// Maybe you can let this line point to your own custom settings? 
window.CKEDITOR_BASEPATH = '#{request.contextPath}/org.richfaces.resources/javax.faces.resource/ckeditor/'; 
.... 

XHTML: Редактор страниц

   .... 
       <script type="text/javascript"> 
       /* <![CDATA[ */ 
         function destroyEditor(){ 
          // removing old instances 
          for(var i in CKEDITOR.instances){ 
           CKEDITOR.instances[i].destroy(); 
          } 
         } 

         jQuery(document).ready(function() { 
          CKEDITOR.config.language = 'nl'; 
          CKEDITOR.config.defaultLanguage = 'nl'; 
          CKEDITOR.config.resize_enabled = false; 
          CKEDITOR.config.height = '469px' 
          .... 
          // lots of settings, to make it according to my own custom wishing. 
          .... 
          CKEDITOR.config.extraPlugins = 'tekstblokken,nexttext'; 
          // The important Line. To set the editor on the page. 
          CKEDITOR.replace(#{rich:element('editorTextArea')}); 

          CKEDITOR.on('instanceReady', function(){ 
           // do some own custom code if needed 
          }); 
         }); 
       /*]]> */ 
       </script> 

....

<h:inputTextarea id="editorTextArea" value="#{cc.attrs.managedBean.editorValueOf(cc.attrs.id)}"> 
        </h:inputTextarea> 

Надеюсь, это поможет вам в правильном направлении.