Кнопка разрыва страницы / Пример как сделать свою кнопку

Added by Лев Самойленко almost 2 years ago

Не планируете сделать?


Replies (6)

RE: Кнопка разрыва страницы? - Added by Troex Nevelin almost 2 years ago

Даже если мы сделаем такую кнопку, то что должна она делать? Вставлять некую магическую строку которую вы будите потом парсить - это уже выходит за рамки возможностей elRTE. Но сами вы запросто можете дописать кнопку которая будет вставлять необходбимый вам разрыв страницы.

RE: Кнопка разрыва страницы? - Added by Лев Самойленко almost 2 years ago

Да, вставляется пустой див с определённым классом (посмотрите например как это сделано в CKEditor).
Думаю этот функционал пригодился бы многим.

RE: Кнопка разрыва страницы? - Added by Troex Nevelin almost 2 years ago

Написал вам такую кнопку, надеюсь в дальнейшем будет понятнее как дописывать такой простой функционал, а главное не нужно изменять код самого elRTE.

1 <script src="js/elrte.min.js" type="text/javascript" charset="utf-8"></script>
2 <script src="js/pagebreak.js" type="text/javascript" charset="utf-8"></script>

Далее при инициализации редактора говорим что у нас есть новая кнопка pagebreak, создаём панель mypanel где имеется одна наша кнокпа и дальее компануем новый тулбар mymaxi с новой панелью где наша кнопка. Подробнее про тулбары.
 1 elRTE.prototype.options.buttons.pagebreak = 'Page break';
 2 elRTE.prototype.options.panels.mypanel = ['pagebreak'];
 3 
 4 $().ready(function() {
 5     var opts = {
 6         toolbars :  {
 7             mymaxi : ['save', 'copypaste', 'undoredo', 'elfinder', 'style', 'alignment', 'colors', 'format', 'indent', 'lists', 'links', 'elements', 'mypanel', 'media', 'tables', 'fullscreen']
 8         },
 9         toolbar  : 'mymaxi',
10         cssClass : 'el-rte',
11         // lang     : 'ru',
12         height   : 450,
13         cssfiles : ['css/elrte-inner.css']
14     }
15     $('#editor').elrte(opts);
16 })

Для наглядности приведу код самой кнопки pagebreak.js:

 1 // Simple page break button
 2 (function($) {
 3 elRTE.prototype.ui.prototype.buttons.pagebreak = function(rte, name) {
 4     this.constructor.prototype.constructor.call(this, rte, name);
 5 
 6     this.command = function() {
 7         this.rte.history.add();
 8         this.rte.selection.insertHtml('<div class="pagebreak" />', true);
 9         this.rte.window.focus();
10         this.rte.ui.update();
11     }
12 
13     this.update = function() {
14         this.domElem.removeClass('disabled');
15     }
16 }
17 })(jQuery);

pagebreak.js (415 Bytes)

RE: Кнопка разрыва страницы / Пример как сделать свою кнопку - Added by Роман Дубан over 1 year ago

Пример редактора формул

elrte.latex.css - css - подключал после основного elrte.full (397 Bytes)

elrte.latex.js - переделаный image.js (12.5 kB)

formula.png - картинка для кнопки (1.5 kB)

RE: Кнопка разрыва страницы / Пример как сделать свою кнопку - Added by Alexandre Maximov over 1 year ago

Получается как плагин, пробовал на примере типографа, все работает отлично.

(1-6/6)