Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More
Socket
Sign inDemoInstall
Socket

@ckeditor/ckeditor5-editor-inline

Package Overview
Dependencies
Maintainers
1
Versions
764
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@ckeditor/ckeditor5-editor-inline

Inline editor implementation for CKEditor 5.

  • 31.0.0
  • Source
  • npm
  • Socket score

Version published
Weekly downloads
264K
increased by7.8%
Maintainers
1
Weekly downloads
 
Created

What is @ckeditor/ckeditor5-editor-inline?

@ckeditor/ckeditor5-editor-inline is a package that provides an inline editor for CKEditor 5. This editor allows users to edit content directly within the context of the page, without the need for a separate editing interface. It is particularly useful for applications where a seamless editing experience is desired.

What are @ckeditor/ckeditor5-editor-inline's main functionalities?

Basic Inline Editor Initialization

This code initializes a basic inline editor on an HTML element with the ID 'editor'. It demonstrates how to create an instance of the inline editor and handle the promise returned by the create method.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');

InlineEditor.create(document.querySelector('#editor'))
    .then(editor => {
        console.log('Editor was initialized', editor);
    })
    .catch(error => {
        console.error(error.stack);
    });

Adding Plugins

This code demonstrates how to initialize the inline editor with additional plugins such as Bold and Italic. It also configures the toolbar to include buttons for these plugins.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');
const Essentials = require('@ckeditor/ckeditor5-essentials/src/essentials');
const Bold = require('@ckeditor/ckeditor5-basic-styles/src/bold');
const Italic = require('@ckeditor/ckeditor5-basic-styles/src/italic');

InlineEditor.create(document.querySelector('#editor'), {
    plugins: [ Essentials, Bold, Italic ],
    toolbar: [ 'bold', 'italic' ]
})
.then(editor => {
    console.log('Editor with plugins was initialized', editor);
})
.catch(error => {
    console.error(error.stack);
});

Custom Configuration

This code shows how to initialize the inline editor with a custom configuration. It sets up a toolbar with specific items, changes the language to Spanish, and adds a placeholder text.

const InlineEditor = require('@ckeditor/ckeditor5-editor-inline/src/inlineeditor');

InlineEditor.create(document.querySelector('#editor'), {
    toolbar: {
        items: [ 'bold', 'italic', 'link' ]
    },
    language: 'es',
    placeholder: 'Type your text here...'
})
.then(editor => {
    console.log('Custom configured editor was initialized', editor);
})
.catch(error => {
    console.error(error.stack);
});

Other packages similar to @ckeditor/ckeditor5-editor-inline

Keywords

FAQs

Package last updated on 26 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap
  • Changelog

Packages

npm

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc