在jsf页面中使用ckeditor

Question

如何在 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>

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

<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 文件，但脚本仍在运行。

然后我在 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 textarea 框。我该如何使用它？

Answer 1

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

我希望这能帮助你朝着正确的方向前进

Answer 2

我切换到 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

的评论使其工作

在jsf页面中使用ckeditor

Using ckeditor in jsf page

jsf

ckeditor

primefaces

primefaces-extensions