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:

$ npm install @etsoo/editor

Using yarn:

$ 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.

<script src="https://cdn.jsdelivr.net/npm/@etsoo/editor@latest/dist/eoeditor.js"></script>
<eo-editor name="content">
	<p>
	Content to be edited here<br>包含编辑的内容
	</p>
</eo-editor>
<script>
// Get the editor reference
const editor = document.querySelector('eo-editor');
if (editor) {
	// Call 'getContent' method to get the editor's content
	const content = editor.getContent();
}
</script>

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

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

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

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

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

export const EOEditorEx = React.forwardRef<IEOEditor, EOEditorExProps>(
  (props, ref) => {
    const { cloneStyles = false, ...rest } = props;
    return <eo-editor cloneStyles={cloneStyles} ref={ref} {...rest} />;
  }
);

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| |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|