re editor
v0.5.8
Un editor de texto Rich Rich de React fuera del cuadro
Para adaptarse a diferentes necesidades de desarrollo, el editor proporciona los siguientes dos métodos de uso.
Reeditor es un componente encapsulado que se puede usar después de la instalación. Contiene @reeditor/core y @reeditor/toolbar-antd. La barra de herramientas utiliza el estilo Antd de forma predeterminada. Si desea usar otras barras de herramientas, consulte el siguiente documento personalizado
$ npm install re-editorIntroducido en JS
import 're-editor/lib/styles/index.css'También se puede introducir en CSS (requiere soporte de preprocesamiento de CSS)
@import 're-editor/lib/styles/index.css'| propiedad | ilustrar | tipo |
|---|---|---|
| valor | Valor del editor | objeto |
| en el cambio | La devolución de llamada para el editor cambia de contenido | (valor: valor) => nulo |
| marcador de posición | Texto del marcador de posición | cadena |
| readonamente | Modo de solo lectura | booleano |
| onimageupload | Cama de imagen personalizada | (archivo: archivo) => promesa <url: string> |
| herramientas | Establezca el contenido de visualización de la barra de herramientas | Matriz <matriz |
tools props de la matriz admiten, si se trata de una matriz bidimensional, se mostrará en grupos
tools = { [ 'bold' , 'italic' , 'underline' , 'strikethrough' ] }
// 或者
tools = { [
[ 'bold' , 'italic' , 'underline' , 'strikethrough' ] ,
[ 'orderedlist' , 'unorderedlist' ]
] }| nombre | Función |
|---|---|
| atrevido | Atrevido |
| Itálico | Itálico |
| subrayar | Subrayar |
| Fusible | Línea de eliminación |
| lista de orden | Lista ordenada |
| lista de desorden | Lista desordenada |
| Título | título |
| alinear | Alineación |
| imagen | imagen |
| mesa | hoja |
| código | Código |
| deshacer | Revocar |
| rehacer | Rehacer |
| pantalla completa | pantalla completa |
El editor se divide en dos partes, el área de edición de contenido y la barra de herramientas. Lo siguiente describe cómo personalizar la barra de herramientas
$ npm install @re-editor/corePuede crear una barra de herramientas del editor de cualquier manera. Debe pasar la instancia del editor a la barra de herramientas. Puede consultar la implementación de reeditor y @reeditor/barra de herramientas-antd para ver la documentación de la API para obtener detalles (esta parte del documento aún no se ha escrito, ¿se completará en el futuro cercano?)
Por ejemplo, implementa una función en negrita:
import { command } from '@re-editor/core' ;
const Demo = ( props ) => {
function handleClick ( ) {
command ( props . editor ) ( 'bold' )
}
return < div onClick = { handleClick } > bold </ div >
} Slate o Draft no es un editor puro, son más como un marco para construir editores. El reeditor se desarrolla en función de la pizarra, por lo que no tiene que prestar atención al proceso de构建编辑器.
El estilo se divide en dos partes, nodo (Bold, H1, H2, etc.) y la barra de herramientas. Todos pueden reescribir el estilo básico a través de CSS, y la barra de herramientas también puede reescribir completamente el estilo a través de CSS.
Usando una actualización incremental, el valor de la devolución de llamada OnChange está en formato inmutable. Puede usar Immutable-JS-Diff y otros métodos para obtener el contenido de Diff para una actualización incremental
La imagen se guarda como base64 de forma predeterminada. Si necesita cargar la imagen en el servidor especificado, puede usar la función onImageUpload , (archivo: archivo) => promesa <url: cadena> código de muestra
粗体斜体下划线删除线下标superior
有序列表无序列表
Alinee los extremos居中对齐左对齐右对齐两端对齐
h1 h2 h3 h4 h5 h6
图片表格代码高亮markdown#>-1.Otras funciones continúan aumentando ...
