Question

正如标题中所述，我正在使用FCK进行自定义验证（因为RequiredFieldValidator不适用于FCKEditor）。验证失败时，会显示标注，但它不会显示在正确的位置。

生成的style代码：visibility: visible; position: absolute; left: 0px; top: 646px; z-index: 1000;

left不是0px。（top也不是很正确，但现在已足够接近了）

这是我的标记：

<FCKeditorV2:FCKeditor ID="FCKeditorBody" runat="server" Width="600" Height="150" ToolbarSet="Basic"></FCKeditorV2:FCKeditor>
<asp:CustomValidator runat="server" ID="cvBody" ControlToValidate="FCKeditorBody" SetFocusOnError="true" 
    ErrorMessage="Please enter a body." ClientValidationFunction="ValidateBody" ValidateEmptyText="true" 
    ValidationGroup="ValgrpPost" Display="None" />
<asp:ValidatorCalloutExtender runat="Server" ID="ValidatorCalloutExtender7" BehaviorID="vceBID" TargetControlID="cvBody"
        HighlightCssClass="ValidatorCalloutHighlightCSS" CssClass="RecipeCalloutCSS" PopupPosition="TopLeft" />

<script type="Text/javascript">
    function ValidateBody(source, args) {
        var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
        args.IsValid = fckBody.GetXHTML(true) != "";
    }
</script>

Answer 1

确保在FCKeditor和验证器周围放置一个位置为relative的元素，然后它将显示在FCKeditor的左上角。

<div style="position:relative">
    <FCKeditorV2:FCKeditor ... />
    <asp:CustomValidator ... />
    <asp:ValidatorCalloutExtender ... />

    <script type="text/javascript">
        function ValidateBody(source, args) {
            var fckBody = FCKeditorAPI.GetInstance('<%=FCKeditorBody.ClientID %>');
            args.IsValid = fckBody.GetXHTML(true) != "";
        }
    </script>
</div>

现在，消息将覆盖工具栏并阻止按钮，直到您按下“x”。应该在消息中添加backgroundcolor以使其更好地显示。

如果你想在编辑器的textarea中显示它，那么PopupPosition="BottomRight"可能更好。或者你可以使用！important规则否决生成的css。

 .RecipeCalloutCSS{ left:0!important; top:65px!important; }

使用带有FCKEditor的验证器标注扩展器不会设置“左”样式

1 个答案: