PHPackages nnagornyy/gtd.vueeditor - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Utility & Helpers](/categories/utility) 4. / 5. nnagornyy/gtd.vueeditor ActiveBitrix-module[Utility & Helpers](/categories/utility) nnagornyy/gtd.vueeditor ======================= Блочный редактор контента для 1с-bitrix 1.0.0(3y ago)347914[18 issues](https://github.com/nnagornyy/gtd.vueeditor/issues)[17 PRs](https://github.com/nnagornyy/gtd.vueeditor/pulls)MITPHPPHP >=7.4.0 Since Aug 8Pushed 1y agoCompare [ Source](https://github.com/nnagornyy/gtd.vueeditor)[ Packagist](https://packagist.org/packages/nnagornyy/gtd.vueeditor)[ Docs](https://github.com/nnagornyy/gtd.vueeditor)[ RSS](/packages/nnagornyy-gtdvueeditor/feed)WikiDiscussions master Synced 3d ago READMEChangelog (1)Dependencies (1)Versions (64)Used By (0) ### TO DO [](#to-do) ##### Цели \[модуль\] [](#цели-модуль) - Проверка установленной ноды и ее версии из админки - Запуск билда из админки и парсинг данных (все ли блоки найдены) - Брать блоки из других мест, например из /local/vueeditor/ для отделения модуля и блоков чисто для проекта - Свойство для инфоблоков - Свойство для пользовательских полей - Блок текста с редактором - выбрать редактор ### Блоки [](#блоки) на 22.12.2021 - vtext - Блок текста с виз.редактором quilljs - vheader - Заголовок с выбором размера - vquote - Текстовое поле для цитаты - documents - Загрузка документов с названием и описанием - gallery - Галерея изображений с названиями и описаниями - youtubeVideo - Видео с youtube (по ссылке) - vtable - Таблица - vimage - Загрузка изображения ### Регистрация своих блоков [](#регистрация-своих-блоков) каждый блок должен иметь файл конфигурации, наименование по принципу blockName.config.json пример конфига ``` { "name": "Строка", "handler" : "\Gtd\Editor\Handler\String" "conf" : { "foo": "bar", "other": "some", "array": [ "one", "two", "three" ] } } ``` name - используется для текстового представления названия блока handler - класс для обработки данных перед выводом в публичную часть conf - пробрасывается в ваш блок #### Ссылки [](#ссылки) [webpack/webpack#6680](https://github.com/webpack/webpack/issues/6680) Применение ---------- [](#применение) Это модуль для 1С-Битрикс. В нём содержится - vue-компонент редактора на typescript со сборкой через webpack (папка app) - код для подключения компонента как типа свойств инфоблока и uf-поля - бэк для некоторых блоков, например сохранение файлов (папка service) ### Установка [](#установка) ``` composer require nnagornyy/gtd.vueeditor ``` После этого **установить модуль в админке битрикса** через Установленные решения. После установки должна появиться папка `/local/vueeditor` Подключите модуль в init.php `\Bitrix\Main\Loader::includeModule('gtd.vueeditor');` (он подключит js и стили редактора). ### Добавление блока [](#добавление-блока) При сборке блоки из `/local/vueeditor` копируются в `модуль/app/src/ext_block` При разработке блоков можно делать правки в самом ext\_block, но потом обязательно скопировать в /local/vueeditor и закоммитить. Структура блока: папка = код названия блока, конфиг = код.config.json, компонент = код.vue В компоненте в data обязательно должно быть поле `editorData`, информация из него будет сохраняться как значение блока. В качестве примера можно скопировать vheader со своим названием и делать на основе него. Префикс v в некоторых готовых блоках нужен только для того, чтобы они не пересекались с существующими тегами. Пример компонента: ``` export default { name: "simpleHeader", data(){ return{ editorData: '', } } } ``` Если инициируем редактор вручную (например при использовании как вью-компонент), добавляем название нового блока в параметр allowBlock конструктора. ### Сборка [](#сборка) Изнутри модуля ``` cd local/modules/gtd.vueeditor/app yarn build-prod ``` Или можно добавить команду сборки снаружи (пример для `/local/package.json`) ``` "scripts": { "build:editor": "cd modules/gtd.vueeditor/app; yarn; yarn build-prod", "dev:editor": "cd modules/gtd.vueeditor/app; yarn; yarn build-dev" }, ``` Артефакты сборки сохраняются в `/local/vueeditor_assets/` Если вы коммитите артефакты - нужно руками добавлять папку в гит после пересборки с новыми блоками. Если вы собираете налету - добавьте папку в гитигнор. ### Использование как vue-компонента [](#использование-как-vue-компонента) Конструктор блочного редактора существует как глобальная переменная `document.vueeditor(value, inputName, allowBlock, appId)`. Можно добавить компонент-обертку в свой проект, которая будет инициировать объект редактора. Пример: ``` export default { name: "editor", props:{ value:{ type: Array, default: function(){ return []; } }, allowBlocks:{ type: Array, default: function(){ return []; } } }, data(){ return {} }, mounted() { const editor = new document.vueeditor(JSON.parse(JSON.stringify(this.value)) , 'someName', this.allowBlocks, 'editor'); editor .onValueChange((value) => { this.$emit('input', JSON.parse(JSON.stringify(value))); }) .initEditor(); } } ``` А в компоненте, где используется блочный редактор, добавляем ``` ... import Editor from 'path2component/editor.vue'; ... components: { Editor }, ... editorBlocks: [ 'vtext', 'documents', 'vquote', 'someNewBlock' ], ``` ### Использование как свойства ИБ [](#использование-как-свойства-иб) // todo ### Использование как UF-поля [](#использование-как-uf-поля) // todo ### Добавление обработчика на получение данных [](#добавление-обработчика-на-получение-данных) При получении данных из БД можно воспользоваться хендлерами блоков и обработать данные прежде, чем вывести их. **Важно!** В сам блочный редактор должны идти необработанными данные, обработка нужна для вывода в публичке. 1. Используем парсер, чтобы получить обработанные данные блока ``` public function getContent(): array { \Bitrix\Main\Loader::includeModule('gtd.vueeditor'); $arr = $this->getContentArrayFromDB(); $editor = new \Gtd\VueEditor\Block\BlockParser($arr, $_SERVER['DOCUMENT_ROOT'].'/local/vueeditor/'); $res = $editor->processingBlock(); return $res; } ``` Первый параметр - десериализованный массив из БД как он пришёл из блочного редактора. Второй параметр (необязательный) - где искать конфиги для кастомных блоков (по умолчанию ищет в модуль/app/src/ext\_block). Путь к конфигам нужен, если вы коммитите артефакты и не запускаете сборку на бою. Тогда компоненты из /local/vueeditor **не** попадут в модуль/app/src/ext\_block на бою, и скрипт не найдет конфиги в папке по умолчанию. 1. Добавляем класс, имплементирующий интерфейс `\Gtd\VueEditor\Block\Handler` 2. Добавляем путь к классу в конфиг блока. например, в myblock.conj.json: `"handler": "\\My\\Module\\Blocks\\MyBlock"` 3. Реализуем методы setBlock(\\Gtd\\VueEditor\\Block\\Block $block) и getData() Можно скопировать их из дефолтного хендлера `\Gtd\VueEditor\Block\DefaultHandler` в `gtd.vueeditor/lib/block/defaulthandler.php` Метод setBlock получает блок как есть, здесь можно обработать данные или просто записать их в переменную класса, чтобы потом использовать в getData. Метод getData должен вернуть данные, которые попадут в поле `content` блока и будет потом использовать при выводе. ### Пресеты [](#пресеты) // todo ### Health Score 31 — LowBetter than 68% of packages Maintenance8 Infrequent updates — may be unmaintained Popularity21 Limited adoption so far Community14 Small or concentrated contributor base Maturity69 Established project with proven stability Bus Factor1 Top contributor holds 87.8% of commits — single point of failure How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~18 days Recently: every ~78 days Total 46 Last Release 1297d ago Major Versions 0.38.1 → 1.0.02022-10-24 PHP version history (2 changes)0.2.0PHP >=7.0.0 0.32.3PHP >=7.4.0 ### Community Maintainers ![](https://www.gravatar.com/avatar/c75fd54c926c6b835a6b6cd92514d60d55a285d35847b9f22aefcc7ad5ef9ae7?d=identicon)[nnagornyy](/maintainers/nnagornyy) --- Top Contributors [![nnagornyy](https://avatars.githubusercontent.com/u/20841535?v=4)](https://github.com/nnagornyy "nnagornyy (86 commits)")[![lapayshow](https://avatars.githubusercontent.com/u/85249150?v=4)](https://github.com/lapayshow "lapayshow (6 commits)")[![AnastasiyaDefa](https://avatars.githubusercontent.com/u/69621153?v=4)](https://github.com/AnastasiyaDefa "AnastasiyaDefa (3 commits)")[![damirBeta](https://avatars.githubusercontent.com/u/83029091?v=4)](https://github.com/damirBeta "damirBeta (3 commits)") --- Tags bitrixeditorvueeditor ### Embed Badge ![Health badge](/badges/nnagornyy-gtdvueeditor/health.svg) ``` [![Health](https://phpackages.com/badges/nnagornyy-gtdvueeditor/health.svg)](https://phpackages.com/packages/nnagornyy-gtdvueeditor) ``` ### Alternatives [bitrix-expert/bbc Bitrix basis components 10242.9k1](/packages/bitrix-expert-bbc)[bitrix-expert/bbc-module Module with classes for the basis components 1951.8k1](/packages/bitrix-expert-bbc-module)[andreyryabin/sprint.editor Редактор для контент-менеджеров 485.6k](/packages/andreyryabin-sprinteditor)[samuell/contenteditor-plugin Allows you to edit content files on the front-end pages. 403.3k](/packages/samuell-contenteditor-plugin)[andreyryabin/sprint.options Content options for 1C-Bitrix 185.7k](/packages/andreyryabin-sprintoptions) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)