https://github.com/mendixlabs/ckeditorformendix

A new WYSIWYG editor for Mendix that also has the ability to create "MicroFlow" links in your HTML output.
https://github.com/mendixlabs/ckeditorformendix

javascript mendix-widget

Last synced: 8 months ago
JSON representation

A new WYSIWYG editor for Mendix that also has the ability to create "MicroFlow" links in your HTML output.

• Host: GitHub
• URL: https://github.com/mendixlabs/ckeditorformendix
• Owner: mendixlabs
• License: apache-2.0
• Created: 2015-01-15T10:55:01.000Z (about 11 years ago)
• Default Branch: master
• Last Pushed: 2022-12-02T02:46:22.000Z (about 3 years ago)
• Last Synced: 2024-04-13T17:55:34.555Z (almost 2 years ago)
• Topics: javascript, mendix-widget
• Language: JavaScript
• Homepage: https://appstore.home.mendix.com/link/app/1715/Mendix/CKEditor-For-Mendix
• Size: 58.4 MB
• Stars: 2
• Watchers: 18
• Forks: 21
• Open Issues: 33
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# CKEditor for Mendix [![Support](https://img.shields.io/badge/Mendix%20Support%3A-Community-green.svg)](https://docs.mendix.com/appstore/general/app-store-content-support#community-category)

This [widget](https://appstore.home.mendix.com/link/app/1715/Mendix/CKEditor-For-Mendix) gives you a full version of the CKEditor with an extra button that allows you to create microflow links inside your HTML output.

![test](https://github.com/mendix/CKEditorForMendix/raw/master/assets/mendix_button.png)

Current [CKEditor version](http://ckeditor.com/whatsnew): 4.10.0

## Contributing

For more information on contributing to this repository visit [Contributing to a GitHub repository](https://world.mendix.com/display/howto50/Contributing+to+a+GitHub+repository)!

## Typical usage scenario

Use this widget to add a full WYSIWYG editor for your entity attributes. This version has the ability to add links to HTML that can run microflows when clicked uppon.

## Description

The CKEditor widget comes with the CKEditor viewer. This viewer will enable the posibility to reformat links to microflow links.

- The viewer needs an entity and attribute where it can get the HTML code.

- You can style the link as a button or just text.

- Within the CKEditor widget configure labels that can be placed with the mendix link button.

- These labels can be configured in the viewer to execute a microflow.

- The microflow will get the entity from the viewer widget.

### Example of the entire editor

![test](https://github.com/mendix/CKEditorForMendix/raw/master/assets/ckeditor.png)

### Example of the end result in mendix.

![test](https://github.com/mendix/CKEditorForMendix/raw/master/assets/example_result.png)

### Example of someone clicking the button.

![test](https://github.com/mendix/CKEditorForMendix/raw/master/assets/microflow_executed.png)

## Images

The CKEditor comes with two modes to handle images:

- Paste them as a base64 string ([Inline images](https://en.wikipedia.org/wiki/Data_URI_scheme))

- Upload them to Mendix

You can set this mode using the 'Images' tab in your widget configuration in the Modeler

![images](https://github.com/mendix/CKEditorForMendix/raw/master/assets/images.png)

### Mode 'Upload'

- Make sure the Entity is inherited from System.Image. You can use a reference, in that case the context will set references to the uploaded images.

- You can set an XPath constraint on the images in the Image browser that you can reach in the CKEditor by clicking ![imagebrowser](https://github.com/mendix/CKEditorForMendix/raw/master/assets/imagebrowser.png). This Image browser is only enabled when you have set Mode to 'Upload' and added an Entity

- Upload only works when you drag an image from your explorer (for example Windows Explorer) directly in the editor (so Copy + Paste does not work due to browser inconsistensies)

## Behaviour

The widget has a few options that you can set as default behaviour in the CKEditor

![behaviour](https://github.com/mendix/CKEditorForMendix/raw/master/assets/behaviour.png)

- Entermode: Default behaviour for the editor when pressing Enter. This is Paragraph by default

- Shift-Entermode: Default behaviour for the editor when pressing Shift + Enter. For example, in Word, when you are working in a list and you want to add an extra rule to your list-item, you use Shift+Enter. By default this should be BR.

- Autoparagraph: It is recommended to leave this to true. In the CKEditor you can turn it off, but it is not recommended.

## Embedding

The widget supports embedding of video's. This can be used by clicking ![imagebrowser](https://github.com/mendix/CKEditorForMendix/raw/master/assets/oembed.png). It will automatically create an embed code when you enter the url of the a video (for example YouTube or Vimeo). For more details on what is supported, please see the [plugin page](http://ckeditor.com/addon/oembed)