通過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>