Coder Social home page Coder Social logo

hdpero / silverstripe-shortcodable Goto Github PK

View Code? Open in Web Editor NEW

This project forked from sheadawson/silverstripe-shortcodable

0.0 2.0 0.0 519 KB

Provides a GUI for CMS users to insert Shortcodes into the HTMLEditorField + an API for developers to define Shortcodable DataObjects and Views.

License: MIT License

PHP 60.84% CSS 1.28% JavaScript 37.87%

silverstripe-shortcodable's Introduction

SilverStripe Shortcodable 4

Scrutinizer Code Quality

Screenshot

Provides a GUI for CMS users to insert Shortcodes into the HTMLEditorField + an API for developers to define Shortcodable DataObjects and Views. This allows CMS users to easily embed and customise DataObjects and templated HTML snippets anywhere amongst their page content. Shortcodes can optionally be represented in the WYSIWYG with a custom placeholder image.

Requirements

  • SilverStripe 4 +

See 3.x branch/releases for SilverStripe SS 3.5 compatibility See 2.x branch/releases for SilverStripe SS 3.1 - 3.4 compatibility

Installation

Install via composer, run dev/build

composer require sheadawson/silverstripe-shortcodable

Configuration

See this gist for a well documented example of a Shortcodable ImageGallery to get you started. This example is for a subclass of DataObject. If your shortcodable object doesn't need it's own database record, you can use the same example but use ViewableData as the parent class.

TinyMCE block elements

In SilverStripe 3 shortcodes tend to get wrapped in paragraph elements, which is a problem if your shortcode will be rendered as a block element. To get around this you can flag shortcodable classes as block elements with a config setting. If you don't want to replace the paragraph tag with a div this can be disabled as well.

MyShortcodableClass:
  shortcodable_is_block: true
  disable_wrapper: true

CMS Usage

Once installed a new icon will appear in the CMS HTMLEditor toolbar. It looks like this: icon

Clicking the toolbar will open a popup that allows you to insert a shortcode into the editor.

Highlighting an existing shortcode tag in the editor before clicking the shortcode icon will open the popup to allow editing of the selected shortcode tag.

Double clicking a shortcode placeholder in the editor will also open the popup to allow editing of the shortcode.

Upgrading from 1.x

Shortcodable 2.0 has an improved method for applying Shortcodable to DataObjects. We no longer use an interface, as this didn't allow for Shortcodable to be applied to core classes such as File, Member, Page etc without changing core code. Instead, Shortcodable is applied to your Objects via yml config. Some methods have also changed from statics to normal methods. See updated examples below.

silverstripe-shortcodable's People

Contributors

sheadawson avatar jonom avatar micschk avatar oilee80 avatar satrun77 avatar spekulatius avatar kinglozzer avatar ec8or avatar neumes avatar wernerkrauss avatar

Watchers

James Cloos avatar Petar Simic avatar

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.