通过Javascript单击按钮时，将文本插入到rich：editor中的光标位置

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>