DOCSEARCHbyAlgolia
Submit Docs

UEditor Plus Documentation

repository·master·Indexed 19 days ago

https://github.com/modstart-lib/ueditor-plus

An enhanced rich text editor based on UEditor (version 4.5.0) featuring a modernized UI and improved plugin support. It provides seamless integration with Vue 2, Vue 3, and React via dedicated wrappers, as well as support for vanilla JavaScript. The library is configured through the global window.UEDITOR_CONFIG object to manage environment paths, server endpoints for uploads, toolbar layouts, and auto-save behavior.

Tokens
9.3K
Snippets
26
Records
27
Agent score
66%

What's inside UEditor Plus

  1. Integrate UEditor Plus with Vue 3

    master

    To use UEditor Plus in a Vue 3 project:

    1. Install the wrapper: npm i --save vue-ueditor-wrap@3.x.
    2. Copy the dist-min directory from UEditor Plus to your project's public/static/UEditorPlus/ directory.
    3. Register the plugin in main.js using .use(VueUeditorWrap).
    4. Use the <vue-ueditor-wrap> component in your templates.
    // main.js
import {createApp} from 'vue'
import App from './App.vue'
import VueUeditorWrap from 'vue-ueditor-wrap';

createApp(App).use(VueUeditorWrap).mount('#app')
    <!-- App.vue -->
<template>
    <div>
        <vue-ueditor-wrap v-model="content"
                          editor-id="editor"
                          :config="editorConfig"
                          :editorDependencies="['ueditor.config.js','ueditor.all.js']"
                          style="height:500px;"/>
    </div>
</template>

<script setup>
    import {ref} from 'vue';

    const content = ref('<p>Hello UEditorPlus</p>');
    const editorConfig = {
        serverUrl: '/api/path/to/server',
        UEDITOR_HOME_URL: '/static/UEditorPlus/',
        UEDITOR_CORS_URL: '/static/UEditorPlus/',
    }
</script>

  8. Manage the ReactX example project with npm scripts

    master

    The reactx example project is bootstrapped using Create React App. You can manage the development lifecycle using the following npm commands in the project directory:

    # Run the app in development mode
npm start

# Launch the test runner in interactive watch mode
npm test

# Build the app for production
npm run build

# Eject from the single build dependency to gain full control over configuration
# WARNING: This is a one-way operation!
npm run eject

  9. Integrate UEditor Plus with React

    master

    To use UEditor Plus in a React project:

    1. Install the wrapper: npm i --save react-ueditor-wrap.
    2. Copy the dist-min directory from UEditor Plus to your project's public/static/UEditorPlus/ directory.
    3. Use the RcUeditor component.
    import RcUeditor from 'react-ueditor-wrap';

function App() {
    const hanldeChage = (value) => {
        console.log('RcUeditor', value);
    }
    return (
        <div className="App">
            <div style={{margin: '0 auto', maxWidth: '800px'}}>
                <RcUeditor
                    value={'<p>Hello UEditorPlus</p>'}
                    ueditorUrl={'/static/UEditorPlus/ueditor.all.js'}
                    ueditorConfigUrl={'/static/UEditorPlus/ueditor.config.js'}
                    editorConfig={{
                        initialFrameWidth: '100%',
                        serverUrl: '/api/path/to/server',
                        UEDITOR_HOME_URL: '/static/UEditorPlus/',
                        UEDITOR_CORS_URL: '/static/UEditorPlus/',
                    }}
                    onChange={hanldeChage}/>
            </div>
        </div>
    );
}
export default App;

  10. Use UEditor Plus with Vanilla JavaScript

    master

    To use UEditor Plus in a standard HTML environment, include the ueditor.config.js and ueditor.all.js files from the library, then initialize the editor using UE.getEditor.

    <script id="editor" type="text/plain" style="height:300px;"></script>
<script type="text/javascript" src="/path/to/UEditorPlus/ueditor.config.js"></script>
<script type="text/javascript" src="/path/to/UEditorPlus/ueditor.all.js"></script>
<script>
    var ue = UE.getEditor('editor', {
        // ... more configuration
    });
</script>