عنوان:

‫کتابخانه tinymce


نویسنده: الوند
تاریخ: ۱۳۹۴/۰۵/۰۴ ۱۸:۵۲
آدرس: www.dntips.ir
 TinyMCE is a platform independent web based Javascript HTML WYSIWYG editor control released as Open Source under LGPL. 


مشاهده مطلب اصلی

نظرات

  • شریعتی پیام در ۱۴۰۱/۰۱/۲۳ ۷:۵۵
    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 بررسی میشه، اگه کاربر مقداری رو وارد کرده باشه اعتبارسنجی پاس میشه در غیر اینصورت متن خطارو نمایش میده.