Gathering detailed insights and metrics for free-editor
Gathering detailed insights and metrics for free-editor
Gathering detailed insights and metrics for free-editor
Gathering detailed insights and metrics for free-editor
@flowgram.ai/free-layout-editor
@free-transform/editor-vue
This template should help get you started developing with Vue 3 and TypeScript in Vite. The template uses Vue 3 `<script setup>` SFCs, check out the [script setup docs](https://v3.vuejs.org/api/sfc-script-setup.html#sfc-script-setup) to learn more.
swagger-editor-dist
This module, `swagger-editor-dist`, exposes Swagger-Editor's entire dist folder as an almost (see [anonymized analytics](#anonymized-analytics)) dependency-free npm module.
@akilli/editor
A HTML standards-compliant and dependency-free rich text editor
npm install free-editor
Typescript
Module System
Node Version
NPM Version
TypeScript (100%)
Total Downloads
0
Last Day
0
Last Week
0
Last Month
0
Last Year
0
1 Stars
5 Commits
1 Branches
1 Contributors
Updated on Sep 22, 2018
Latest Version
1.0.1
Package Id
free-editor@1.0.1
Unpacked Size
961.36 kB
Size
444.46 kB
File Count
357
NPM Version
5.7.1
Node Version
9.2.1
Cumulative downloads
Total Downloads
Last Day
0%
NaN
Compared to previous day
Last Week
0%
NaN
Compared to previous week
Last Month
0%
NaN
Compared to previous month
Last Year
0%
NaN
Compared to previous year
Help develops build a scalable website visualization builder.
1npm i gaea-editor --save
And then, it's easy to use:
1import Editor from 'gaea-editor'; 2 3ReactDOM.render( 4 <div style={{ width: '100vw', height: '100vh' }}> 5 <Editor /> 6 </div>, 7 document.getElementById('react-root') 8);
You can add any react components to the drag menu, through the following line of code:
1import BasicComponents from 'gaea-basic-components'; 2<Editor componentClasses={[...BasicComponents, CustomComponent1, CustomComponent2]} />;
BasicComponents
supportcontainer
,button
,icon
,select
,switch
. And there must be at least one component to setisContainer=true
that can be used as outer container.Generally speaking, with
BasicComponents
concat is ok, because the componentcontainer
BasicComponents
offered is a container.
Add editSetting
to each component props, to let the editor know how to edit it visualizations:
1defaultProps = { 2 editSetting: { 3 key: 'my-custom-key', // Unique key. 4 name: 'Custom one', // The name shown in drag menu. 5 isContainer: false, // Can be dragged in. 6 editors: [ 7 { 8 field: 'title', 9 text: 'Text', 10 type: 'string' 11 } 12 ] // Tell gaea-editor, which props can be edited and how to edit it. 13 } 14};
editors
gaea-editor provides several built-in type editing props. If you need to expand it, you can refer to custom plugin.
common field:
field
: which props to edit. EX: value
visible
style.backgroundColor
.text
: If exist, will appear in the form label to prompt the user.The following are the built-in types:
Suitable for any string editing scene.
1{ 2 type: 'string', 3 text: 'Text', 4 field: 'value' 5}
Suitable for any number editing scene.
In many cases, it is suggested that inputRange
and outputRange
be set to the same value.
1{ 2 type: 'number', 3 text: 'Text', 4 field: 'value', 5 data: { 6 useSlider: true, 7 step: 1, 8 inputRange: [0, 100], 9 outputRange: [0, 1] 10 } 11}
Suitable for any boolean editing scene.
1{ 2 type: 'boolean', 3 text: 'Checked', 4 field: 'value' 5}
Suitable for enumable editing scene.
1{ 2 type: 'select', 3 text: 'Text', 4 field: 'value', 5 data: [{ 6 text: 'Default', 7 value: 0 8 }, { 9 text: 'Small', 10 value: 1 11 }, { 12 text: 'Large', 13 value: 2 14 }] 15}
Suitable for color picker editing scene.
1{ 2 type: 'color', 3 text: 'Text', 4 field: 'style.backgroundColor', 5}
Suitable for layout editing scene.
Because this type will edit multiple props properties, such as style.display
style.flexDirection
, so don't need to specify the field
field.
1{ 2 type: 'display', 3 text: 'Text' 4}
Suitable for margin-padding editing scene.
Because this type will edit multiple props properties, such as margin
padding
, so don't need to specify the field
field.
1{ 2 type: 'box-editor', 3 text: 'Text' 4}
Super type, allow visualizations to edit a array type props.
1{ 2 type: 'array', 3 text: 'values', 4 data: 'string' 5}
You can change string
to boolean
, than it can edit boolean array:
Super type, allow visualizations to edit a array type props.
Each field in data
describes how the key should be edited in the object in array.
Each field in
data
is aeditor
type. You can even nestedarray
orobject
type inside.
1{ 2 type: 'array', 3 text: 'Options', 4 data: [{ 5 field: "value", 6 type: "string", 7 text: "Value" 8 }, { 9 field: "text", 10 type: "string", 11 text: "Text" 12 }, { 13 field: "disabled", 14 type: "boolean", 15 text: "Disabled" 16 }] 17}
Super type, allow visualizations to edit a object type props.
Each field in data
describes how the key should be edited in this object.
Each field in
data
is aeditor
type. You can even nestedarray
orobject
type inside.
1{ 2 type: 'object', 3 text: 'Text', 4 data: [{ 5 field: "name", 6 type: "string", 7 text: "Name" 8 }, { 9 field: "age", 10 type: "number", 11 text: "Age" 12 }] 13}
You can add custom components, custom plugins, save callback, and read saved data.
Props | Type | Description |
---|---|---|
onSave | (info?: string) => void | When you click the Save button, feed back to you to save the information |
defaultValue | object | Editor initial value, you can pass the value of the onSave callback and resume the draft |
componentClasses | Array<React.ComponentClass<IGaeaProps>> | React classes. Any react component is supported, but you need some configuration information to tell the editor how to edit it. see custom-component-config |
plugins | IPlugin[] | Advanced usage for custom editor functionality. |
locale | string | zh or cn |
ViewportRender | React.ReactElement<any> | You can rewrite viewport element. |
onSave
1export function renderGaeaEditor() { 2 return ( 3 <Editor 4 onSave={value => { 5 // send the value data to your server. 6 }} 7 /> 8 ); 9}
value
The value
came from onSave
.
1export function renderGaeaEditor() { 2 return <Editor value={value} />; 3}
componentClasses
1class MyInput extends React.Component { 2 render() { 3 return <input />; 4 } 5} 6 7export function renderGaeaEditor() { 8 return <Editor componentClasses={[MyInput]} />; 9}
Read more in custom-component-config.
plugins
First you should install dob-react
.
1npm i dob-react
1import { Connect } from 'dob-react' 2 3@Connect 4class Plugin extends React.Component { 5 render() { 6 return 'plugin' 7 } 8} 9 10const plugin { 11 position: "mainToolEditorTypeShow", 12 class: ShowEditor 13} 14 15export function renderGaeaEditor() { 16 return ( 17 <Editor plugins={[ Plugin ]}/> 18 ) 19}
What is position
? What can i do with plugin? See more in custom-plugin
Talk to us about gaea-editor using DingDing.
1git clone https://github.com/ascoders/gaea-editor.git 2cd gaea-editor 3npm i 4npm run docs
Will automatically open the default browser.
Step 1, get value by onSave
method in gaea-editor
:
1import Editor from 'gaea-editor'; 2 3ReactDOM.render(<Editor onSave={value => saveToServer(value)} />, document.getElementById('react-root'));
step 2, install gaea-render
, and pass value to it:
1npm i gaea-render
1import Render from 'gaea-render'; 2 3const value = getValueFromServer(); // <Editor onSave={value => // From here. } /> 4 5ReactDOM.render(<Render value={value} />, document.getElementById('react-root'));
By default, both gaea-editor
and gaea-render
using gaea-basic-components
. You can overwrite it by these code:
1import Editor from 'gaea-editor'; 2import Render from 'gaea-render'; 3 4ReactDOM.render(<Editor componentClasses={myCustomComponents} />, document.getElementById('react-editor')); 5ReactDOM.render(<Render componentClasses={myCustomComponents} />, document.getElementById('react-render'));
Or concat
gaea-basic-components
:
1import Editor from 'gaea-editor'; 2import Render from 'gaea-render'; 3import BasicComponents from 'gaea-basic-components'; 4 5ReactDOM.render( 6 <Editor componentClasses={[...BasicComponents, myCustomComponents]} />, 7 document.getElementById('react-editor') 8); 9ReactDOM.render( 10 <Render componentClasses={[...BasicComponents, myCustomComponents]} />, 11 document.getElementById('react-render') 12);
No vulnerabilities found.
Reason
no binaries found in the repo
Reason
Found 0/5 approved changesets -- score normalized to 0
Reason
0 commit(s) and 0 issue activity found in the last 90 days -- score normalized to 0
Reason
no effort to earn an OpenSSF best practices badge detected
Reason
no SAST tool detected
Details
Reason
security policy file not detected
Details
Reason
license file not detected
Details
Reason
project is not fuzzed
Details
Reason
branch protection not enabled on development/release branches
Details
Reason
14 existing vulnerabilities detected
Details
Score
Last Scanned on 2025-07-07
The Open Source Security Foundation is a cross-industry collaboration to improve the security of open source software (OSS). The Scorecard provides security health metrics for open source projects.
Learn More