Exsied: Extremely simple editor. The pronunciation is /ɪkˈsiːd/
, the same as exceed.
Exied is the main editor of Fivim. Fivim is your encryption assistant that supports multiple file types ( including markdown, source code, PDF, images, etc. ), supports file encryption and synchronization.
Exied provides a variety of plugins that are basically ready to use out of the box, but there are a few plugins that need to be configured with callback functions to achieve a better user experience, such as sourceCode , redoAndUndo ,fontSize ,fontFamily .
Our official repositories are Github repo and Gitee repo.
- No complex concepts, exsied is written entirely in native JavaScript events binding.
- No dependencies.
- Easy to configure / custom / develop.
- All functions are based on plugins.
- Support for multiple instances
Based on Zen of Python
Standardization is better than customization.
Beautiful is better than ugly.
Explicit is better than implicit.
Simple is better than complex.
Complex is better than complicated.
Exited uses a dual license.
You may conditionally use exsed under the MIT License, and if you do not meet the conditions, authorization is required
Existing license:
-
Cryptocurrency:
- XMR: 46df6rwnqcUCFaSummLobcH3J9sWgqYASF8Znq5HnhgrLeASh8u4TPJ2LaLnoQk3uV6t18CgNuFVCDfLUR9G94AZUj1TtGr
- SOL: BbrRkLArfTeAieAtDpvBHNE4KBKX9fmbjPb5JDmKHWE7
- ETH: 0xA59186a08424BE262FBacA922E87Ab82F3C5245B
npm install @exsied/exsied
# or
yarn add @exsied/exsied
# or
pnpm i @exsied/exsied
import { exsied, plugins } from '@exsied/exsied'
import '@exsied/exsied/style.css'
or
<script type="module">
import { exsied, plugins } from 'https://cdn.jsdelivr.net/npm/@exsied/exsied@0.11.0/dist/index.js'
</script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@exsied/exsied@0.11.0/dist/style.css" />
When running exsied in the browser, please refer to test_dist/index_esm.html
.
import { exsied, plugins } from '@exsied/exsied'
exsied.init({
id: 'app',
plugins: [
plugins.bold,
plugins.italic,
plugins.underline,
plugins.strikethrough, // ...
],
enableToolbarBubble: true,
locale: 'en',
})
exsied.setHtml('some HTML code')
Currently, exsied only supports English(en), French(fr), German(de), Russian(ru), Spanish(es), Simplified Chinese(zh-Hans), and Traditional Chinese(zh-Hant).
You can add a locale
parameter in exsied.init
to set a default locale, or use the following functions to set a new locale.
Notice: Changing the locale after exsied.init
will require reinitializing exsied . Developers should backup the content first.
exsied.i18n.setLocale('en')
Search t('
in your IDE.
exsied.i18n.setDict('zh-CN', {
Title: '标题',
Alternative: '别名',
Styles: '样式',
Width: '宽度',
Height: '高度',
})
exsied.i18n.setLocale('zh-CN')
Add class="dark"
to body.
You can add some style, like:
::-webkit-scrollbar {
width: 5px;
height: 5px;
}
::-webkit-scrollbar-thumb {
-webkit-border-radius: 5px;
background-color: var(--exd-border-color);
}
::-webkit-scrollbar-corner {
display: none;
}
We provide many built-in plugins, most of which are easy to use. Below are a few special plugins.
You can set the config
of a plugin to change some values. Take a look at the about plugin.
All plugins have some toolbar conf, like:
- addToNormalToolbar: add the button(s) and / or select(s) to normal toolbar
- addToNormalToolbarInsertMenu: add the button(s) and / or select(s) to normal toolbar's insert menu
- addToBubbleToolbar: add the button(s) and / or select(s) to bubble toolbar
If the plugin only has one button or select, these three field is boolean type, otherwise they are object type.
For example, in plugin image, like:
export type PluginConf = {
addToNormalToolbar: boolean
addToNormalToolbarInsertMenu: boolean
addToBubbleToolbar: boolean
defaultAlt: string
defaultSrc: string
}
and in plugin lists, like:
export type PluginConf = {
addToNormalToolbar: {
ol: boolean
ul: boolean
}
addToNormalToolbarInsertMenu: {
ol: boolean
ul: boolean
}
addToBubbleToolbar: {
ol: boolean
ul: boolean
}
defaultInnerHTML: string
}
The about plugin is automatically loaded by default. There is no need to add it to the plugins
parameter of the existing.init
function.
If you have the authorization and want disable the about plugin:
exsied.init({
id: 'app',
plugins: [],
enableToolbarBubble: true,
})
If you have customized any functions, you should add your own information to about.conf.deveploers
.
import { exsied, plugins } from '@exsied/exsied'
plugins.about.conf.deveploers.push(
{
name: 'fivim github',
repoLink: 'https://github.com/fivim/fivim',
webSiteLink: 'https://xxx.com/xxx',
email: 'xxx@xxx.xxx',
extContent: `Fivim's github repo`,
},
{
name: 'fivim gitee',
repoLink: 'https://gitee.com/fivim/fivim',
webSiteLink: 'https://xxx.com/xxx',
email: 'xxx@xxx.xxx',
extContent: `Fivim's gitee repo`,
},
)
It will process the <pre><code>
tags.
Due to the fact that exsied does not have any dependencies, so it cannot highlight or edit code, developers should overwrite the functions in sourceCode.conf
:
- renderDataCb: Used to highlight code, highlight.js is recommended
- editDataCb: Used to edit code, codemirror is recommended. After editing, use const ele = document.querySelector(
[${dataAttr.sign}="${sign}"]
) to find the original code element, and update it. - randomCharsCb: Used to generate random chars.
- aferInitSourceCodeViewCb: call it afer init source code view, you can add highlight functions here.
- inputInSourceCodeViewCb: call it when user input in source code view, you can add highlight functions here.
import { exsied, plugins } from '@exsied/exsied'
import { PluginConf } from '@exsied/exsied/dist/plugins/source_code/base'
import hljs from 'highlight.js'
import c from 'highlight.js/lib/languages/c'
import cpp from 'highlight.js/lib/languages/cpp'
import { v4 as uuidv4 } from 'uuid'
// Register some languages
hljs.registerLanguage('c', c)
hljs.registerLanguage('cpp', cpp)
export function highlighCode(str: string, lang: string){
if (lang in hljsLangMap) {
return hljs.highlight(str, { language: lang }).value
}
return str
}
const sourceCodeConf = plugins.sourceCode.conf as PluginConf
sourceCodeConf.renderDataCb = (ele: HTMLElement) => {
const lang = ele.getAttribute('lang') || ''
const res = highlighCode(ele.innerHTML, lang)
return `<pre><code>${res}</code></pre>`
}
sourceCodeConf.editDataCb = (ele: HTMLElement, sign: string) => {
// do something
}
// replace the default randomChars with uuid
sourceCodeConf.randomCharsCb = () => {
return uuidv4()
}
You can provied two callback in redoAndUndo.conf
to compress and uncompress the content:
- compressCb: (str: string) => any
- uncompressCb: (value: any) => string
You can provied a callback in redoAndUndo.conf
:
- clickLinkCb: handle click event of tag
a
- btn: button
- cn: class_name
- ctrl: controller
- ele: element
- plg: plugin
- tn: tag_name
- custom block
- Paste