如何创建输入:编辑器中作为ckeditor?

问题描述

我正在尝试用liferay:ui输入编辑器替换aui:input字段。有人可以解释我如何正确执行此操作吗?

我正在使用liferay 6.2。

我设法通过以下代码使其工作:

<aui:field-wrapper label="name" required="true">
            <aui:input name="name" type="hidden">
                <aui:validator name="required" />
            </aui:input>

            <liferay-ui:input-editor name="nameEditor" initMethod="initEditor" onChangeMethod="copyTextToField" editorImpl="<%= EDITOR_WYSIWYG_IMPL_KEY %>" contentsLanguageId="<%= defaultLanguageId %>" toolbarSet="liferay" />

            <aui:script>
                function <portlet:namespace/>initEditor(){
                    console.log("DETAILS");
                    if (<portlet:namespace />name){
                        return <portlet:namespace />name.value;
                    }
                    return "";
                }
                
                function <portlet:namespace />getContent() {
                    var dom = document.createElement("DIV");
                    dom.innerHTML = window.<portlet:namespace />nameEditor.getHTML();

                    return (dom.textContent || dom.innerText);
                }

                function <portlet:namespace />copyTextToField(){
                    console.log("copIoU!");
                    <portlet:namespace />name.value = <portlet:namespace />getContent();
                }
            </aui:script>

        </aui:field-wrapper>

是否有更好的方法?另外,我无法使其在对话框中工作(被禁用)

感谢您的帮助。

解决方法

一切都很好。尽管您不需要为隐藏的输入字段提供验证标签,但它不会为隐藏的字段进行验证。保持如下所示

<aui:field-wrapper label="content">
    <liferay-ui:input-editor editorImpl="<%= EDITOR_WYSIWYG_IMPL_KEY %>" />
    <aui:input name="content" type="hidden" />
</aui:field-wrapper>
<aui:script>
    function <portlet:namespace />getContent() {
        return window.<portlet:namespace />editor.getHTML();
    }

    function <portlet:namespace />initEditor() {
        return "<%= UnicodeFormatter.toString(content) %>";
    }
    function <portlet:namespace />copyTextToField() {
        document.<portlet:namespace />fm.<portlet:namespace />content.value = <portlet:namespace />getContent();
    }
</aui:script>

此外,您不需要单独的div即可直接从编辑器放置dom内容,您可以将值分配给隐藏字段。

是模式弹出窗口还是iframe弹出窗口? 如果是iframe CKEditor为我工作。检查弹出窗口中是否有任何脚本