Rich Text Editor (WYSIWYG) Écrit en svelte, en utilisant l'interface utilisateur sans tête et le framework CSS de TailwindCSS.
Construit au-dessus de TipTap Editor (éditeur sans tête) et PROSMIRROR. Facile à utiliser, à développer et à maintenir. Un moteur rapide qui aide à s'intégrer à n'importe quelle API d'IA et à améliorer l'expérience d'écriture.
Le thème sombre / léger est pris en charge et personnalisable.
//npm
npm install @nextlint/svelte
//yarn
yarn add @nextlint/svelte
//pnmp
npm add @nextlint/svelteL'éditeur NEXLTInt utilise des composants Svelte sans tête de Meltui et le stylise avec TailwindCSS. Les jetons à thème sont hérités de Svelte Shadcn.
Si vous avez déjà la configuration de Shadcn dans votre projet, vous pouvez ignorer cette pièce.
pnpm add -D tailwindcss postcss autoprefixer sass
npx tailwindcss init -p Maintenant tailwind.config.js et postcss.config.js sont créés
// more detail at https://www.shadcn-svelte.com/docs/installation/manual
/** @type {import('tailwindcss').Config} */
module . exports = {
content : [
'./src/**/*.{svelte,js}' ,
'./node_modules/@nextlint/svelte/dist/**/*.{svelte,ts}'
] ,
theme : {
extend : {
colors : {
border : 'hsl(var(--border) / <alpha-value>)' ,
input : 'hsl(var(--input) / <alpha-value>)' ,
ring : 'hsl(var(--ring) / <alpha-value>)' ,
background : 'hsl(var(--background) / <alpha-value>)' ,
foreground : 'hsl(var(--foreground) / <alpha-value>)' ,
primary : {
DEFAULT : 'hsl(var(--primary) / <alpha-value>)' ,
foreground : 'hsl(var(--primary-foreground) / <alpha-value>)'
} ,
secondary : {
DEFAULT : 'hsl(var(--secondary) / <alpha-value>)' ,
foreground : 'hsl(var(--secondary-foreground) / <alpha-value>)'
} ,
destructive : {
DEFAULT : 'hsl(var(--destructive) / <alpha-value>)' ,
foreground : 'hsl(var(--destructive-foreground) / <alpha-value>)'
} ,
muted : {
DEFAULT : 'hsl(var(--muted) / <alpha-value>)' ,
foreground : 'hsl(var(--muted-foreground) / <alpha-value>)'
} ,
accent : {
DEFAULT : 'hsl(var(--accent) / <alpha-value>)' ,
foreground : 'hsl(var(--accent-foreground) / <alpha-value>)'
} ,
popover : {
DEFAULT : 'hsl(var(--popover) / <alpha-value>)' ,
foreground : 'hsl(var(--popover-foreground) / <alpha-value>)'
} ,
card : {
DEFAULT : 'hsl(var(--card) / <alpha-value>)' ,
foreground : 'hsl(var(--card-foreground) / <alpha-value>)'
}
} ,
borderRadius : {
lg : 'var(--radius)' ,
md : 'calc(var(--radius) - 2px)' ,
sm : 'calc(var(--radius) - 4px)'
} ,
fontFamily : {
sans : [ 'Inter' ]
}
}
} ,
plugins : [ ]
} ;Le thème peut personnaliser via des jetons CSS. Le jeton par défaut est situé sur EditorthEME.SCSS.
Pour utiliser le thème par défaut, vous devez envelopper votre composant SvelteEditor avec ThemeTheme :
< script lang = " ts " >
import { SvelteEditor } from ' @nextlint/svelte/EditorTheme ' ;
import EditorTheme from ' @nextlint/svelte/EditorTheme ' ;
</ script >
< div class = " editor " >
< EditorTheme >
< SvelteEditor content = " " placeholder = " Start editing... " />
</ EditorTheme >
</ div > La Basicale EditorTheme importe simplement le thème par défaut que nous définissons dans EditorTheme.scss :
< script lang = " ts " >
import ' ./EditorTheme.scss ' ;
</ script >
//EditorTheme.svelte
< slot /> L'éditeur NEXLTINT utilise nextlint/core , qui est un éditeur sans tête avec des plugins existants installés, peut être utilisé dans n'importe quel cadre d'interface utilisateur, compatible avec le système de plugins TipTap et Prochemirror.
Nextlint svelte lui-même a des plugins complètement écrits en svelte et configurable
API Téléchargement / intégration / non-stash
| Nom | Taper | Description |
|---|---|---|
content | Content | Initialiser le contenu de l'éditeur |
onChange | (editor:Editor)=>void | Un rappel appellera lorsque l'éditeur changera |
placeholder? | String | L'ensemble de place sera affiché lorsque l'éditeur est vide |
onCreated? | (editor:Editor)=>void | Un rappel se déclenchera une fois lorsque l'éditeur sera créé |
plugins? | PluginsOptions | Personnaliser les options de plugins |
extensions? | Extensions | Personnaliser l'extension de l'éditeur |
Type: HTMLContent | JSONContent | JSONContent[] | null
Initialiser le contenu, peut être un accompente JSON ou un balisage HTML.
// Can be string
< SvelteEditor
content = "<p>this is a paragraph content</p>"
/ >
// which is equal
< SvelteEditor
...
content = { {
type : 'docs'
attrs : { } ,
content : [ {
type : 'paragraph' ,
attrs : { } ,
content : [ {
type : 'text' ,
text : 'this is a paragraph content'
} ]
} ]
} }
/ > Type: String | undefined Par défaut String | undefined : undefined
Planholder s'affiche lorsque le contenu de l'éditeur est vide
< SvelteEditor ... content = " " placeholder = " Press 'space' to trigger AI prompt " /> Type: (editor: Editor)=>void
Le rappel se déclenche lorsque l'éditeur changera (mettre à jour l'état ou la sélection)
< script lang = " ts " >
let editor;
</ script >
< SvelteEditor
...
onChange ={ _editor => {
editor = _editor ;
}}
/> Type: (editor: Editor)=>void | undefined Par défaut (editor: Editor)=>void | undefined : undefined
Le rappel se déclenchera une fois l'éditeur terminé initialiser
< SvelteEditor
...
onCreated ={ editor => {
console . log ( ' The editor is created and ready to use ! ' );
}}
/> Type: PluginOptions | undefined Par défaut PluginOptions | undefined : undefined
type PluginOptions = {
image ?: ImagePluginOptions ;
gpt ?: AskOptions ;
dropCursor ?: DropcursorOptions ;
codeBlock ?: NextlintCodeBlockOptions ;
} ; Type: ImagePluginOptions|undefined : undefined
Configurez la fonction HandleUpload et la touche API de configuration pour récupérer des images à partir de Unplash
< SvelteEditor
...
plugins ={
image : {
handleUpload :( file ) => {
// handle upload here
const blob = new Blob ([ file ]);
const previewUrl = URL . createObjectURL ( blob );
return previewUrl ;
},
unsplash : {
accessKey : ' UNPLASH_API_KEY '
}
},
}
/> Type: AskOptions|undefined : undefined
Déclenchez l'invite dans une ligne vide, obtenez la question de l'éditeur, appelez la fonction de poignée via cette configuration et ajoutez le résultat à l'éditeur. Permettez de vous intégrer à n'importe quel côté de l'IA de l'éditeur.
< SvelteEditor
...
plugins ={
ask : async ( question : string ) => {
// config any AI tool to get the result and return
// the result to the editor
return ' result from any AI Backend '
}
}
/> Type: DropcursorOptions|undefined DEAUT: undefined
Config DropCursor couleur / largeur / classe.
< SvelteEditor
...
plugins ={
dropCursor : {
width : ' 2px ' ,
color : ' #000 ' ,
}
}
/> Type: NextlintCodeBlockOptions|undefined
Défaut:
{
themes : {
dark : 'github-dark' ,
light : 'github-light'
} ,
langs : [ ]
} Le thème codeBlock se synchronisera avec les accessoires theme .
< SvelteEditor
//....
content ={ ' ' }
onChange ={ editor . set }
theme = " light "
plugins ={{
codeBlock : {
langs : [ ' c ' , ' sh ' , ' javascript ' , ' html ' , ' typescript ' ],
themes : {
dark : ' vitesse-dark ' ,
light : ' vitesse-light '
}
}
}}
/>Veuillez suivre les directives de contribution
La licence MIT (MIT). Veuillez consulter le fichier de licence pour plus d'informations.
