Giter Site home page Giter Site logo

ewymeditor's Introduction

EWYMeditor

EWYMeditor is an extension for Yii framework. This extension is a wrapper for WYMeditor which is a web-based WYSIWYM (What You See Is What You Mean) XHTML editor (not WYSIWYG).

Requirements

  • Yii 1.1 or above (tested on 1.1.8)
  • jQuery
  • jQuery UI (for resizable plugin)

Installation

Move EWYMeditor folder in your applications extensions folder (default: protected/extensions).

Using extension

There are three ways to use this extension.

Least obstructive (great if you want to test this extension, you don't want change your view file or you have more than one input to apply this extension to) way is:

<?php $this->widget( 'ext.EWYMeditor.EWYMeditor', array(
  'target' => 'textarea',
)); ?>

Or you can use a model to create textarea:

<?php $this->widget( 'ext.EWYMeditor.EWYMeditor', array(
  'model' => $model, // Your model
  'attribute' => 'description', // Attribute for textarea
)); ?>

Or if you want to add textarea without model:

<?php $this->widget( 'ext.EWYMeditor.EWYMeditor', array(
  'name' => 'nameOfYourInput',
)); ?>

Since the wymEditor basically hides the textarea it is working on, it needs to synchronize data before submitting. By default, wymEditor therefore relies on a marker: its documentation instructs you to add the css class wymupdate to your submit button.

To get rid of this marker, the EWYMeditor widget overrides this default with a rule, that will select the submit button of the form containing the wymEditor.

If this is not working for you, you can provide your own selector as option:

<?php echo CHtml::submitButton($model->isNewRecord ? 'Submit' : 'Save', array('id' => 'mySubmitButton')); ?>
<?php $this->widget( 'ext.EWYMeditor.EWYMeditor', array(
  'updateSelector' => '#mySubmitButton',
)); ?>

Configuration

You can change some default settings:

<?php $this->widget( 'ext.EWYMeditor.EWYMeditor', array(
  'target' => 'textarea',
  'plugins' => array( 'fullscreen', 'hovertools', 'tidy', 'resizable' ),
  'options' => array(
    'skin' => 'silver',
    // Check http://trac.wymeditor.org/trac/wiki/0.5/Customization for available options
  ),
)); ?>
  • target is jQuery selector for which elements to apply WYMeditor.
  • plugins a list of plugins to add to WYMeditor. Allowed options: fullscreen, hovertools, tidy, resizable. You can provided an array or comma delimited string (requires additional processing to convert to an array) for plugins parameter. If you use plugins and provide your own postInit through options, you will need to initialize plugins yourself.
  • options sets the options for WYMeditor. All available options can be found on WYMeditor customization.

Resources

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.