styleit_core v1.0.3
�� # T e x t E d i t o r - A P I c o n c e p t s S t y l e I t i s a s i m p l e t e x t e d i t o r A P I b u i l t f o r D e v e l o p e r s . < b r / > I t o u t p u t s c l e a n d a t a i n J S O N i n s t e a d o f h e a v y H T M L - m a r k u p f o r e f f i c e n t d a t a s a v i n g . < b r / > M o r e i m p o r t a n t S t y l e I t k n o w s h o w t o u s e A N Y C s s r u l e . 1 . C l e a n d a t a o u t p u t 2 . U s e o f a n y C S S r u l e s 3 . S t y l e w i t h c l a s s e s # # G e t t i n g s t a r t e d # # # I n s t a l l a t i o n 1 . N o d e p a c k a g e 2 . S o u r c e f r o m C D N 3 . L o c a l f i l e f r o m p r o j e c t # # N o d e m o d u l e < h 6 > I n s t a l l t h e p a c k a g e v i a n p m < / h 6 > < u l > < l i > < c o d e > n p m i s t y l e i t - a p i - - s a v e < / c o d e > < / l i > < l i > < p > I n c l u d e t h e m o d u l e i n y o u r a p p l i c a t i o n < / p > < c o d e > i m p o r t { S t y e l I t } f r o m ' s t y l e i t - a p i ' ; < / c o d e > < / l i > < / u l > < b r > < b r > # # N o d e . j s p a c k a g e f o r S S R < c o d e > C o m i n g s o o n ! < / c o d e > < b r > < b r > # # L o a d f r o m C D N < c o d e > c o m i n g s o o n ! < / c o d e > < b r > < b r > # # I n i t i a l i z a t i o n I n o r d e r t o i n i z i a l i z e S t y l e I t , y o u n e e d t o p a s s t h e E l e m e n t O b j e c t o r E l e m e n t I d t o t h e S t y l e I t c o n s t r a c t u r e . N o t e t h a t S t y l e I t w i l l b e a v a i l a b l e o n l y o n t h i s e l e m e n t a n d i t s c h i l d n o d e s . < d i v > < c o d e > i m p o r t { S t y l e I t } f r o m ' s t y l e i t - a p i ' ; < b r > < b r > < s p a n s t y l e = " m a r g i n - t o p : 2 0 p x " > c o n s t s t y l e I t = n e w S t y l e I t ( E l e m e n t O b j e c t o r E l e m e n t I d ) ; < / s p a n > < / c o d e > < b r > < b r > < / d i v > # # S t y l e I t p r o v i d e s t w o w o r k i n g m o d e s < c o d e > i m p o r t { M o d e s } f r o m ' s t y l e i t - a p i ' < / c o d e > < t a b l e s t y l e = " w i d t h : 1 0 0 % " > < t r > < t h > M o d e < / t h > < t h > T y p e < / t h > < t h > D e s c r i p t i o n < / t h > < / t r > < t r > < t d > T o g g l e < / t d > < t d > S t r i n g < / t d > < t d > S t y l e e l e m e n t s w i t h o n / o f f f u n c t i o n a l i t y = > l i k e b o l d , u n d e r l i n e , i t a l i c < / t d > < / t r > < t r > < t d > E x t e n d < / t d > < t d > S t r i n g < / t d > < t d > O n l y e x t e n d s t h e c u r r e c t s t y l e = > f o n t - s i z e , c o l o r , b a c k g o r u n d < / t d > < / t r > < / t a b l e > < d i v > N o t e t h a t t h e E x t e n d m o d w i l l n o t c a n c e l t h e s t y l e w h e n s e l e c t i n g t h e s a m e r u l e t w i c e . < / d i v > < b r > < b r > # # H o w t o u s e < p > M o d e s . T o g g l e < / p > < c o d e > s t y l e I t . e x e c C m d ( ' t e x t - d e c o r a t i o n ' , ' u n d e r l i n e ' , M o d e s . T o g g l e ) ; < b r > < b r > s t y l e I t . e x e c C m d ( ' f o n t - w e i g h t ' , ' b o l d ' , M o d e s . T o g g l e ) ; < / c o d e > < b r > < b r > < p > M o d e s . E x t e n d < / p > < c o d e > s t y l e I t . e x e c C m d ( ' c o l o r ' , c o l o r , M o d e s . E x t e n d ) ; < b r > < b r > s t y l e I t . e x e c C m d ( ' f o n t - s i z e ' , s i z e , M o d e s . E x t e n d ) ; < / c o d e > < b r > < b r > # # C s s C l a s s A P I T h e C s s C l a s s A P I l e t s y o u c r e a t e a C s s c l a s s w i t h y o u r p r e - m a d e r u l e s . Y o u c a n p a s s t h i s c l a s s t o a S t y l e I t o b j e c t a n d u s e i t a s a m a r k u p j u s t l i k e u n d e r l i n e o r b o l d . # # # H o w t o u s e < c o d e > s t y l e I t . T o g g l e C l a s s ( " c l a s s - n a m e " ) < / c o d e > # # A P I T o o l s < t a b l e s t y l e = " w i d t h : 1 0 0 % " > < t r > < t h > T o o l < / t h > < t h > C o n f i g u r a t i o n < / t h > < t h > D e s c r i p t i o n < / t h > < / t r > < t r > < t d > U n d o R e d o < / t d > < t d > N o n e < / t d > < t d > C o m i n g s o o n ! < / t d > < / t r > < t r > < t d > C o p y P a s t e < / t d > < t d > N o n e < / t d > < t d > C o p i e s t h e t e x t w i t h i t ' s s t y l e . ( W o r k s o n l y w h e n u s i n g C o p y / P a s t e i n s i d e a S t y l e I t H o l d e r ) < / t d > < / t r > < t r > < t d > C a r e t < / t d > < t d > . . . < / t d > < t d > C o m i n g s o o n ! < / t d > < / t r > < t r > < t d > T e x t s e l e c t i o n < / t d > < t d > . . . < / t d > < t d > C o m i n g s o o n ! < / t d > < / t r > < t r > < t d > I n s p e c t o r < / t d > < t d > c o n s t c o n f i g = { < b r / > o n I n s p e c t : ( s t y l e s ) = > { < b r / > / / t h e s t y l e s o n t h e e l e m e n t . . < b r / > } , < b r / > c o n s t s t y l e I t = n e w S t y l e I t ( E l e m e n t O b j e c t o r E l e m e n t I d , c o n f i g ) ; } < / t d > < t d > T h e i n s p e c t o r w i l l t r i g g e r y o u r f u n c t i o n o n e v e r y s t y l e c h a n g e w i t h t h e s t y l e i n a k e y - v a l u e f o r m a t . < / t d > < / t r > < / t a b l e > < b r > < b r > # # # O n L o a d F u n c t i o n # # # # # # T e l l s S t y l e I t t o r e r e n d e r t h e h t m l i n s i d e t h e h o l d e r e l e m e n t w i t h o u t d e l e t i n g a n y d a t a . # # # # # # I t w i l l r e o m o v e a l l i n v a l i d t a g s a n d c h a r s . # # # S a v e F u n c t i o n # # # # # # s t y l e I t . S a v e ( ) ; # # # # # # W i l l c r e a t e a c l e a n J S O N f r o m y o u r c o n t e n t . N o t e t h a t t h i s f u n c t i o n w i l l a l s o f i l t e r e v e r y i n v a l i d t a g s a n d c h a r s . # # # L o a d # # # # # # s t y l e I t . L o a d ( s a v e d J s o n ) ; # # # # # # W i l l c r e a t e a h t m l m a r k u p f r o m y o u r J O S N c o n t e n t a n d w i l l a p p e n d i t i n t o t h e e n d o f t h e e d i t o r . N o t e t h a t t h i s f u n c t i o n w i l l a l s o f i l t e r e v e r y i n v a l i d t a g s a n d c h a r s . a n d w i l l i n j e c t i t i n t o t h e c o n t a i n e r . # # # # # # L o a d c a n u s e o n l y j s o n D a t a f r o m t h e S a v e m e t h o d . # # # D e s t r o y # # # # # # s t y l e I t . D e s t r o y ( ) ; # # # # # # W i l l r e m o v e a l l S t y l e I t f u n c t i o n a l i t y . # # # K n o w n I s s u e s 1 . o n m e r g e e l e m e n t s , u n d e r l i n e w i t h c o l o r w i l l l o o s e t h e c o l o r a n d t u r n t o b l a c k . 2 . S t y l e t a g , s u c h a s < b > , n o t v a l i d , o n l y s p a n s .
5 years ago