rich text editor

Próximo aviso de mudança de ruptura

Em 18.10. Lançaremos uma nova versão principal (V8) do Rich Text Editor, que é uma reescrita da antiga base de código. Esse aviso não é fundamental para os usuários dos pacotes NPM usando o versão, mas os usuários do pacote unpkg (http://unpkg.com/rich-text-editor/dist/rich-text-editor-bledle.js) notarão que o pacote mais recente do código não funcionará mais como esperado. Para evitar uma mudança de ruptura no seu sistema, você pode definir a versão do pacote unpkg explicitamente para a última versão estável do V7 da seguinte maneira: http://unpkg.com/[email protected]/dist/rich-text-editor-bnled.js

Isso lhe dará tempo para desenvolver seus sistemas para acomodar a nova versão assim que for lançada.

Abitti.net

Uso da política de marca registrada Abitti

Editor de texto rico com suporte matemático para o Conselho de Exames de Matrícula Finlandês. A demonstração ao vivo pode ser encontrada em https://math-demo.abitti.fi/

Desde v4.0.0, apenas o código ES2017 com módulos ES é fornecido (no diretório dist ). Se você deseja usar esta biblioteca, provavelmente é necessário um empacotador de webpack ou rollup.

Uso

Uso com NPM

Instale o pacote com npm install rich-text-editor . Editor de texto rico pode ser usado como

• Um componente React import RichTextEditor from 'rich-text-editor'
• ou como uma função em aplicativos que não estão usando o React import { makeRichText } from 'rich-text-editor/dist/rich-text-editor'

A maioria das propriedades passadas para o componente ou a função de inicialização é descrita abaixo. Mais informações podem ser encontradas nos tipos e/ou código -fonte.

Uso como pacote de cdn

Add a script tag to your HTML page whose source is 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> .

Isso adicionará makeRichText à janela, que pode ser usado para inicializar o editor.

A função leva os seguintes parâmetros como objeto:

Chave	Padrão
recipiente	Document.getElementById ('Rich-Text-Editor-Root')
linguagem	'Fi'
Baseurl	''
PermitidoFiletypes	['Image/png', 'Image/jpeg']
onvaluechange	() => {}
Textareprops	{}

Exemplo:

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

O Textareprops é passado para o elemento DIV subjacente que é o elemento do editor visível, aqui estão os que são relevantes para a configuração dos usuários de CDN:

Chave	tipo	Propósito
AriaInvalid	booleano	Adicione-se-invalido ARIA
Arialabelledby	corda	Adicione Aria-Labelledby
EditorStyle	React.cssproperties	Propriedades diretas do CSS para o elemento do editor
ClassName	corda	Nome (s) de classe adicional para o elemento do editor
eu ia	corda	campo de identificação para o elemento editor
Lang	corda	Lang-field para o elemento editor para acessibilidade

Objetivo (leia isso antes de enviar)

O editor de texto rico foi desenvolvido para permitir que os candidatos do exame de matrícula finlandesa anexem capturas de tela e escreva equações como parte de suas submissões. Nosso objetivo não é criar um substituto de desistência de uso geral para a Textarea, mas um editor que funciona em Abitti e seu navegador incorporado.

Enquanto celebramos todos os relatórios de bugs, solicitação de recurso e solicitação de puxão, pedimos que você se lembre de seguir:

• A maioria das questões relacionadas à inserção de fórmulas e a renderização do látex é causada pelas bibliotecas Mathjax e Mathquill. Não temos recursos para escrever solicitações de tração com base nos problemas enviados para nós. Por razões semelhantes, não passaremos por questões a montante relatadas para nós.
• Não estamos prestando atenção aos problemas ou a solicitações que caem fora de nossa missão - Abitti.

Esperamos que você entenda nosso desejo de se concentrar em nosso objetivo especificado por lei.

Dependências

• Mathquill (https://github.com/digabi/mathquill)
• Mathjax-Node
• JQuery
• Sanitize-html

Começando

1. Instale o Node.js
2. Execute npm install .
3. Execute npm run dev .
4. Testes do navegador: http: // localhost: 5111/test/tests.html
5. Teste manual: http: // localhost: 5111/test/tests.html? Grep = manual

Testando o pacote localmente

1. Executar npm run build
2. Run npm run dev-server
3. Execute um servidor HTTP simples na raiz do projeto, por exemplo python3 -m http.server 8080
4. Editar dev/index.html tag de script para apontar para o pacote: <script type="module" src="/dist/rich-text-editor-bundle.js"></script> (não comprometa isso).
5. Vá para http: // localhost: 8080/dev/index.html

Exemplo de uso direto

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

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

Licença

https://opensource.org/license/mit