Всего лишь добавление цветов в палитру к визуальному редактору 3 версии
init.php
html_editor.js
js практически весь из стандартного кода битрикса, необходимо было добавить всего лишь
не нашел более простого пути, если есть - подскажите
ну и якобы секретно
событие, которое срабатывает перед инициализацией контролов редактора, таким образом можно или свой какой то контрол дописать или в моем случае подправить в нужну сторону
init.php
<? $html_editor_path = "/bitrix/php_interface/s1/include"; CJSCore::RegisterExt( "html_editor_extension", array( "js" => $html_editor_path . "/html_editor.js", //"css" => $html_editor_path . "/html_editor.css", //"lang" => $html_editor_path . "/html_editor_lang.php", "rel" => Array("html_editor_extension"), ) ); CJSCore::Init(array("html_editor_extension")); ?> |
; (function () { function ColorPicker(editor, wrap) { this.editor = editor; this.className = 'bxhtmled-top-bar-btn bxhtmled-top-bar-color'; this.activeClassName = 'bxhtmled-top-bar-btn-active'; this.disabledClassName = 'bxhtmled-top-bar-btn-disabled'; this.bCreated = false; this.zIndex = 3006; this.disabledForTextarea = true; this.posOffset = {top: 6, left: 0}; this.id = 'color'; this.title = BX.message('BXEdForeColor'); this.actionColor = 'foreColor'; this.actionBg = 'backgroundColor'; this.Create(); if (wrap) { wrap.appendChild(this.GetCont()); } } ColorPicker.prototype = { Create: function () { this.pCont = BX.create("SPAN", {props: {className: this.className, title: this.title || ''}}); this.pContLetter = this.pCont.appendChild(BX.create("SPAN", {props: {className: 'bxhtmled-top-bar-btn-text'}, html: 'A'})); this.pContStrip = this.pCont.appendChild(BX.create("SPAN", {props: {className: 'bxhtmled-top-bar-color-strip'}})); this.currentAction = this.actionColor; BX.bind(this.pCont, "click", BX.delegate(this.OnClick, this)); BX.bind(this.pCont, "mousedown", BX.delegate(this.OnMouseDown, this)); this.editor.RegisterCheckableAction(this.actionColor, { action: this.actionColor, control: this, value: this.value }); this.editor.RegisterCheckableAction(this.actionBg, { action: this.actionBg, control: this, value: this.value }); }, GetCont: function () { return this.pCont; }, Check: function (bFlag) { if (bFlag != this.checked && !this.disabled) { this.checked = bFlag; if (this.checked) { BX.addClass(this.pCont, 'bxhtmled-top-bar-btn-active'); } else { BX.removeClass(this.pCont, 'bxhtmled-top-bar-btn-active'); } } }, Disable: function (bFlag) { if (bFlag != this.disabled) { this.disabled = !!bFlag; if (bFlag) { BX.addClass(this.pCont, 'bxhtmled-top-bar-btn-disabled'); } else { BX.removeClass(this.pCont, 'bxhtmled-top-bar-btn-disabled'); } } }, GetValue: function () { return !!this.checked; }, SetValue: function (active, state, action) { if (state && state[0]) { var color = action == this.actionColor ? state[0].style.color : state[0].style.backgroundColor; this.SelectColor(color, action); } else { this.SelectColor(null, action); } }, OnClick: function () { if (this.disabled) { return false; } if (this.bOpened) { return this.Close(); } this.Open(); }, OnMouseUp: function () { this.editor.selection.RestoreBookmark(); if (!this.checked) { BX.removeClass(this.pCont, this.activeClassName); } BX.unbind(document, 'mouseup', BX.proxy(this.OnMouseUp, this)); BX.removeCustomEvent(this.editor, "OnIframeMouseUp", BX.proxy(this.OnMouseUp, this)); }, OnMouseDown: function () { if (!this.disabled) { this.editor.selection.SaveBookmark(); BX.addClass(this.pCont, this.activeClassName); BX.bind(document, 'mouseup', BX.proxy(this.OnMouseUp, this)); BX.addCustomEvent(this.editor, "OnIframeMouseUp", BX.proxy(this.OnMouseUp, this)); } }, Close: function () { var _this = this; this.popupShownTimeout = setTimeout(function () { _this.editor.popupShown = false; }, 300); this.pValuesCont.style.display = 'none'; BX.removeClass(this.pCont, this.activeClassName); this.editor.overlay.Hide(); BX.unbind(window, "keydown", BX.proxy(this.OnKeyDown, this)); BX.unbind(document, 'mousedown', BX.proxy(this.CheckClose, this)); this.bOpened = false; }, CheckClose: function (e) { if (!this.bOpened) { return BX.unbind(document, 'mousedown', BX.proxy(this.CheckClose, this)); } var pEl; if (e.target) pEl = e.target; else if (e.srcElement) pEl = e.srcElement; if (pEl.nodeType == 3) pEl = pEl.parentNode; if (!BX.findParent(pEl, {className: 'lhe-colpick-cont'})) { this.Close(); } }, Open: function () { this.editor.popupShown = true; if (this.popupShownTimeout) { this.popupShownTimeout = clearTimeout(this.popupShownTimeout); } var _this = this; if (!this.bCreated) { this.pValuesCont = document.body.appendChild(BX.create("DIV", {props: {className: "bxhtmled-popup bxhtmled-color-cont"}, style: {zIndex: this.zIndex}, html: '<div class="bxhtmled-popup-corner"></div>'})); this.pTextColorLink = this.pValuesCont.appendChild(BX.create("SPAN", {props: {className: "bxhtmled-color-link bxhtmled-color-link-active"}, text: BX.message('BXEdForeColor')})); this.pTextColorLink.setAttribute('data-bx-type', 'changeColorAction'); this.pTextColorLink.setAttribute('data-bx-value', this.actionColor); this.pBgColorLink = this.pValuesCont.appendChild(BX.create("SPAN", {props: {className: "bxhtmled-color-link"}, text: BX.message('BXEdBackColor')})); this.pBgColorLink.setAttribute('data-bx-type', 'changeColorAction'); this.pBgColorLink.setAttribute('data-bx-value', this.actionBg); this.pValuesContWrap = this.pValuesCont.appendChild(BX.create("DIV", {props: {className: "bxhtmled-color-wrap"}})); BX.bind(this.pValuesCont, 'mousedown', function (e) { var target = e.target || e.srcElement, type; if (target != _this.pValuesCont) { type = (target && target.getAttribute) ? target.getAttribute('data-bx-type') : null; if (!type) { target = BX.findParent(target, function (n) { return n == _this.pValuesCont || (n.getAttribute && n.getAttribute('data-bx-type')); }, _this.pValuesCont); type = (target && target.getAttribute) ? target.getAttribute('data-bx-type') : null; } if (type == 'changeColorAction') { _this.SetMode(target.getAttribute('data-bx-value')); BX.PreventDefault(e); } else if (target && type) { target.setAttribute('data-bx-action', _this.currentAction); _this.editor.CheckCommand(target); _this.SelectColor(target.getAttribute('data-bx-value')); } } }); var arColors = [ '#FF0000', '#FFFF00', '#00FF00', '#00FFFF', '#0000FF', '#FF00FF', '#FFFFFF', '#EBEBEB', '#E1E1E1', '#D7D7D7', '#CCCCCC', '#C2C2C2', '#B7B7B7', '#ACACAC', '#A0A0A0', '#959595', '#EE1D24', '#FFF100', '#00A650', '#00AEEF', '#2F3192', '#ED008C', '#898989', '#7D7D7D', '#707070', '#626262', '#555555', '#464646', '#363636', '#262626', '#111111', '#000000', '#F7977A', '#FBAD82', '#FDC68C', '#FFF799', '#C6DF9C', '#A4D49D', '#81CA9D', '#7BCDC9', '#6CCFF7', '#7CA6D8', '#8293CA', '#8881BE', '#A286BD', '#BC8CBF', '#F49BC1', '#F5999D', '#F16C4D', '#F68E54', '#FBAF5A', '#FFF467', '#ACD372', '#7DC473', '#39B778', '#16BCB4', '#00BFF3', '#438CCB', '#5573B7', '#5E5CA7', '#855FA8', '#A763A9', '#EF6EA8', '#F16D7E', '#EE1D24', '#F16522', '#F7941D', '#FFF100', '#8FC63D', '#37B44A', '#00A650', '#00A99E', '#00AEEF', '#0072BC', '#0054A5', '#2F3192', '#652C91', '#91278F', '#ED008C', '#EE105A', '#9D0A0F', '#A1410D', '#A36209', '#ABA000', '#588528', '#197B30', '#007236', '#00736A', '#0076A4', '#004A80', '#003370', '#1D1363', '#450E61', '#62055F', '#9E005C', '#9D0039', '#790000', '#7B3000', '#7C4900', '#827A00', '#3E6617', '#045F20', '#005824', '#005951', '#005B7E', '#003562', '#002056', '#0C004B', '#30004A', '#4B0048', '#7A0045', '#7A0026', '#8355a3', '#08bab2', '#ae87c9', '#666' ]; var row, cell, colorCell, tbl = BX.cre ate (" TABLE", {props: {className: 'bxhtmled-color-tbl'}}), i, l = arColors.length; row = tbl.insertRow(-1); cell = row.insertCell(-1); cell.colSpan = 8; var defBut = cell.appendChild(BX.create("SPAN", {props: {className: 'bxhtmled-color-def-but'}})); defBut.innerHTML = BX.message('BXEdDefaultColor'); defBut.setAttribute('data-bx-type', 'action'); defBut.setAttribute('data-bx-action', this.action); defBut.setAttribute('data-bx-value', ''); colorCell = row.insertCell(-1); colorCell.colSpan = 8; colorCell.className = 'bxhtmled-color-inp-cell'; colorCell.style.backgroundColor = arColors[38]; for (i = 0; i < l; i++) { if (Math.round(i / 16) == i / 16) // new row { row = tbl.insertRow(-1); } cell = row.insertCell(-1); cell.innerHTML = ' '; cell.className = 'bxhtmled-color-col-cell'; cell.style.backgroundColor = arColors[i]; cell.id = 'bx_color_id__' + i; cell.setAttribute('data-bx-type', 'action'); cell.setAttribute('data-bx-action', this.action); cell.setAttribute('data-bx-value', arColors[i]); cell.on mouseover = function (e) { this.className = 'bxhtmled-color-col-cell bxhtmled-color-col-cell-over'; colorCell.style.backgroundColor = arColors[this.id.substring('bx_color_id__'.length)]; }; cell.on mouseout = function (e) { this.className = 'bxhtmled-color-col-cell'; }; cell.on click = function (e) { _this.Select(arColors[this.id.substring('bx_color_id__'.length)]); }; } this.pValuesContWrap.appendChild(tbl); this.bCreated = true; } document.body.appendChild(this.pValuesCont); this.pValuesCont.style.display = 'block'; var pOverlay = this.editor.overlay.Show(), pos = BX.pos(this.pCont), left = pos.left - this.pValuesCont.offsetWidth / 2 + this.pCont.offsetWidth / 2 + this.posOffset.left, top = pos.bottom + this.posOffset.top; BX.bind(window, "keydown", BX.proxy(this.OnKeyDown, this)); BX.addClass(this.pCont, this.activeClassName); pOverlay.on click = function () { _this.Close() }; this.pValuesCont.style.left = left + 'px'; this.pValuesCont.style.top = top + 'px'; this.bOpened = true; setTimeout(function () { BX.bind(document, 'mousedown', BX.proxy(_this.CheckClose, _this)); }, 100); }, SetMode: function (action) { this.currentAction = action; var cnActiv = 'bxhtmled-color-link-active'; if (action == this.actionColor) { BX.addClass(this.pTextColorLink, cnActiv); BX.removeClass(this.pBgColorLink, cnActiv); } else { BX.addClass(this.pBgColorLink, cnActiv); BX.removeClass(this.pTextColorLink, cnActiv); } }, SelectColor: function (color, action) { if (!action) { action = this.currentAction; } if (action == this.actionColor) { this.pContLetter.style.color = color || '#000'; this.pContStrip.style.backgroundColor = color || '#000'; } else { this.pContLetter.style.backgroundColor = color || 'transparent'; } } }; function OnGetTopButtons(controls) { controls.Color = ColorPicker; }; BX.addCustomEvent("GetTopButtons", OnGetTopButtons); })(); |
'#8355a3', '#08bab2', '#ae87c9', '#666' |
ну и якобы секретно
BX.addCustomEvent("GetTopButtons", OnGetTopButtons); |