‫۲ سال و ۴ ماه قبل، سه‌شنبه ۲۳ فروردین ۱۴۰۱، ساعت ۱۲:۲۵
Required کردن TinyMCE با اتریبیوت اعتبارسنجی سفارشی
 سمت سرور :
[AttributeUsage(AttributeTargets.Property | AttributeTargets.Parameter)]
public class MakeTinyMceRequiredAttribute : ValidationAttribute, IClientModelValidator
{
    public MakeTinyMceRequiredAttribute()
    {
        ErrorMessage = "لطفا {0} را وارد نمایید";
    }

    protected override ValidationResult IsValid(object value,
        ValidationContext validationContext)
    {
        var displayName = validationContext.DisplayName;
        ErrorMessage = ErrorMessage.Replace("{0}", displayName);

        if (string.IsNullOrWhiteSpace(value?.ToString()))
        {
            return new ValidationResult(ErrorMessage);
        }
        return ValidationResult.Success;
    }

    public void AddValidation(ClientModelValidationContext context)
    {
        var displayName = context.ModelMetadata.ContainerMetadata
            .ModelType.GetProperty(context.ModelMetadata.PropertyName)
            .GetCustomAttributes(typeof(DisplayAttribute), false)
            .Cast<DisplayAttribute>()
            .FirstOrDefault()?.Name;
        ErrorMessage = ErrorMessage.Replace("{0}", displayName);

        MergeAttribute(context.Attributes, "data-val", "true");
        MergeAttribute(context.Attributes, "data-val-makeTinyMceRequired", ErrorMessage);
    }
    public bool MergeAttribute(IDictionary<string, string> attributes, string key, string value)
    {
        if (attributes.ContainsKey(key))
        {
            return false;
        }
        attributes.Add(key, value);
        return true;
    }
}
سمت کلاینت :
if (jQuery.validator) {
    // For hidden inputs
    $.validator.setDefaults({
        ignore: []
    });

    // makeTinyMceRequired
    jQuery.validator.addMethod('makeTinyMceRequired', function (value, element, param) {
        var editorId = $(element).attr('id');
        var editorContent = tinyMCE.get(editorId).getContent();
        $('body').append(`<div id="test-makeTinyMceRequired">${editorContent}</div>`);
        var result = isNullOrWhitespace($('#test-makeTinyMceRequired').text());
        $('#test-makeTinyMceRequired').remove();
        return !result;
    });
    jQuery.validator.unobtrusive.adapters.addBool('makeTinyMceRequired');
}
function isNullOrWhitespace(input) {
    if (typeof input === 'undefined' || input == null)
        return true;
    return input.replace(/\s/g, '').length < 1;
}
نحوه انجام کار :
متنِ ادیتور TinyMCE داخل یک div موقت ریخته میشه بعد text اون div با isNullOrWhitespace بررسی میشه، اگه کاربر مقداری رو وارد کرده باشه اعتبارسنجی پاس میشه در غیر اینصورت متن خطارو نمایش میده.
‫۲ سال و ۹ ماه قبل، سه‌شنبه ۲۵ آبان ۱۴۰۰، ساعت ۱۸:۲۸
نکته تکمیلی
برای استایل دادن به المنت‌های img هنگام استفاده از CSS Isolation به این صورت عمل میکنیم :
<img id="logo" src="~/logo.png" />
/*CSS Isolation*/
::deep #logo {
    width: 100px;
}
چون رشته Random ایجاد شده برای المنت ها، به المنت Img اعمال نمیشود.
<div b-ksdgitrxxw>
    <img id="log" src="~/logo.png" />
</div>
و اگر از deep:: استفاده نکنیم خروجی به این شکل خواهد بود :
#logo[b-ksdgitrxxw] {
    width: 100px;
}
Selector بالا به معنی انتخاب المنتی با آی دی logo و دارای اتریبیوت  [b-ksdgitrxxw] است، اما همانطور که در بالاتر دیدیم هنگام استفاده از CSS Isolation رشته Random برای المنت‌های Img ایجاد نمیشود.