在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

回答

相关问题