rich text editor

Avertissement de changement de rupture à venir

Le 18.10. Nous publierons une nouvelle version majeure (V8) de l'éditeur de texte riche, qui est une réécriture de l'ancienne base de code. Cet avertissement n'est pas essentiel aux utilisateurs des packages NPM utilisant le versioning, mais les utilisateurs du bundle UNPKG (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) remarquera que le dernier bundle du code ne fonctionnera plus comme prévu. Pour éviter un changement de rupture dans votre système, vous pouvez définir explicitement la version du package UNPKG sur la dernière version stable de V7 comme suit: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

Cela vous donnera le temps de développer vos systèmes pour s'adapter à la nouvelle version une fois qu'il sera publié.

Abitti.net

Utilisation de la politique de marque Abitti

Éditeur de texte riche avec support mathématique pour le Finnish Matriculation Examination Board. La démo en direct peut être trouvée sur https://math-demo.abitti.fi/

Depuis V4.0.0, seul le code ES2017 avec des modules ES est fourni (dans le répertoire dist ). Si vous souhaitez utiliser cette bibliothèque, un bundler tel que WebPack ou Rollup est probablement nécessaire.

Usage

Utilisation avec NPM

Installez le package avec npm install rich-text-editor . L'éditeur de texte riche peut être utilisé comme

• Un composant réactif import RichTextEditor from 'rich-text-editor'
• ou en fonction des applications qui n'utilisent pas React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

La plupart des propriétés transmises au composant ou à la fonction d'initialisation sont décrites ci-dessous. Plus d'informations peuvent être trouvées dans les types et / ou le code source.

Utilisation en tant que pack CDN

Ajoutez une balise de script à votre page HTML dont la source est https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , par exemple <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> .

Cela ajoutera makeRichText à Window, qui peut être utilisé pour initialiser l'éditeur.

La fonction prend les paramètres suivants comme un objet:

Clé	Défaut
récipient	document.getElementByid («Rich-Text-Editor-Root»)
langue	'Fi'
balise	''
permis	['image / png', 'image / jpeg']
onvaluechange	() => {}
textareprops	{}

Exemple:

 {
  container: document.getElementById('rich-text-editor-root')!,
  language: 'FI',
  baseUrl: '',
  allowedFileTypes: ['image/png', 'image/jpeg'],
  onValueChange: () => {},
  textAreaProps: {},
}

TextAreAprops est transmis à l'élément DIV sous-jacent qui est l'élément d'éditeur visible, voici ceux qui sont pertinents pour la configuration des utilisateurs de CDN:

Clé	taper	But
aainvalide	booléen	Ajouter Aria-invalid
arialabelledby	chaîne	Ajouter Aria-marqué par Aria
éditeur	React.cssproperties	Direct CSS Properties to the Editor Element
nom de classe	chaîne	Nom (s) de classe supplémentaire à l'élément éditeur
identifiant	chaîne	Id-champ de l'élément éditeur
égouter	chaîne	Lang-champ à l'éditeur-élément pour l'accessibilité

Objectif (lisez ceci avant de soumettre)

Rich Text Editor a été développé pour permettre aux candidats à l'examen d'inscription finlandais de joindre des captures d'écran et d'écrire des équations dans le cadre de leurs soumissions. Notre objectif n'est pas de créer un remplacement d'accès général à usage général pour TextArea mais un éditeur qui fonctionne dans Abitti et son navigateur intégré.

Pendant que nous célébrons chaque rapport de bogue, la demande de fonctionnalités et la demande de traction, nous vous demandons de vous souvenir de la suite:

• La plupart des problèmes liés à la saisie des formules et au latex de rendu sont causés par les bibliothèques Mathjax et Mathquill. Nous n'avons pas de ressources pour rédiger des demandes de traction basées sur des problèmes qui nous sont soumis. Pour des raisons similaires, nous ne passerons pas les problèmes en amont qui nous ont été signalés.
• Nous ne faisons pas attention aux problèmes ni aux demandes de traction qui ne relèvent de notre mission - Abitti.

Nous espérons que vous comprenez notre désir de nous concentrer sur notre objectif spécifié par la loi.

Dépendances

• MathQuill (https://github.com/digabi/mathquill)
• Nœud mathjax
• Jquery
• désinfecter

Commencer

1. Installer Node.js
2. Exécutez npm install .
3. Exécutez npm run dev .
4. Tests du navigateur: http: // localhost: 5111 / test / tests.html
5. Test manuel: http: // localhost: 5111 / test / tests.html? Grep = manuel

Tester le bundle localement

1. Run npm run build
2. Exécuter npm run dev-server
3. Exécutez un serveur HTTP simple dans la racine du projet, par exemple python3 -m http.server 8080
4. Edit dev/index.html Script Tag pour pointer vers le bundle: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (ne vous engagez pas).
5. Allez sur http: // localhost: 8080 / dev / index.html

Exemple d'utilisation directe

Demo: http://digabi.github.io/rich-text-editor/

Source: https://github.com/digabi/rich-text-editor/blob/master/index.html

Licence

https://opensource.org/licenses/mit