Code Monkey home page Code Monkey logo

markdownfield's Introduction

MarkdownField

CircleCI codecov

This module introduces a new DB field type Markdown & Markdown Editor. It uses github style Markdown style. And uses the simple markdown editor.

https://github.com/sparksuite/simplemde-markdown-editor

https://github.com/cebe/markdown

The module is still under development, but soon will be ready, with link popups and image selectors.

Installation

Use composer

composer require silverstripers/markdown dev-master

Basic Usage

To use the markdown DB field in your data objects the basic code would look like


class MyDataClass extends DataObject
{

    private static $db = [
		'MarkdownContent'		=> 'MarkdownText'
	];

}

MarkdownText knows to add a markdown editor for your fields, but if you need to manually specify the type of field use

public function getCMSFields()
{
    $fields = parent::getCMSFields();

    $fields->addFieldsToTab('Root.Sidebar', [
        \SilverStripers\markdown\forms\MarkdownEditorField::create('MarkdownContent', 'Content'),
    ]);

    return $fields;
}

Force all the fields to use Markdown

If you are looking to replace all the fields of HTMLText to markdown use the following configs in the config.yml.

This should override any instances of the HTMLText replacements with MarkdownText

---
Name: myconfigs
After:
  - '#corefieldtypes'
---
SilverStripe\Core\Injector\Injector:
  HTMLText:
    class: SilverStripers\markdown\db\MarkdownText

Add preview styles

You can add your own CSS styles to the editor previews. This would let the users to check how their content will be displayed before they save in.

To achived this create a css file in mysite/css/ and name it as editor.css.

Your CSS rules have to be nested in a class so it wont affect other areas of the CMS.

.markdown-preview {
    background-color: white;
    padding: 20px;
    font-size: 20px;
}

.markdown-preview h1 {
    font-size: 30px;
}

If you are using a separate config and wanting to add styles to that EditorConfig you just add a new class name. This is possible because the fields adds the EditorConfig's identifier on to the preview pane. The below is an example for the default configs.

.markdown-preview.default {
    background-color: white;
    padding: 20px;
    font-size: 14px;
    line-height: 20px;
}

.markdown-preview.default h1 {
    font-size: 24px;
    line-height: 30px;
}

markdownfield's People

Contributors

firesphere avatar fonsekaean avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar

markdownfield's Issues

Image button not working

Version: 2.0.0
CMS Version 4.3.0
Tested browser: chrome/firefox

Error Description:
Clicking on the "insert image" or "embed media" button throws a javascript error

vendor.js?m=1544502093:1 Uncaught Error: Could not find "store" in either the context or props of "Connect(t)". Either wrap the root component in a <Provider>, or explicitly pass "store" as a prop to "Connect(t)".
    at o (vendor.js?m=1544502093:1)
    at new a (vendor.js?m=1544502093:1)
    at c._constructComponentWithoutOwner (vendor.js?m=1544502093:1)
    at c._constructComponent (vendor.js?m=1544502093:1)
    at c.mountComponent (vendor.js?m=1544502093:1)
    at Object.mountComponent (vendor.js?m=1544502093:1)
    at c.performInitialMount (vendor.js?m=1544502093:1)
    at c.mountComponent (vendor.js?m=1544502093:1)
    at Object.mountComponent (vendor.js?m=1544502093:1)
    at c.performInitialMount (vendor.js?m=1544502093:1)

I'm running in to the error below, any clue?

I have enabled to have Content always be a MarkDown Field, and get this error (I will investigate further later on, not really have time right now.)

Call to a member function getAttributes() on string in /vagrant/website/vendor/silverstripers/silverstripe-markdown/src/forms/MarkdownEditorField.php on line 64

Docs required

Can you add a screenshot of what it looks like in the CMS to the readme.md?

Feature request: Allow more config options than just for the toolbar

I could extend the Config class to have my own toolbar config, or to disable the toolbar, however, other options such as for the status bar or the spell checker are one level above the toolbar in the simpleMDE configuration in javascript.

In the file vendor/silverstripers/markdown/client/src/components/MarkdownEditorField/MarkdownEditorField.js on line 157 every other option such as spellChecker: false won't reach the simpleMDE options.

It would be nice to be able to pass higher level configuration options as defined here:
https://github.com/sparksuite/simplemde-markdown-editor#configuration

Compatibility with newer SS 4.x

Version 2.0.0 has framework requirements at ^4, in master branch it's 4.1.x-dev with a commit saying it's not compatible with SS 4.2.

Would it be possible to perhaps release a new major with the constraint relaxed back to ^4 or requiring ^4.3 or higher? Do we know what the issue was back in the day?

No unit tests

There are no unit tests. It would be good to get those up to improve on code quality and consistency.

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.