Skip to content

Commit

Permalink
Merge pull request #216 from Flexberry/add-ember-flexberry-tinymce-ar…
Browse files Browse the repository at this point in the history
…ticle

Статья про ember-flexberry-tinymce
  • Loading branch information
s-andrey authored Apr 26, 2024
2 parents 68a7134 + 9c0815e commit d6d513f
Show file tree
Hide file tree
Showing 3 changed files with 70 additions and 0 deletions.
10 changes: 10 additions & 0 deletions _data/sidebars/flexberry-ember-3_sidebar.yml
Original file line number Diff line number Diff line change
Expand Up @@ -180,3 +180,13 @@ entries:
output: web, pdf

folderitems:

- title: Additional addons
title_ru: Дополнительные аддоны
output: web, pdf

folderitems:
- title: Ember flexberry tinymce
title_ru: Ember flexberry tinymce
url: /ef3_ember_flexberry_tinymce.html
output: web, pdf
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
@@ -0,0 +1,60 @@
---
title: Аддон Ember flexberry tinymce
sidebar: flexberry-ember-3_sidebar
keywords: Ember Flexberry Tinymce
toc: true
permalink: ru/ef3_ember_flexberry_tinymce.html
lang: ru
summary: Описание аддона Ember flexberry tinymce
---

## Описание аддона

`ember-flexberry-tinymce` - аддон для [ember-flexberry](ef3_landing_page.html), позволяющий встроить в свое приложение WYSIWYG HTML редактор.

WYSIWYG (является аббревиатурой от англ. What You See Is What You Get, «что видишь, то и получишь») — свойство прикладных программ или веб-интерфейсов, в которых содержание отображается в процессе редактирования. Также широко используется понятие «визуальный редактор».

Редактор представляет из себя поле для ввода текста и функциями его редакирования, а также включает в себя получившуюся html разметку. Выглядит это следующим образом:

![Example](/images\pages\products\flexberry-ember\3.x\components\ember-flexberry-tinymce.png)

## Установка

Установить аддон в свое ember приложение можно командой:

```cmd
ember install ember-flexberry-tinymce
```

Также нужно установить `broccoli-funnel@^3.0.8` и `tinymce@^6`, выполнив следующие команды:

```bash
npm install broccoli-funnel@^3.0.8
npm install tinymce@^6
```

Далее, нужно добавить изменения в файл `ember-cli-build.js`:

```js
const Funnel = require('broccoli-funnel');

module.exports = function(defaults) {
let app = new EmberAddon(defaults, {
// Добавьте эти опции для включения TinyMCE
autoImport: {
webpack: {
externals: { tinymce: 'tinymce' },
},
},
});

app.import('node_modules/tinymce/tinymce.min.js');

const tinymceTree = new Funnel('node_modules/tinymce/', {
include: ['icons/**/*', 'models/**/*', 'skins/**/*', 'themes/**/*', 'plugins/**/*', 'langs/**/*'],
destDir: '/assets'
});

return app.toTree(tinymceTree);
};
```

0 comments on commit d6d513f

Please sign in to comment.