Text editor written in Javascript. Displays only visible parts of viewed document which makes page lighter and quicker (doesn't render not visible lines). Uses its own script for simulating user interaction instead of deprecated contenteditable
. Supports creating syntax highlights if used as code editor. More in HOWTOSYNTAX.md
.
Create instance:
new TabJF(document.getElementById('someEditorID'));
and done! This should replace given node with editor.
After you have create your instance of editor:
const editor = new TabJF(someEditorNode);
You can use this variable (editor
) to, for example, get editors content by accessing editor.render.content
. Or if you would like to replace contents of the editor with saved previously state you can use editor.truck.import()
method:
/**
* Populates editor.
* Requires data transformed into readable, by editor, array. Look into truck.export or truck.exportText how to create it.
* @param {Object[] } importAr Render content type array
* @param {Boolean } [limit=false ] How many lines we want to import
* @param {Number } [offset=0 ] From which line we should start importing
* @param {Boolean } [clear=true ] Remove content from editor?
* @param {Boolean } [reverse=false ] Import lines in reverse order
* @param {Node|null} [container=null ] Container to which import lines (default editor)
* @param {Boolean } [replaceContent=true] Replace render.content with passed array in importAr
*/
import (
importAr,
limit = false,
offset = 0,
clear = true,
reverse = false,
container = null,
replaceContent = true
)
Every method is described like this and separated into modules so you can easily use them like documentation. All available module are located in /module/
folder.
If you have added some stylization to your editor (for example, you have line numbers added) which requires padding the editor, you can specify it by passing amount of pagination (script only cares for left pagination):
new TabJF(editor, { left : 35 });
For now line height is static (default is 20) and can be changed by passing it to the instance:
new TabJF(editor, { left : 35, line : 20 });
Editor requires some CSS to work properly. Its added automatically when first instance is created and added at the top of head for easier overwriting. Full list of used style can be found in /schema/styles.js
.
If you would like to customize this editor you can use this classes:
.tabjf_editor-con
- editors container.tabjf_editor-con .tabjf_editor
- editor.tabjf_editor-con .tabjf_editor .caret
- cusros- And few variables that must be used for editor to work properly:
--min-height
- minial height of editor--paddingTop
- editors padding top--counter-current
- the line counter (optional, if you want to display line numbers)--scroll-width
- scroll width, the maximum of Y axis scroll
And I mean used - not defined, you have to include them in your classes. For example:
.tabjf_editor-con .tabjf_editor {
min-height : calc( (var(--min-height, 0) - var(--paddingTop, 0)) * 1px);
counter-set : editor-line var(--counter-current, 0); /* OPTIONAL */
padding-top : calc( var(--paddingTop, 0) * 1px );
width : calc(var(--scroll-width, 100%) * 1px + 5px );
}
Remember to try not overwrite those rules as this might break editor behavior.
Editor has a feature for syntax highlighting. Right now it has config file for CSS - you can use it as a reference. To add your own syntax configuration pass it in schema
:
import cssDefaultStyles from `/schema/rules/css.js`; // Actual path for the example configuration configuration
import jsConfig from './path/to/config.js'; // Your custom path to the file
const defaultCss = new TabJF(editor , { left : 35, line : 20, schema : cssDefaultStyles });
const customEditor = new TabJF(editor2, { left : 35, line : 20, schema : jsConfig });
More on syntax in HOWTOSYNTAX.md
.
Editor offers handful of events which can be stopped with stopDefault()
and replaced with your own functionality:
Each event
returns additional information in detail
attribute:
tabJFCopy
- Fired before part of editor was copied. Details:pos
- current position of caretinstance
- the instance of the editorevent
- nullclipboard
- pasted part. It will be an normal object, not a list of nodes
tabJFPaste
- Fired before something was pasted into editor. Details:pos
- current position of caretinstance
- the instance of the editorevent
- nullclipboard
- copied part. It will be an normal object, not a list of nodes
tabJFCut
- Fired before something was cut from editor. Details:pos
- current position of caretinstance
- the instance of the editorevent
- nullclipboard
- cut part. It will be an normal object, not a list of nodes
tabJFUndo
- Fired before editor reformed into its previous version (ctrl + z). Details:pos
- current position of caretinstance
- the instance of the editorevent
- nullversionNumber
- version to which editor will be transformed tooversion
- actual object holding new versionversionNumberBefore
- current versionversionBefore
- object holding instructions for current version (could beundefined
)
tabJFRedo
- Fired before editor is changed to the future version (ctrl + y). Details:pos
- current position of caretinstance
- the instance of the editorevent
- nullversionNumber
- version to which editor will be transformed tooversion
- actual object holding new versionversionNumberBefore
- current versionversionBefore
- object holding instructions for current version (could beundefined
)
tabJFSelectAll
- Fired before editor is fully selected (ctrl + a). Details:pos
- current position of caretinstance
- the instance of the editorevent
- null
tabJFSelectStop
- Fired before user stopped selecting nodes with his mouse. Details:pos
- current position of caretinstance
- the instance of the editorevent
- Mouse Up eventselection
- selected part of editors content
tabJFActivate
- Fired before editor is clicked and activated. Details:pos
- current position of caretinstance
- the instance of the editorevent
- Click event
tabJFDeactivate
- Fired before deactivating editor. Details:pos
- current position of caretinstance
- the instance of the editorevent
- Focus Out event
tabJFKeyDown
- Fired before resolving key down action. Details:pos
- current position of caretinstance
- the instance of the editorevent
- Key Down event
tabJFKeyUp
- Fired before resolving key up action. Details:instance
- the instance of the editorpos
- current position of caretevent
- Key Up event
tabJFMove
- Fired before caret will be moved. Details:pos
- current position of caretinstance
- the instance of the editorevent
- Key Down eventselection
- currently selected editors contentx
- direction where cursor will go on X axisy
- direction where cursor will go on Y axis
Example:
const tabJFEditor = new TabJF(editor, { left : 35, line : 20 });
editor.addEventListener("tabJFDeactivate", e => {
// The variable `underlineButton` is an example of a button
// which applies underline to the selected nodes.
const underlineButton = document.getElementById('underline');
// Here we are stopping editor deactivation when underline button was pressed.
// The `e` contains attribute `detail` which have the real focusOut event in `event`
if (e.detail.event.target == underlineButton) {
e.preventDefault();
}
})
- server driven rendering (for viewing GB file without having to full files to the client)
- Y Rendering (for files which are made of one big line ( any min.js for example))
- [OPTIONAL] rich editor (bold/italic/underline) (class/inline CSS) (might be done by context menu)