Latest version | 5.58.3-fvtt5 |
---|---|
Minimum Core | 6 |
Compatible Core | 11 |
Last updated | 2 years ago |
Created | 3 years ago |
Authors |
|
Languages |
English Español Français |
Systems | All systems |
Project source | Project URL |
This package includes the CodeMirror editor library. A lightweight editor that can be used as a drop-in replacement for a textarea. The editor can be configured with text highlighting for various languages.
This module also provides a small number of user configurable settings you can use when creating an editor instance to allow a degree of customization.
Using the CM library as a dependency is very simple, this module already includes the following language modes:
javascript, css, xml, html, handlebars, markdown, toml, vue
Simply declare this module as a dependency by including the following in your manifest:
"dependencies": [
{
"name": "_CodeMirror",
"type": "module",
"manifest": "https://raw.githubusercontent.com/League-of-Foundry-Developers/codemirror-lib/master/module.json"
}
]
You can now create an instance of CM in any way outlined in the CM documnetation. The simplest method is to "upgrade" a textarea
into a CM instance, by passing a reference to the textarea
element to the fromTextArea
method.
const editor = CodeMirror.fromTextArea(html.find("textarea")[0], {
mode: "javascript", // A mode like "javascript" or "css"
...CodeMirror.userSettings, // A special helper described later
lineNumbers: true, // CM has a number of settings you can configure
inputStyle: "contenteditable",
autofocus: true
});
This upgrades the textarea
into a proper text editor.
CodeMirror "saves" the editor data back to the original textarea
, however sometimes you need to explicitly tell it to save, such as immediately before submitting a form. This can be done by using the save()
method on a CodeMirror instance. With the exampe above:
editor.save();
This will ensure that the textarea has the same content as the editor. It's good to call this at some point before you parse the data of the form, allowing you to retrieve the data from the textarea
as normal.
Another option is to save on every change, by attaching an event handler to the CM object:
CodeMirror.fromTextArea(textarea, {
// options
}).on("change", (instance) => instance.save());
This may be less efficient for large inputs.
This special getter has been added to the CodeMirror object, it returns an object of settings retrieved from Foundry's module settings. This includes a few editor configurations like tab type and size, or word wrap. These settings can be passed along with other options when creating an instance of a CodeMirror editor. The simplest method is to use the ... spread operator to insert the key/value pairs of this object directly into the options:
CodeMirror.fromTextArea(textarea, {
mode: "css",
...CodeMirror.userSettings,
lineNumbers: true, // etc.
})
This allows the user to configer editor preferences globally, while giving you a simple way to include those settings in your instance of the editor.
To install this package, open your Foundry Setup screen and navigate to your Module tab and click the Install Module button.
From there, you can either search for the package unique name: _CodeMirror or copy its manifest URL:
And paste it to the input box at the bottom of your window.
You can install this package directly to your Forge account.
Necessary cookies are absolutely essential for the website to function properly. This category only includes cookies that ensures basic functionalities and security features of the website. These cookies do not store any personal information.
Functional cookies help to perform certain functionalities like sharing the content of the website on social media platforms, collect feedbacks, and other third-party features.
Analytical cookies are used to understand how visitors interact with the website. These cookies help provide information on metrics the number of visitors, bounce rate, traffic source, etc.
Performance cookies are used to understand and analyze the key performance indexes of the website which helps in delivering a better user experience for the visitors.
Advertisement cookies are used to deliver visitors with customized advertisements based on the pages they visited before and analyze the effectiveness of the ad campaign.