在jsf頁面中使用ckeditor

如何在jsf頁面中使用自定義CKEditor？嘗試實施它時遇到很多麻煩。我所做的：在jsf頁面中使用ckeditor

我做了一個自定義的CKEditor與ckEditor builder
下載並把它放在我的web內容的文件夾。

test.xhtml頁：

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

     <script> 

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

沒有工作，剛剛有了一個標準的textarea。所以我改變了src到：

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

這是工作，但它不是我自定義CKEditor建立它是香草之一。

所以我使用了h：OutputScript標籤。（我曾在同一項目2個CKEDITOR文件夾，以方便訪問，同時測試）：

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

textarea的只是消失。我的textarea消失了。它發現腳本，因爲如果我把一個錯誤的腳本名稱，我的textarea備份。

所以我刪除了文件夾的CKEditor ...還有神奇happenned：使用時，它仍然在工作的：

<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文本區域框。我如何使用它？

來源

2015-06-07 Ced

我切換到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.

如果你沒有使用primefaces，你可以通過遵循w vd L的評論來工作：

來源

2015-06-08 18:41:43 Ced

我在JSF Richfaces中使用過它。標準的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>

我希望這能給你一些正確的方向

來源

2015-06-08 09:29:32

感謝您的回答。我正在使用primefaces，你的答案可能會奏效，但是我使用primefaces擴展工作。所以我不會接受你的答案，但我會讚揚它。 – Ced

看下面.... – Ced

我剛剛注意到，刪除了我的（倉促）評論。歡呼聲：D –

在jsf頁面中使用ckeditor

回答

相關問題