Code Monkey home page Code Monkey logo

yii2-ckeditor's Introduction

CKEditor widget for Yii 2

This extension renders a CKEditor widget for Yii framework 2.0.

Latest Stable Version Total Downloads License Build Status

Installation

Install extension through composer:

composer require alexantr/yii2-ckeditor

CKEditor version

This extension works with stable standard-all build. The standard-all build includes all official CKSource plugins with only those from the standard installation preset compiled into the ckeditor.js file and enabled in the configuration.

Note: Since version 2.0 the extension loads CKEditor from CDN.

Usage

The following code in a view file would render a CKEditor widget:

<?= alexantr\ckeditor\CKEditor::widget(['name' => 'attributeName']) ?>

Configuring the CKEditor options should be done using the clientOptions attribute:

<?= alexantr\ckeditor\CKEditor::widget([
    'name' => 'attributeName',
    'clientOptions' => [
        'extraPlugins' => 'autogrow,colorbutton,colordialog,iframe,justify,showblocks',
        'removePlugins' => 'resize',
        'autoGrow_maxHeight' => 900,
        'stylesSet' => [
            ['name' => 'Subscript', 'element' => 'sub'],
            ['name' => 'Superscript', 'element' => 'sup'],
        ],
    ],
]) ?>

If you want to use the CKEditor widget in an ActiveForm, it can be done like this:

<?= $form->field($model, 'attributeName')->widget(alexantr\ckeditor\CKEditor::className()) ?>

Using global configuration (presets)

To avoid repeating identical configuration in every widget you can set global configuration in @app/config/ckeditor.php. Options from widget's clientOptions will be merged with this configuration.

You can change default path with presetPath attribute:

<?= alexantr\ckeditor\CKEditor::widget([
    'name' => 'attributeName',
    'presetPath' => '@backend/config/my-ckeditor-config.php',
]) ?>

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.