@etsoo/editor

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