CKEditor SDK - index

Inline Editor Documentation

Inline Editing allows you to edit any element on the page in-place. Inline editor provides a real WYSIWYG experience "out of the box", because unlike in classic editor, there is no <iframe> element surrounding the editing area. The CSS styles used for editor content are exactly the same as on the target page where this content is rendered!

Inline Editing Enabled by Code

Press the "Start editing" button below. An editor will be created using the CKEDITOR.inline() method with config.startupFocus set to true.

Massive Inline Editing

Inline editor is a perfect candidate for modern applications where the user can seamlessly switch between viewing and a page and editing it and where the data is saved on the fly. It is really lightweight, so you can use as many editor instances as you need without worrying about the performance.

Click inside any of the elements below to start editing it in-place!

Fusce vitae porttitor

Lorem ipsum dolor sit amet dolor. Duis blandit vestibulum faucibus a, tortor.

Proin nunc justo felis mollis tincidunt, risus risus pede, posuere cubilia Curae, Nullam euismod, enim. Etiam nibh ultricies dolor ac dignissim erat volutpat. Vivamus fermentum nisl nulla sem in metus. Maecenas wisi. Donec nec erat volutpat.

Fusce vitae porttitor a, euismod convallis nisl, blandit risus tortor, pretium. Vehicula vitae, imperdiet vel, ornare enim vel sodales rutrum

Libero nunc, rhoncus ante ipsum non ipsum. Nunc eleifend pede turpis id sollicitudin fringilla. Phasellus ultrices, velit ac arcu.

Pellentesque nunc. Donec suscipit erat. Pellentesque habitant morbi tristique ullamcorper.

Mauris mattis feugiat lectus nec mauris. Nullam vitae ante.

Integer condimentum sit amet

Aenean nonummy a, mattis varius. Cras aliquet. Praesent magna non mattis ac, rhoncus nunc, rhoncus eget, cursus pulvinar mollis.

Proin id nibh. Sed eu libero posuere sed, lectus. Phasellus dui gravida gravida feugiat mattis ac, felis.

Integer condimentum sit amet, tempor elit odio, a dolor non ante at sapien. Sed ac lectus. Nulla ligula quis eleifend mi, id leo velit pede cursus arcu id nulla ac lectus. Phasellus vestibulum. Nunc viverra enim quis diam.

Praesent wisi accumsan sit amet nibh

Donec ullamcorper, risus tortor, pretium porttitor. Morbi quam quis lectus non leo.

Integer faucibus scelerisque. Proin faucibus at, aliquet vulputate, odio at eros. Fusce gravida, erat vitae augue. Fusce urna fringilla gravida.

In hac habitasse platea dictumst. Praesent wisi accumsan sit amet nibh. Maecenas orci luctus a, lacinia quam sem, posuere commodo, odio condimentum tempor, pede semper risus. Suspendisse pede. In hac habitasse platea dictumst. Nam sed laoreet sit amet erat. Integer.

CKEditor logo

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi.

Nullam laoreet vel consectetuer tellus suscipit

  • Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis.
  • Fusce porttitor, nulla quis turpis. Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi.
  • Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.

Quisque justo neque, mattis sed, fermentum ultrices posuere cubilia Curae, Vestibulum elit metus, quis placerat ut, lectus.

Nullam laoreet vel, consectetuer tellus suscipit ultricies, hendrerit wisi. Ut sagittis, nunc libero, egestas consequat lobortis velit rutrum ut, faucibus turpis. Fusce porttitor, nulla quis turpis.

Donec odio nec velit ac nunc sit amet, accumsan cursus aliquet. Vestibulum ante sit amet sagittis mi. Sed in nonummy faucibus turpis. Mauris eget tellus. Donec non felis. Nam eget dolor. Vestibulum enim. Donec.

Related Features