rich text editor

Próxima advertencia de cambio de ruptura

En 18.10. Lanzaremos una nueva versión principal (V8) del editor de texto enriquecido, que es una reescritura de la antigua base de código. Esta advertencia no es fundamental para los usuarios de los paquetes NPM que usan versiones, pero los usuarios del paquete UNPKG (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js) notarán que el último paquete del código ya no funcionará como se esperaba. Para evitar un cambio de ruptura en su sistema, puede establecer la versión del paquete Unpkg explícitamente en la última versión estable de V7 de la siguiente manera: http://unpkg.com/[email protected]/dist/rich-text-editor-bundle.js

Esto le dará tiempo para desarrollar sus sistemas para acomodar la nueva versión una vez que se lance.

Shiti.net

Uso de la política de marca registrada de Abitti

Editor de texto rico con soporte matemático para el Junta de Examen de Matriculación Finlandés. La demostración en vivo se puede encontrar en https://math-demo.abitti.fi/

Desde V4.0.0, solo se proporciona código ES2017 con módulos ES (en el directorio dist ). Si desea usar esta biblioteca, es probable que se necesite un Bundler como Webpack o Rollup.

Uso

Uso con NPM

Instale el paquete con npm install rich-text-editor . El editor de texto rico se puede usar como

• Un componente React import RichTextEditor from 'rich-text-editor'
• o como una función en aplicaciones que no están utilizando React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

La mayoría de las propiedades pasadas al componente o la función de inicialización se describen a continuación. Se puede encontrar más información en los tipos y/o el código fuente.

Uso como paquete CDN

Agregue una etiqueta de script a su página HTML cuya fuente es https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js , eg <script type="module" src="https://unpkg.com/rich-text-editor/dist/rich-text-editor-bundle.js"></script> .

Esto agregará makeRichText a la ventana, que se puede usar para inicializar el editor.

La función toma los siguientes parámetros como un objeto:

Llave	Por defecto
recipiente	document.getElementById ('rico-text-editor-root')
idioma	'Fi'
base	''
Filetypes permitidos	['Imagen/png', 'Image/jpeg']
onvaluechen	() => {}
texteeabs	{}

Ejemplo:

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

TextareAprops se pasan al elemento Div subyacente que es el elemento del editor visible, aquí hay que son relevantes para la configuración de usuarios de CDN:

Llave	tipo	Objetivo
ariainválido	booleano	Agregar aria-inválido
Arialabelledby	cadena	Agregar aria-labelledby
estilo editor	React.cssproperties	Propiedades directas de CSS al elemento del editor
nombre de clase	cadena	Nombre (s) adicional (s) de clase al elemento del editor
identificación	cadena	campo de identificación al elemento del editor
lang	cadena	Lang-Field al editor-elemento para la accesibilidad

Objetivo (lea esto antes de enviar)

Se ha desarrollado un editor de texto rico para permitir que los candidatos del examen de matriculación finlandés adjunten capturas de pantalla y escriban ecuaciones como parte de sus presentaciones. Nuestro objetivo no es crear un reemplazo de uso general de texto para TextARea, sino un editor que funciona en Abitti y su navegador integrado.

Mientras celebramos todos los informes de errores, solicitud de función y solicitud de extracción, le pedimos amablemente que recuerde siguiendo:

• La mayoría de los problemas relacionados con la entrada de fórmulas y la látex de representación son causados por las bibliotecas de Mathjax y Mathquill. No tenemos recursos para escribir solicitudes de extracción basadas en temas que se nos presentan. Por razones similares, no pasaremos los problemas ascendentes que se nos informaron.
• No estamos prestando atención a los problemas o las solicitudes de atracción que caen fuera de nuestra misión: Sabiti.

Esperamos que comprenda nuestro deseo de concentrarse en nuestro objetivo especificado por la ley.

Dependencias

• Mathquill (https://github.com/digabi/mathquill)
• Nodo mathjax
• JQuery
• desinfectación-html

Empezando

1. Instalar node.js
2. Ejecute npm install .
3. Ejecutar npm run dev .
4. Pruebas de navegador: http: // localhost: 5111/test/tests.html
5. Prueba manual: http: // localhost: 5111/test/tests.html? Grep = manual

Probar el paquete localmente

1. Ejecutar npm run build
2. Ejecutar npm run dev-server
3. Ejecute un servidor HTTP simple en la raíz del proyecto, por ejemplo python3 -m http.server 8080
4. Editar dev/index.html Etiqueta de script para apuntar al paquete: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (no confirme esto).
5. Vaya a http: // localhost: 8080/dev/index.html

Ejemplo de uso directo

Demostración: http://digabi.github.io/rich-text-editor/

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

Licencia

https://opensource.org/licenses/mit