Question

我使用Javascript在rich:editor的光标位置插入一些文字，但它不起作用。

您可以在此图片中清楚地看到这一点：rich:editor

这是代码：

<ui:define name="body">

    <h:form id="formEmailTemplate" styleClass="edit">
        <rich:simpleTogglePanel label="Email Template" switchType="ajax"
            rendered="true">
            <s:decorate id="subjectLabel" template="layout/edit.xhtml">
                <ui:define name="label">Tên mẫu</ui:define>
                <h:inputText id="subject" value="#{emailTemplateHome.instance.emailTemplateName}"
                    size="50">
                </h:inputText>
            </s:decorate>
            <s:decorate id="buttonCharacter" template="layout/edit.xhtml">
                <ui:define name="label">Chọn trường</ui:define>
                <a:commandButton value="Chức vụ" onclick="change()"></a:commandButton>

            </s:decorate>
            <s:decorate id="contentLabel" template="layout/edit.xhtml">
                <ui:define name="label">Nội dung</ui:define>
                <rich:editor id="editor" width="1000" height="300"
                    value="#{emailTemplateHome.instance.emailTemplateContent}" theme="advanced">
                </rich:editor>
            </s:decorate>
        </rich:simpleTogglePanel>
    </h:form>
    <script type="text/javascript">
        function change()
        {
            //var val = document.getElementsByClassName("subject");
            var val = document.getElementById("#{rich:clientId('editor')}");
            if(val != null){    
                var value = val.getValue();             
                var position = value.slice(0, val.selectionStart).length;
                var result = value.substr(0,position) + "{chuc_vu}" + value.substr(position);
                document.getElementById("#{rich:clientId('editor')}").value = result;
            }
        }
    </script>
</ui:define>

如果我将函数change()与h:inputText一起使用，则可以正常工作。当我在FireFox中使用firebug进行调试时，我无法获得rich:editor中的值。

这行代码将value显示为undefined：

var value = val.getValue();

每当我将文字"{chuc_vu}"更改为"#{chuc_vu}"时，它都是空文本（通过Firebug）。如何在rich:editor中插入文字？

Answer 1

编辑器不仅仅是一个简单的文本区域。要处理这些组件，您应该使用JavaScript API。

document.getElementById("#{rich:clientId('editor')}");

这将选择一个包装div。

要获取编辑器的文本值，您应该使用：

var component = $("#{rich:clientId('editor')}").component,
    value = component.tinyMCE_editor.getContent();

要设置内容，请使用setContent()。请注意，文本中会有标记，即您的ccccccccccccccc将为<p>ccccccccccccccc</p>

通过Javascript单击按钮时，在富：编辑器中将文本插入光标位置

1 个答案: