在jsf页面中使用ckeditor

如何在jsf页面中使用自定义编辑器？我在尝试实现它时遇到了很多困难。我所做的：

• 我用
• 下载并放置在我的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>

CKEDITOR.replace（'editor1'）；

没有工作，只是有一个标准的文本区。因此，我将src更改为：

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

这是工作，但它不是我的自定义编辑器构建它是香草的一个

所以我使用了h:OutputScript标记。（我在同一个项目中有2个ckEditor文件夹，以便在测试时访问）：

文本区域消失了。我的文本区消失了。它会找到脚本，因为如果我输入了错误的脚本名称，我的文本区域就会备份

所以我删除了CKeditor文件夹。。。在那里，魔法发生了：当使用这个时，它仍然有效：

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

我的项目中没有ckeditor.js文件，但脚本仍在运行

然后我在pom.xml中尝试了primefaces扩展：

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

org.primefaces.extensions
素数面扩展
3.1.0

在xhtml中：

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

---

但结果又是标准的html文本区域框。如何使用它？

我在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/';
....

                ....
                <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>

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/';
....

                ....
                <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>

。。。。
/*   */

我希望这能给你一些正确方向的帮助

我切换到了

这些是所需的依赖项（我忘记了第二个，这就是它无法工作的原因）：

及

---

如果您不使用primefaces，您可以按照w vd L的评论操作，谢谢您的回答。我使用的是primefaces，您的答案可能会有用，但是我使用primefaces扩展使其有效。所以我不会接受你的答案，但我会投赞成票。再见，泰蒂。

<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>

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