Esta semana, hice un requisito de fondo para el servicio de PC, requiriendo un editor de texto enriquecido, insertando imágenes, tablas, color de fondo del tamaño de fuente, etc.
Finalmente introduje el editor de texto enriquecido TinyMCE
Para la introducción de TinyMCE:
TinyMCE es un editor de texto enriquecido WYSIWYG fácil de usar y potente. Programas similares incluyen: UEditor, Kinditor, Simditor, CKEditor, wangEditor, Suneditor, froala, etc.
Las ventajas de TinyMCE:
- Código abierto y disponible comercialmente, basado en LGPL2.1
- Complementos ricos, los complementos integrados básicamente cubren las funciones requeridas diariamente
- Interfaces ricas, gran escalabilidad y la capacidad de expandir funciones indefinidamente
- La interfaz se ve bien, en línea con la estética moderna.
- Proporcione tres modos: clásico, en línea e inmersivo sin interferencia
- Excelente soporte para estándares (desde v5)
- Soporte multilingüe, el sitio web oficial puede descargar docenas de idiomas.
La imagen de arriba es el contenido del editor de texto enriquecido configurado en la demanda. Mi demanda TinyMCE puede satisfacerse por completo.
Sitio web oficial de TinyMCE: www.tiny.cloud
TinyMCE admite vue, reaccionar, angular
Este proyecto modificado usa react,
Encapsulado un componente de edición de texto enriquecido adecuado para nosotros en la demanda:
El contenido del componente editor:
importar Reaccionar desde 'reaccionar' ; importar './Editor.scss' ; importar {isDev, nginxPrefix} desde '@ / config' ; importar {Cargar, Botón, Icono, Popconfirm, Girar, mensaje} desde 'antd' ; importar _get desde 'lodash / get' ; importar _uniqueId desde 'lodash / uniqueId' ; importar PropTypes desde 'prop-types' ; / * * @props id de cadena? 标识符 * @props altura del número? 高度 * @props string defaultContent? 初始 内容 * @props boolen deshabilitado? 禁用 * @props function onDelete? 删除 事件 * @props function onAdd? 添加 事件 * @event function getEditorContent Obtener contenido de edición * @event function setEditorContent Establecer contenido de edición * @event function insertContent Insertar editar contenido * / class El editor extiende React.Component { constructor (props) { super (props); const tinymceId = `editor-tinymce - $ { this .props.id} - $ {_ uniqueId ()} - $ { new Date (). getTime ()} `; this .state = { // ID del editor tinymceId, // Editor de instancias del editor: nulo }; } componentDidMount () { const {height= 300, defaultContent = ''} = this .props; window.tinymce.init ({ selector: `# $ { this .state.tinymceId}`, idioma: 'zh_CN' , height: height, min_height: 200 , width: '100%' , redimensionar: true , default_link_target: '_blank ' , init_instance_callback: editor => { if (defaultContent) { editor.setContent (defaultContent); } }, paste_enable_default_filters: true , // paste_word_valid_elements: () => { // // }, // 插件 配置 plugins: 'tabla imagen listas enlace pegar' , // 菜单 配置 barra de menú: 'formato de inserción de vista de edición de archivo' , // 工具栏 配置 / * eslint-disable * / barra de herramientas: 'deshacer rehacer | styleselect | negrita cursiva | alignleft aligncenter alignright alignjustify | sangría sangría | blockquote | mesa | enlace de imagen | forecolor backcolor | lista de bullist | removeformat ' / * eslint-enable* / }). then (([editor]) => this .setState ({editor})); } componentWillUnmount () { // En algunos ciclos de vida, la instancia no se genera y no existe un método de desmontaje. (Fase de montaje de componentes) // if (this.state.editor! == null) { // this.state.editor.destroy (); // } window.tinymce.get ( this .state.tinymceId) .destroy (); } getEditorContent = () => { devolver este .state.editor.getContent (); } setEditorContent = (content) => { window.tinymce.get ( this.state.tinymceId) .setContent (contenido); } insertContent = (content) => { try { this .state.editor.insertContent (content); } catch (e) { window.tinymce.get ( this .state.tinymceId) .insertContent (content); } } // 默认 上传 配置 uploadConfig = { nombre: 'archivo' , acción: (isDev ? '': NginxPrefix) + '/ admin / common / uploadFile' , encabezados: { autorización: 'autorización-texto' , }, onChange: (info) => { if (info.file.status === 'done' ) { message.success ( 'Image upload exitosa' ); this .state.editor.insertContent ( ` <img src =" $ {_ get (info, 'file.response.data.result')} "> ` ); } else if (info.file.status === 'error' ) { message.error ( ' Error al cargar la imagen' ); } }, acepta: '.jpg, .jpeg, .jpe, .png, .bmp' } render () { const {uploadConfig} = esto .props; return ( <Spin spinning = { this .props.disabled} indicador = {<Icon type = "stop" style = {{color: '# 555'}} />}> <div className = "editor-container"> < textarea id = { this .state.tinymceId} /> <div className = "btn-bar"> <Upload {... (uploadConfig? uploadConfig: this .uploadConfig)}> <Button> <Icon type = "upload" / > 添加 本地 图片 </Button> </Upload> this .props.onAdd && <Button icon = "plus" shape = "circle" onClick = { this .props.onAdd} /> } { this .props.onDelete && < Popconfirm title = "无法 撤回, 确认 删除？" onConfirm = { this .props.onDelete} okText = "确认" cancelText = "Cancelar " Colocación = "leftBottom" > < el botón de tipo = "Peligro" icono = "Borrar" Forma = "Círculo" estilo = {{marginLeft: '4px' }} el onclick = {() => { // cuando editor de texto enriquecido Cuando no hay contenido, el botón Eliminar no aparece,Llame directamente al método delete const content = this.getEditorContent (); if (! content) { this .props.onDelete (); } }} /> </Popconfirm> } </span> </div> </div> </Spin> ); } } Editor.defaultProps = { id: 'no-props-id' , height: 300 , defaultContent: ' , onDelete: null , onAdd: null , disabled: false , uploadConfig: null }; Editor.propTypes = { id: PropTypes.string, height: PropTypes.number, defaultContent: PropTypes.string, onDelete: PropTypes.func, onAdd: PropTypes.func, disabled: PropTypes.bool }; editor predeterminado de exportación ;
El componente finalmente envía un fragmento de HTML, la imagen es solo una URL, el tamaño es muy pequeño, muy práctico
En esta demanda, el cuadro de edición de texto enriquecido es una entrada de caso,
Por supuesto, hay una pantalla cuando se ingresa, y también es muy simple para la pantalla. Se agrega una función de ampliación de imagen al lugar de visualización
Hay un problema al mostrar, es decir, el tamaño de la imagen que queremos controlar es muy pequeño, de modo que se puede ver todo el contenido y se puede hacer clic en el contenido específico de la imagen para ampliarla.
Ven y muéstrame la hermosa imagen después de hacer clic en la imagen de mi dios masculino:
