在jsf页面中使用ckeditor

Question

如何在jsf页面中使用自定义CKEditor？我在努力实现它时遇到了很多困难。我所做的：

• 我用CKEditor做了一个定制的ckEditor构建器
• 下载并放在我的网页内容文件夹中。

test.xhtml页面：

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

        <script>

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

不工作，只是有一个标准的文本区域。所以我把src改为：

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

这是可行的，但这不是我的定制CKEditor构建，这是一个香草的。

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

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

文本区域就消失了。我的文字区域就消失了。它会找到脚本，因为如果我放错了脚本名，我的textarea就会被备份。

所以我删除了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>

在xhtml中是这样的：

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

但是结果是标准的html文本框再次出现。我该怎么用呢？

Answer 1

我转到了原面扩张。

这些是所需的依赖项(我忘记了第二个依赖项，这就是它不能工作的原因)：

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

和下面是一个逐步解释的链接。

如果您没有使用primefaces，您可以按照work的注释操作它。

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>

我希望这能帮你找到正确的方向。