Let's make it better
StyleIt.js is a library that allows you to easily add styles to your text.
Before i was created StyleIt, I tried a lot of the other rich text libraries out there, and i had very bad hacky things to get the user experience exacly like i want.
Anyway the open source library is a work in progress,
so if you have any suggestions or issues,
please let me know! Here is the new version of the library:
https://github.com/adi-L/styleit2
Text Editor API concepts
Installation
Node package
Source from CDN(Coming Soon)
Local file from project
Node module
Install the package via npm
npm i styleit-api --save
Include the module in your application
import StyleIt from 'styleit-api';
Load from CDN
coming soon!
Initialization
In order to inizialize StyleIt, you need to pass the Element Object or Element Id to the StyleIt constracture. Note that StyleIt will be available only on this element and its child nodes.
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
StyleIt provides two working modes
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const MODES = styleIt.MODES;
| Mode | Type | Description |
|---|---|---|
| Toggle | String | Style elements with on/off functionality => like bold,underline,italic |
| Extend | String | Only extends the currect style => font-size, color, backgorund |
How to use
Modes.Toggle
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const MODES = styleIt.MODES;
const underline =()=> styleIt.execCmd('text-decoration', 'underline', Modes.Toggle);
const bold =()=> styleIt.execCmd('font-weight', 'bold', MODES.Toggle);
Modes.Extend
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const MODES = styleIt.MODES;
const changeColor =(color)=> styleIt.execCmd('color', color, MODES.Extend);
const changeSize =(size)=> styleIt.execCmd('font-size', size, MODES.Extend);
With Options
The textAlign, padding, margin, line-height and more property sets the horizontal alignment of text in a block level element. It must be used on a block level element (p, div, etc.)
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const MODES = styleIt.MODES;
const changeAlign =(align)=> styleIt.execCmd('text-align', align, MODES.Extend,{
target:'block'
});
Result:
<p style="text-align='center'"><span >
only blocks like P will be effected
</span>
</p>
Block As inline
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const MODES = styleIt.MODES;
const changeAlign =(align)=> styleIt.execCmd('font-weight', 'bold', MODES.Extend,{
target:'block',
as:'inline'
});
Result:
<p><span style="font-weight='bold'">
all the text inside the p tag will be effected
</span>
</p>
| Tool | Configuration | Description |
|---|---|---|
| Target | {target:'block'} | Will apply on the closest block element. |
| as | {as:'inline'} | Will apply as inline inside the block element, block option required. |
| unWrap | {unWrap:["b","strong"]} | Will unwrap as the selectors ref: querySelector |
Style with Tags (toggle mode)
| Tag Name |
|---|
| B |
| STRONG |
| MARK |
| EM |
| I |
| S |
| STRIKE |
| DEL |
| U |
| SUB |
| SUP |
| SUB |
| SMALL |
How to use
import StyleIt from 'styleit-api';
const styleIt = new StyleIt("editor-id");
styleIt.toggleWith("strong");
Css Class API
The Css Class API lets you create a Css class with your pre-made rules. You can pass this class to a StyleIt object and use it as a markup just like underline or bold.
How to use
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const toggleClass = (name)=> styleIt.toggleClass(name);
Result:
<p><span class="example">
the className will be wrapped the selected texts
</span>
</p>
Links
import StyleIt from 'styleit-api';
const styleIt = new StyleIt(*Element Object or Element Id*);
const createLink =()=> styleIt.link({
href:'styleIt.com',
protocol:'https'
target:'_blank'
});
Result:
<p><a src="https://styleit.com" target="_blank">
the selected texts will be wrapped with a tag
</a>
</p>
| Protocols | target |
|---|---|
| mailto | _blank |
| tel | _self |
| http | _top |
| https | _parent |
API Tools
| Tool | Configuration | Description |
|---|---|---|
| Undo Redo | Coming soon! | |
| Links using A tag |
styleIt.link({
href:"styleit.com",
protocol:"mailto",
target:'_blank'
});
StyleIt.unLink(); |
|
| Keyboard | ||
| Copy Paste | None | |
| Inspector |
const styleIt = new StyleIt(*Element Object or Element Id*,config);
styleIt.on("inspect",(collectedStyles) => { // do something with the styles.. }) } |
The inspector will trigger your function on every style change with the style in a key-value format. |
Inspector
const styleIt = new StyleIt(*Element Object or Element Id*,config);
styleIt.on("inspect",(collectedStyles) => {
// do something with the styles..
})
}
Result:
{color:"red",
text-align:"center",
font-weight:"700"
}
Inspect Link
const styleIt = new StyleIt(*Element Object or Element Id*,config);
styleIt.on("inspectLink",(link) => {
// {href,protocl,target,element}
})
}
Save Function
const styleIt = new StyleIt(*Element Object or Element Id*,config);
const savedContent = styleIt.save();
Will create a clean JSON from your content. and chars.
Load Function
const styleIt = new StyleIt(*Element Object or Element Id*,config);
styleIt.load(savedJson);
Will create a html markup from your JOSN content and will append it into the end of the editor.
and will inject it into the container.
Load can use only json Data from the Save method.
Destroy
Will remove all StyleIt functionality.
const styleIt = new StyleIt(*Element Object or Element Id*,config);
styleIt.destroy();