Git Product home page Git Product logo

contenteditor-plugin's Introduction

Content Editor for OctoberCMS Content Editor for OctoberCMS

Edit content from front-end.

http://octobercms.com/plugin/samuell-contenteditor

How to use it? It`s simple.

  • Drop the Content Editor component to a CMS page.
  • Check if you have {% framework %} and {% scripts %} inside layout for working ajax requests and {% styles %} for additional css
  • Use this code in your page code and link the editor to a content file or set name to autocreate new file

Simple example:

{% component 'contenteditor' file="filename_in_content.htm" %}
Properties
  • file - Content block filename to edit, optional. If doesnt exists it will autocreate
  • fixture - Fixed name for content block, useful for inline texts (headers, spans...)
  • tools - List of enabled tools, comma separated (for all default tools use * or leave empty to get all tools defined in settings of Content Editor)
  • class - Class for element, mostly useful for fixtures

Example:

{% component 'contenteditor' file="filename_in_content.htm" fixture="h3" tools="bold,italic" class="my-class" %}
Tools list
  • bold => Bold (b)
  • italic => Italic (i)
  • link => Link (a)
  • small => Small (small)
  • align-left => Align left
  • align-center => Align center
  • align-right => Align right
  • heading => Heading (h1)
  • subheading => Subheading (h2)
  • subheading3 => Subheading3 (h3)
  • subheading4 => Subheading4 (h4)
  • subheading5 => Subheading5 (h5)
  • paragraph => Paragraph (p)
  • unordered-list => Unordered list (ul)
  • ordered-list => Ordered list (ol)
  • table => Table
  • indent => Indent
  • unindent => Unindent
  • line-break => Line-break (br)
  • image => Image upload
  • video => Video
  • preformatted => Preformatted (pre)

Inspired by Editable plugin and using Content tools editor http://getcontenttools.com.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.