EOEditor

ETSOO Free WYSIWYG HTML Editor
亿速思维免费提供的所见即所的 HTML 编辑器

Access to https://jsfiddle.net/q2mhLufr/ for a quick look.
访问网址 https://jsfiddle.net/q2mhLufr/ 在线快速预览。

Support / 支持

- Browsers since 2019 (ES2019+), no Internet Exployer support.
- Custom HTML element/component feature. Easilly integrate with other frameworks like Angular/React/Vue.
- Splitted fabric into separate file to reduce load size.
- English and Chinese(简体/繁体).

/ Picture editing / 图片编辑

- Browser(client) side picture editing like rotate/resize/filter, text.
- Integrated with Fabric.js (http://fabricjs.com/).

Installing / 安装

Using npm:

``bash
$ npm install @etsoo/editor
`

Using yarn:

`bash
$ yarn add @etsoo/editor
`

Using web:
Use CDN or download the file for the latest version. Replace @latest with a specific version like @1.0.5 for it.

`html




Content to be edited here
包含编辑的内容




`

Using ReactJs:
React component wrapper EOEditorEx, or install '@etsoo/reacteditor'

`javascript
import { EOEditor, IEOEditor } from '@etsoo/editor';
import React from 'react';

/**
* EOEditor
*/
export type EOEditorExProps = React.DetailedHTMLProps<
React.HTMLAttributes,
IEOEditor
> &
Partial;

declare global {
namespace JSX {
interface IntrinsicElements {
'eo-editor': EOEditorExProps;
}
}
}

// Make sure import the script
const _editor = new EOEditor();

export const EOEditorEx = React.forwardRef(
(props, ref) => {
const { cloneStyles = false, ...rest } = props;
return ;
}
);
``

Properties / 属性

| Name | Description |
| ----------------: | ------------------------------------------------------------------------ |
| activeColor | Active color |
| backupKey | Backup distinguish key |
| buttons | All first-level buttons |
| cloneStyles | Clone styles to editor |
| color | Main color |
| commands | Commands, a supported collection or commands array like ['redo', 'undo'] |
| content | Get or set editor's content |
| editorContainer | Editor container |
| editorFrame | Editor hosted iframe |
| editorSourceArea | Editor source code textarea |
| editorToolbar | Editor toolbar |
| editorWindow | Editor hosted iframe window |
| height | Height of the editor |
| labels | Editor current labels |
| language | Language of the UI, like en-US, zh-CN, zh-HK |
| lastClickedButton | Editor last clicked button |
| name | Name for the hidden form input |
| imageEditor | Image editor |
| popup | Popup component |
| styleWithCSS | Style with CSS or tag |
| value | Editor's value, alias of content |
| width | Width of the editor |

Methods / 方法

| Name | Description |
| ----------------: | ------------------------------------------------------- |
| backup | Backup editor content |
| clearBackup | Clear backup |
| createElement | Create element |
| delete | Delete selection |
| editImage | Edit image |
| executeCommand | Execute command |
| getBackup | Get backup |
| getCurrentElement | Get current element inside which is selected or focused |
| getDeepestNode | Get deepest node |
| getFirstElement | Get first selection element |
| getFirstElement | Get first range element |
| getFirstLink | Get first section outer link |
| getFirstRange | Get first range |
| getOnlyElement | Get the only child element |
| getSelection | Get selection |
| insertHTML | Insert HTML text to current selection point |
| insertImage | Insert image |
| insertTable | Insert table |
| popupBlocks | Popup blocks |
| popupColors | Popup color palette |
| popupContent | Popup HTML content |
| popupIcons | Popup icons |
| popupStyle | Popup styles |
| popupSymbols | Popup symbols |
| popupSubs | Popup subs |
| restoreFocus | Restore focus to the editor iframe |
| surroundNode | Let first range surround node |
| tableProperties | Table properties |
| unlink | Unlink |