Не нравятся результаты поиска? Попробуйте другой поиск!

DLE FAQ » Все вопросы » Общие вопросы » Как интегрировать Editor.js в dle?

Как интегрировать Editor.js в dle?

doc123eysk 10.07.2021 Общие вопросы, jQuery, Общие вопросы по PHP, Модули, Хаки 1198

вопрос

https://editorjs.io/

Возможно ли интегрировать этот редактор в dle?
Сколько это будет стоить?

Ответа пока нет

14 комментариев

Юзер

esprittv - 2021-07-1011 июля 2021 14:06 - #79956

подпишусь на реализацию...
пока писал coderiz и lazydev.. продержали меня 2-3 недели и слились. сказали что может как модуль у себя сделают...но чёт сомневаюсь

Эксперт

773

TeraMoune - 2021-07-1011 июля 2021 22:02 - #79958

Есть одна проблемка. Данный редактор хранит инфу в json формате, это значит, что на готовенький сайт такое не поставить. И не известно какие брёвна будут в других моментах.

Более того у редактора очень маленькое количество плагинов (ну этих самых кнопок) их раз два и обчёлся. И придётся дописывать недостающие. А если что-то имело интеграцию в редактор и добавляло функционал тегов то это скорей всего перестанет работать.

Юзер

doc123eysk - 2021-07-1011 июля 2021 22:11 - #79959

Хорошо, а если взять froalaEdition который уже есть в dle, и допилить функцию которая выводит блоки кнопок при выделение текста. Эта функция уже реализована в этом редакторе, но её почему то нет в dle

Эксперт

773

TeraMoune - 2021-07-1012 июля 2021 04:44 - #79960

У меня всё есть

Юзер

doc123eysk - 2021-07-1012 июля 2021 04:46 - #79961

Немножко не понял, есть что?

Эксперт

773

TeraMoune - 2021-07-1012 июля 2021 05:05 - #79964

А не о той функции подумал, ну это к разработчику дле пожалуй. Или ищите инициализацию редактора и читайте документацию там может где-то есть опция которую не задействовали.

Юзер

doc123eysk - 2021-07-1012 июля 2021 05:12 - #79965

Ну к разработчику движка бесполезно обращаться. По патчам редактора все пересмотрел, этой функции нету. Нашёл код этой функции на официальном сайте редактора, попробовал его вставить, и почему-то пишет что нет лицензии. Хотя сам редактор можно скачать бесплатно, и про лицензию ничего небыло сказано.

Такие вот дела.

Эксперт

773

TeraMoune - 2021-07-1012 июля 2021 05:16 - #79966

doc123eysk, Так в редакторе же есть уже функция, её активировать нужно в инициализации. Которая происходит в водном или нескольких файлах в папке движка editor.

Там есть инициализация редактора, а опция активирующая это описана на странице документации.
https://froala.com/wysiwyg-editor/docs/options/#toolbarVisibleWithoutSelection

Юзер

doc123eysk - 2021-07-1012 июля 2021 06:08 - #79967

TeraMoune, Нет, это не то. на сколько я понял, нужно интегрировать вот эту страку-(плагин)

!function(n,a){"object"==typeof exports&&"undefined"!=typeof module?a(require("froala-editor")):"function"==typeof define&&define.amd?define(["froala-editor"],a):a(n.FroalaEditor)}(this,function(n){"use strict";n=n&&n.hasOwnProperty("default")?n["default"]:n,Object.assign(n.DEFAULTS,{inlineClasses:{"fr-class-code":"Code","fr-class-highlighted":"Highlighted","fr-class-transparency":"Transparent"}}),n.PLUGINS.inlineClass=function(e){var i=e.$;return{apply:function a(n){e.format.toggle("span",{"class":n})},refreshOnShow:function s(n,a){a.find(".fr-command").each(function(){var n=i(this).data("param1"),a=e.format.is("span",{"class":n});i(this).toggleClass("fr-active",a).attr("aria-selected",a)})}}},n.RegisterCommand("inlineClass",{type:"dropdown",title:"Inline Class",html:function(){var n='<ul class="fr-dropdown-list" role="presentation">',a=this.opts.inlineClasses;for(var e in a)a.hasOwnProperty(e)&&(n+='<li role="presentation"><a class="fr-command" tabIndex="-1" role="option" data-cmd="inlineClass" data-param1="'.concat(e,'" title="').concat(a[e],'">').concat(a[e],"</a></li>"));return n+="</ul>"},callback:function(n,a){this.inlineClass.apply(a)},refreshOnShow:function(n,a){this.inlineClass.refreshOnShow(n,a)},plugin:"inlineClass"}),n.DefineIcon("inlineClass",{NAME:"tag",SVG_KEY:"inlineClass"})});

в /engine/editor/jscripts/froala/edition.js там все плагины по этому редактору. Но проблема в том что я не кодер и знаю что где и зачем, а они отличаются давольно сильно. к примеру вот код уже встроеного плагина

Юзер

doc123eysk - 2021-07-1012 июля 2021 06:08 - #79968

Показать / Скрыть текст


/*!
 * draggable Plugin
 */

!function(n){"function"==typeof define&&define.amd?define(["jquery"],n):"object"==typeof module&&module.exports?module.exports=function(e,t){return t===undefined&&(t="undefined"!=typeof window?require("jquery"):require("jquery")(e)),n(t)}:n(window.jQuery)}(function(v){v.extend(v.FE.DEFAULTS,{dragInline:!0}),v.FE.PLUGINS.draggable=function(f){function e(e){if(e.originalEvent&&e.originalEvent.target&&e.originalEvent.target.nodeType==Node.TEXT_NODE)return!0;if(e.target&&"A"==e.target.tagName&&1==e.target.childNodes.length&&"IMG"==e.target.childNodes[0].tagName&&(e.target=e.target.childNodes[0]),!v(e.target).hasClass("fr-draggable")&&!0!==e.target.draggable)return f.browser.msie||e.preventDefault(),!1;f.undo.canDo()||f.undo.saveStep();for(var t=e.target,n=t.parentElement;n!=f.$el.get(0)&&("false"===n.isContentEditable||0==n.isContentEditable);)n=(t=n).parentElement;v(t).addClass("fr-dragging"),f.opts.dragInline?f.$el.attr("contenteditable",!0):f.$el.attr("contenteditable",!1),f.opts.toolbarInline&&f.toolbar.hide(),f.browser.msie||f.browser.edge||f.selection.clear(),e.originalEvent.dataTransfer.setData("text","Froala")}function g(e){return!(e&&("HTML"==e.tagName||"BODY"==e.tagName||f.node.isElement(e)))}function d(e,t,n){f.opts.iframe&&(e+=f.$iframe.offset().top,t+=f.$iframe.offset().left),p.offset().top!=e&&p.css("top",e),p.offset().left!=t&&p.css("left",t),p.width()!=n&&p.css("width",n)}function t(e){e.originalEvent.dataTransfer.dropEffect="move",f.opts.dragInline?function(){for(var e=null,t=0;t<v.FE.INSTANCES.length;t++)if((e=v.FE.INSTANCES[t].$el.find(".fr-dragging")).length)return e.get(0)}()||!f.browser.msie&&!f.browser.edge||e.preventDefault():(e.preventDefault(),function(e){var t=f.doc.elementFromPoint(e.originalEvent.pageX-f.win.pageXOffset,e.originalEvent.pageY-f.win.pageYOffset);if(!g(t)){for(var n=0,r=t;!g(r)&&r==t&&0<e.originalEvent.pageY-f.win.pageYOffset-n;)n++,r=f.doc.elementFromPoint(e.originalEvent.pageX-f.win.pageXOffset,e.originalEvent.pageY-f.win.pageYOffset-n);(!g(r)||p&&0===f.$el.find(r).length&&r!=p.get(0))&&(r=null);for(var a=0,o=t;!g(o)&&o==t&&e.originalEvent.pageY-f.win.pageYOffset+a<v(f.doc).height();)a++,o=f.doc.elementFromPoint(e.originalEvent.pageX-f.win.pageXOffset,e.originalEvent.pageY-f.win.pageYOffset+a);(!g(o)||p&&0===f.$el.find(o).length&&o!=p.get(0))&&(o=null),t=null==o&&r?r:o&&null==r?o:o&&r?n<a?r:o:null}if(v(t).hasClass("fr-drag-helper"))return;if(t&&!f.node.isBlock(t)&&(t=f.node.blockParent(t)),t&&0<=["TD","TH","TR","THEAD","TBODY"].indexOf(t.tagName)&&(t=v(t).parents("table").get(0)),t&&0<=["LI"].indexOf(t.tagName)&&(t=v(t).parents("UL, OL").get(0)),t&&!v(t).hasClass("fr-drag-helper")){var i;p||(v.FE.$draggable_helper||(v.FE.$draggable_helper=v('<div class="fr-drag-helper"></div>')),p=v.FE.$draggable_helper,f.events.on("shared.destroy",function(){p.html("").removeData().remove(),p=null},!0)),i=e.originalEvent.pageY<v(t).offset().top+v(t).outerHeight()/2;var l=v(t),s=0;i||0!==l.next().length?(i||(l=l.next()),"before"==p.data("fr-position")&&l.is(p.data("fr-tag"))||(0<l.prev().length&&(s=parseFloat(l.prev().css("margin-bottom"))||0),s=Math.max(s,parseFloat(l.css("margin-top"))||0),d(l.offset().top-s/2-f.$box.offset().top,l.offset().left-f.win.pageXOffset-f.$box.offset().left,l.width()),p.data("fr-position","before"))):"after"==p.data("fr-position")&&l.is(p.data("fr-tag"))||(s=parseFloat(l.css("margin-bottom"))||0,d(l.offset().top+v(t).height()+s/2-f.$box.offset().top,l.offset().left-f.win.pageXOffset-f.$box.offset().left,l.width()),p.data("fr-position","after")),p.data("fr-tag",l),p.addClass("fr-visi


ble"),p.appendTo(f.$box)}else p&&0<f.$box.find(p).length&&p.removeClass("fr-visible")}(e))}function n(e){e.originalEvent.dataTransfer.dropEffect="move",f.opts.dragInline||e.preventDefault()}function r(e){f.$el.attr("contenteditable",!0);var t=f.$el.find(".fr-dragging");p&&p.hasClass("fr-visible")&&f.$box.find(p).length?a(e):t.length&&(e.preventDefault(),e.stopPropagation()),p&&f.$box.find(p).length&&p.removeClass("fr-visible"),t.removeClass("fr-dragging")}function a(e){var t,n;"true"!==f.$el.attr("contenteditable")&&f.$el.attr("contenteditable",!0);for(var r=0;r<v.FE.INSTANCES.length;r++)if((t=v.FE.INSTANCES[r].$el.find(".fr-dragging")).length){n=v.FE.INSTANCES[r];break}if(t.length){if(e.preventDefault(),e.stopPropagation(),p&&p.hasClass("fr-visible")&&f.$box.find(p).length)p.data("fr-tag")[p.data("fr-position")]('<span class="fr-marker"></span>'),p.removeClass("fr-visible");else if(!1===f.markers.insertAtPoint(e.originalEvent))return!1;if(t.removeClass("fr-dragging"),!1===(t=f.events.chainTrigger("element.beforeDrop",t)))return!1;var a=t;if(t.parent().is("A")&&1==t.parent().get(0).childNodes.length&&(a=t.parent()),f.core.isEmpty())f.events.focus();else f.$el.find(".fr-marker").replaceWith(v.FE.MARKERS),f.selection.restore();if(n==f||f.undo.canDo()||f.undo.saveStep(),f.core.isEmpty())f.$el.html(a);else{var o=f.markers.insert();0===a.find(o).length?v(o).replaceWith(a):0===t.find(o).length&&v(o).replaceWith(t),t.after(v.FE.MARKERS),f.selection.restore()}return f.popups.hideAll(),f.selection.save(),f.$el.find(f.html.emptyBlockTagsQuery()).not("TD, TH, LI, .fr-inner").not(f.opts.htmlAllowedEmptyTags.join(",")).remove(),f.html.wrap(),f.html.fillEmptyBlocks(),f.selection.restore(),f.undo.saveStep(),f.opts.iframe&&f.size.syncIframe(),n!=f&&(n.popups.hideAll(),n.$el.find(n.html.emptyBlockTagsQuery()).not("TD, TH, LI, .fr-inner").remove(),n.html.wrap(),n.html.fillEmptyBlocks(),n.undo.saveStep(),n.events.trigger("element.dropped"),n.opts.iframe&&n.size.syncIframe()),f.events.trigger("element.dropped",[a]),!1}p&&p.removeClass("fr-visible"),f.undo.canDo()||f.undo.saveStep(),setTimeout(function(){f.undo.saveStep()},0)}function o(e){if(e&&"DIV"==e.tagName&&f.node.hasClass(e,"fr-drag-helper"))e.parentNode.removeChild(e);else if(e&&e.nodeType==Node.ELEMENT_NODE)for(var t=e.querySelectorAll("div.fr-drag-helper"),n=0;n<t.length;n++)t[n].parentNode.removeChild(t[n])}var p;return{_init:function(){f.opts.enter==v.FE.ENTER_BR&&(f.opts.dragInline=!0),f.events.on("dragstart",e,!0),f.events.on("dragover",t,!0),f.events.on("dragenter",n,!0),f.events.on("document.dragend",r,!0),f.events.on("document.drop",r,!0),f.events.on("drop",a,!0),f.events.on("html.processGet",o)}}}});

Эксперт

773

TeraMoune - 2021-07-1012 июля 2021 06:48 - #79969

doc123eysk,

Нет, это не то. на сколько я понял

Как бы...

Показать / Скрыть текст

А включение\отключение внутренних функций происходит через установки настроек которые описаны тут.

функцию которая выводит блоки кнопок при выделение текста

Это родная функция редактора...

И для активации другого режима панели инструментов нужно задействовать одну или две настройки в инициализации плагина.
toolbarInline - Делает панель инструментов редактора встроенной (то есть при выделении показывает её под курсором)

toolbarVisibleWithoutSelection - Показывает панель инструментов всегда даже если выделения текста не было. (Просто устанавливается курсор и показываются кнопки)

Юзер

doc123eysk - 2021-07-1012 июля 2021 08:58 - #79970

И правда, все получилось, спасибо)))
https://ibb.co/RSx8C4n

Юзер

esprittv - 2021-07-1025 октября 2021 21:09 - #80218

ДА, подпишусь на резульатт))))

Юзер

KatranLife - 2021-07-1024 октября 2021 22:33 - #80212

doc123eysk,
Как ты сделал то хоть, делись)

Jigurda | Как в description вставить значение доп. ... ²

Jigurda
Как в description вставить значение доп.поля?
Сегодня, 10:54

Немного не то. Нужно не заменить, а добавить к уже имеющемуся description свой текст с доп.полями
lutskboy | Как в description вставить значение доп. ... ²

lutskboy
Как в description вставить значение доп.поля?
Вчера, 21:51

https://sandev.pro/web/159-fullstory-metatags-by-sander.html

derebas | Как реализовать кнопку "Поделиться" как ... ¹

derebas
Как реализовать кнопку "Поделиться" как на Плей Маркете?
Вчера, 09:39

Ну если на скорую руку то примерно так

<style>
.sociallinks {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0,0,0,0.4);
}

.sociallinks-content {
    background-color: #fefefe;
    margin: auto;
    padding: 20px;
    border: 1px solid #888;
    width: 80%;
    max-width: 500px;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
}

.close {
    color: #aaa;
    position: absolute;
    top: 10px;
    right: 10px;
    font-size: 28px;
    font-weight: bold;
}

.close:hover,
.close:focus {
    color: black;
    text-decoration: none;
    cursor: pointer;
}

.social-container {
    display: flex;
    align-items: center;
}
.social-container > div {
    margin-left: 10px;
}

h2, p {
    margin: 5px 0;
}
.social {
  padding-top: 20px;
}
.social img {
  margin: 10px;
}
.sharebtn {
  padding-top: 20px;
  width: 100%;
}
.sharebtn_area {
  border: 1px solid black;
  height: 40px;
}
.sharebtn input[type="text"] {
  width: 70%;
  border: none;
  height: 95%;
}
.sharebtn button {
  width: 25%;
  height: 95%;
  border: none;
  background-color: #fff;
}
</style>
<button id="opensociallinksBtn">Поделиться</button>

<div id="mysociallinks" class="sociallinks">
  <div class="sociallinks-content">
    <span class="close">×</span>
    <div class="social-container">
        <img src="{image-1}" alt="Icon" width="30" height="30">
        <div>
            <h2>{title}</h2> 
            <p>Поделиться</p> 
        </div>
    </div>
    <div class="social">
        <a href="https://api.whatsapp.com/send/?text={full-link}"><img src="whatsapp.png" alt="WhatsApp" width="30" height="30"></a>
        <a href="https://www.facebook.com/sharer/sharer.php?u={full-link}"><img src="facebook.png" alt="Facebook" width="30" height="30"></a>
        <a href="https://twitter.com/intent/post?url={full-link}"><img src="twitter.png" alt="Twitter" width="30" height="30"></a>
        <a href="https://www.instagram.com/share?url={full-link}"><img src="instagram.png" alt="Instagram" width="30" height="30"></a>
    </div>
    <div class="sharebtn">
      <div class="sharebtn_area">
        <input type="text" id="inputText" value="{full-link}" readonly="true">
        <button id="copyBtn">Поделиться <img src="share.png" width="10px" alt="Share Icon"></button>
      </div>
    </div>
  </div>
</div>

<script>
var sociallinks = document.getElementById("mysociallinks");
var opensociallinksBtn = document.getElementById("opensociallinksBtn");
var closeBtn = document.getElementsByClassName("close")[0];
var copyBtn = document.getElementById("copyBtn");
var inputText = document.getElementById("inputText");

opensociallinksBtn.onclick = function() {
  sociallinks.style.display = "block";
}

closeBtn.onclick = function() {
  sociallinks.style.display = "none";
}

window.onclick = function(event) {
  if (event.target == sociallinks) {
    sociallinks.style.display = "none";
  }
}

copyBtn.onclick = function() {
  inputText.select();
  document.execCommand("copy");
}
</script>

doktorpull | GeoIP - показ информации в зависимости о ... ¹

doktorpull
GeoIP - показ информации в зависимости от страны посетителя сайта
17-04-2024, 21:53

Отличный модуль, хорошо работает. Рекомендую этого автора, так как заказывал у него несколько собственных разработок. Человек знает свое дело.
Gordi | Telegram Sender ¹²

Gordi
Telegram Sender
16-04-2024, 15:47

купил. Модуль классный! Автору большая признательность!
TeraMoune | Как вывести тайтл и дискрипшен по маске ... ¹

TeraMoune
Как вывести тайтл и дискрипшен по маске в категориях?
14-04-2024, 00:36

Ну например вот так: https://lazydev.pro/product/12-dle-seo.html
zawibis | Как настроить редирект на внешние сайты? ¹

zawibis
Как настроить редирект на внешние сайты?
13-04-2024, 14:53

Нашёлся ответ.
Нужно в настройках группы отключить параметр

Автоматическая замена ссылок [url] в тег [leech]
При включении данной опции все ссылки, которые пользователь публикует в теге [url], будут автоматически заменены на защищенные ссылки тега [leech]
TeraMoune | Как решить проблему с /xfsearch/значение ... ⁵

TeraMoune
Как решить проблему с /xfsearch/значение?
12-04-2024, 11:53

Это не прикол, просто dle позволяет искать новости как по значению так и с указанием конкретного поля для этого значения. И если у вас стоят метрики на сайте то достаточно любому человеку открыть ссылку и убрать в ней что-то, если сайт при новом url вернёт статус 200 то метрики захотят этот url запомнить.
komosa | Как решить проблему с /xfsearch/значение ... ⁵

komosa
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:34

А вот прикол то в том, что это коснулось только author
lutskboy | Как решить проблему с /xfsearch/значение ... ⁵

lutskboy
Как решить проблему с /xfsearch/значение?
11-04-2024, 22:31

может быть не один только author. и другие поля. как знать куда перенаправлять