Форум программистов, компьютерный форум, киберфорум
Наши страницы
HTML, CSS
Войти
Регистрация
Восстановить пароль
 
Рейтинг 4.76/85: Рейтинг темы: голосов - 85, средняя оценка - 4.76
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
1

Userscript для интеграции JSFiddle на форум

21.07.2016, 03:11. Просмотров 15472. Ответов 19

Доброго времени суток, форумчане! Мне хочется представить вашему вниманию наш с Никитой (ntlinuxnt) проект. Это userscript, добавляющий в редактор «быструю» кнопку открытия сервиса jsfiddle и возможность одним нажатием кнопки вставить в пост ссылку на сохранённый фидл вместе с кодами, находящимися в этом фидле. Так же наша разработка умеет распознавать ссылки на фидлы и вставлять их «первью» в виде фрейма под постом с кодами фидла и результатом.

Мы это разрабатывали под обитателей раздела web-программирования. Поскольку у обоих на памяти есть люди, которые просили прикрутить фидл к форуму или сделать свою форумную песочницу.

В скрипте есть настройки, которые могут поменять почти все его функции. О них расскажет Никита.

Короткий гайд по «обновлённому» редактору и постам:
Редактор с кнопками

Как выглядит пост с открытым «превью»

С закрытым

Собственно код начальной версии
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
// ==UserScript==
// @name        cyberForumJsFiddleSync
// @description sync jsfiddle on cyberforum.ru
// @author      Nikita Davidenko(nbytes|ntlinuxnt) and BANO.notIT
// @license     GPL v2
// @version     1.0
// @include     *://*.cyberforum.ru/*
// @include     *://jsfiddle.net/*
// @run-at      document-start
// ==/UserScript==
(function (w, undefined) {
    "use strict";
    var IframeSettings = {
        // порядок табов в iframe соответствует порядку их в этом массиве
        // так же отсутствие элементов массива означает отсутствие соответствующего таба
        tabs: ["html", "js", "css", "result"],
        // использовать тёмную тему
        dark: true,
        // являются ли спойлеры с кодом сразу открытыми
        open: true,
        // какие коды вставлять вместе с ссылкой
        codes: ["css", "js", "html"],
        // если этот параметр будет равен false, то не будут показываться кнопки кодов, указанных в codes
        showAllButtons: true
    };
    // две части скрипта, каждая зависит от своего url
    if (/^www\.cyberforum\.ru$/.test(w.location.hostname))
        (function () {
            // если находимся на кибер форуме, то...
            var query = document.querySelectorAll.bind(document),
                addListener = function (elem, type, listener, cat) {
                    elem.addEventListener(type, listener, cat || false);
                };
            var css = '\
            .spoiler > input + label:before {\
                content: "+";\
                float: left;\
                margin-right: 3px;\
                font: bold 14px Tahoma\
            }\
\
            .spoiler > input:checked + label:before {\
                content: "-";\
                float: left;\
                margin-right: 3px;\
                font: bold 14px Tahoma\
            }\
\
            .spoiler > input {\
                display: none\
            }\
\
            .spoiler > input + label {\
                padding: 5px 15px;\
                overflow: hidden;\
                width: 100%;\
                box-sizing: border-box;\
                display: block;\
                cursor: pointer;\
            }\
\
            .spoiler > input + label + .text {\
                display: none;\
            }\
\
            .spoiler > input:checked + label + .text {\
                display: block;\
            }\
\
            .spoiler > .text {\
                border-top: none;\
            }\
            \
            .spoiler label{\
                border: 1px solid rgb(215, 215, 215);\
                font-weight: bold;\
            }\
            \
            .fbtn{\
                background: transparent url([url]https://jsfiddle.net/favicon.png[/url]) no-repeat scroll center center;\
                width: 35px;\
                height: 24px;\
            }\
            .cbfBtn {\
                border: 2px solid #5baef6;\
                color: black;\
                padding: 4px;\
                text-decoration: none;\
                font-family: sans-serif;\
                background: #EBF0FC;\
                transition: 0.5s;\
                cursor: pointer;\
                width: 12%;\
                margin-bottom:5px;\
                display: inline-block;\
            }\
\
            .cbfBtn:hover {\
                border-color: #373790;\
                color: #295b95;\
            }';
            var node = document.createElement("style");
            node.type = "text/css";
            node.appendChild(document.createTextNode(css));
            document.head.appendChild(node);
            addListener(document, "DOMContentLoaded", function () {
                (function () {
                    // кнопка для редактора и её функционал
                    var _FiddlePages = {};
                    var btn = query(".vBulletin_editor tr")[0].insertCell();
                    btn.innerHTML = "<div class='fbtn'></div>";
                    btn.onclick = function () {
                        opnWin()
                    };
                    btn.style.cursor = "pointer";
                    addListener(window, "message", listener, false);
                    query(".vBulletin_editor")[0].addEventListener("click", function (event) {
                        var target = event.target;
                        if (target.classList.contains("cbfBtn")) {
                            var fidleData = _FiddlePages[target.dataset.id];
                            event.preventDefault();
                            if (target.dataset.code == "url") {
                                var text = "[URL=" + fidleData.url + "]песочница[/URL]";
                                IframeSettings.codes.forEach(function (tag) {
                                    if(!fidleData[tag].length)
                                        return;
                                    text += "\n" + wrapTags(tag, fidleData[tag]);
                                });
                                insertText(text);
                            } else
                                insertText(wrapTags(target.dataset.code, _FiddlePages[target.dataset.id][target.dataset.code]));
                        }
                    }, true);
                    function wrapTags(tag, text) {
                        return ["[", tag.toUpperCase(), "]", text, "[/", tag.toUpperCase(), "]"].join("")
                    }
                    function updateLink(id, obj) {
                        _FiddlePages[id] = obj;
                    }
                    function listener(event) {
                        if (event.origin.indexOf("jsfiddle.net") > 0 && event.data[0] in _FiddlePages)
                            updateLink.apply(null, event.data);
                    }
                    function addLink(id) {
                        _FiddlePages[id] = {url: "http://jsfiddle.net/", css: "", js: "", html: ""};
                        var editor = query(".vBulletin_editor")[0];
                        var s = document.createElement("b");
                        s.innerHTML = "<div>\
                               <strong class='cbfBtn' data-code='url' data-id='" + id + "'>Fiddle #" + (Object.keys(_FiddlePages).length) + "</strong>\
                               " + (["js", "html", "css"].filter(function (el) {
                                return IframeSettings.showAllButtons || IframeSettings.codes.indexOf(el) < 0;
                            }).map(function (el) {
                                return "<a class='cbfBtn' data-code='" + el + "' data-id='" + id + "'>" + el.toUpperCase() + "</a>"
                            }).join("")) + "\
                            </div>";
                        editor.appendChild(s.firstElementChild);
                    }
                    function opnWin() {
                        var linkId = createId();
                        addLink(linkId);
                        window.open("http://jsfiddle.net/#" + linkId)
                    }
                    function createId() {
                        return location.href.split("#")[0].replace(/[^a-f\d]/g, "") + ((new Date) - 0)
                    }
                    function insertText(text) {
                        var editObj = vB_Editor["vB_Editor_" + (!!document.getElementById("vB_Editor_001") ? "001" : "QR")];
                        editObj.check_focus();
                        editObj.insert_text(text, false);
                    }
                })();
                function links2frame() {
                    // превьюшки фидлвов
                    var links = [].slice.call(query("div[id^='post_message'] a[href*='jsfiddle.net']:not(.checkedLink)")),
                        postfix = "embedded/" + IframeSettings.tabs + "/" + (IframeSettings.dark ? "dark/" : "");
                    links
                        .reverse()
                        .filter(function (elem) {
                            return ["", "user"].indexOf(elem.href.split("/")[3]) < 0
                        })
                        .forEach(function (target) {
                            var currentSlug, iframe, listeners, setHeight, uriEmbedded;
                            uriEmbedded = target.href.replace(/\/$/, "").split("/").concat(postfix).join("/");
                            currentSlug = target.href.match(/\/([^\/]+?)\/(?:\d\/)?$/)[1]; // очень сложная и тупая регулярка
                            var ID = target.href.replace(/[^a-f\d]/, "");
                            var s = document.createElement("b");
                            s.innerHTML = '\
                    <div class="spoiler">\
                        <input type="checkbox" id="' + (ID) + '" ' + (IframeSettings.open ? "checked" : "") + '>\
                        <label class="alt2" for="' + ID + '">' + (target.innerText.toUpperCase()) + ':</label>\
                        <div class="text">\
                            <iframe src="' + uriEmbedded + '" width="100%" height="70" frameborder="0" \
                                sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"></iframe>\
                        </div>\
                    </div>';
                            iframe = s.querySelector("iframe");
                            target.parentNode.parentNode.insertBefore(s.firstElementChild, target.parentNode.nextSibling);
                            target.classList.add("checkedLink");
                            setHeight = function (data) {
                                if (data.slug === currentSlug)
                                    return iframe.height = data.height;
                            };
                            listeners = (function () {
                                return function (event) {
                                    var data, eventName;
                                    eventName = event.data[0];
                                    data = event.data[1];
                                    if (eventName == "embed")
                                        return setHeight(data);
                                };
                            })(this);
                            return addListener(window, "message", listeners, false);
                        })
                }
                links2frame();
                var observer = new MutationObserver(function (mutations) {
                    mutations.forEach(function (mutation) {
                        if (mutation.type == "childList")
                            [].forEach.call(mutation.addedNodes, links2frame);
                    })
                });
                observer.observe(document.getElementById("posts"), {
                    childList: true
                })
            })
        })();
    else
        (function () {
            //    если на фидле, то
            if (location.hash.substr(0, 5) != "#cbef")
                return;
            var CID = location.hash.substr(1),
                ploc = location.href;
            document.addEventListener("DOMContentLoaded", function () {
                setInterval(function () {
                    console.log(getCodeFrom("panel_html"));
                    if (ploc != location.href)
                        window.opener.postMessage([CID, {
                            url: ploc = location.href,
                            html: getCodeFrom("id_code_html"),
                            css: getCodeFrom("id_code_css"),
                            js: getCodeFrom("id_code_js")
                        }], "*");
                }, 1e3);
                function getCodeFrom(id) {
                    return document.getElementById(id).value
                }
            });
        })()
})
(window);

Для работы скрипта нужно дополнение Tampermonkey(chrome/opera) или Grasemonkey(firefox).
Так же если очень хотите посмотреть как Мы это делали, можете посмотреть наш репозиторий, из которого можно скачать актуальную версию нашего скрипта.

Скрипт предназначен для удобства перехода из редактора сообщений в песочницу! Не забываем о том, что весь код, создаваемый в песочнице, необходимо продублировать на форуме, дабы не нарушать пункт правил 4.11! Песочница это бонус для топик стартёра и всех посетителей форума!


Не по теме:

Если Вы захотите поставить спасибку за нашу работу, то ставьте, пожалуйста, нам обоим. Потому что работали Мы вместе.
Пост Никиты будет ниже.

11
Лучшие ответы (1)
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
Similar
Эксперт
41792 / 34177 / 6122
Регистрация: 12.04.2006
Сообщений: 57,940
21.07.2016, 03:11
Ответы с готовыми решениями:

Подскажите удобный редактор для верстки (наподобие jsfiddle.net)
Всем привет! Кто-нибудь знает, есть ли программа для верстки по функционалу...

1С и .NET/ Средства интеграции, Обзор средств интеграции
Специфика российского рынка программных продуктов для бизнеса такова, что если...

Userscript для удаления/изминения обьектов сайта?
Есть некоторый сайт, в исходном коде я зменяю всё что мне нужно(некоторые...

CMS для интеграции с 1С
Здравствуйте. Необходимо создать интернет-магазин с интеграцией 1C предприятие...

Система непрерывной интеграции для VS 12+
Привет всем! Сейчас встал вопрос об использовании системы непрерывной...

19
ntlinuxnt
$ su
1598 / 513 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 2
Завершенные тесты: 5
21.07.2016, 03:12 2
Лучший ответ Сообщение было отмечено BANO как решение

Решение

Часто задаваемые вопросы(ЧаВо):

1)Как мне настроить скрипт под себя?
Что бы настроить скрипт вам нужно изменять объект IframeSettings(13 строка) под себя, на данный момент есть возможность:
- контролировать вкладки в превью, перечисляя их в свойстве tabs, по умолчанию работают все вкладки;
- отключать или включать темную тему(по умолчанию включена dark:true);
- контролировать спойлеры превью, свойство(open), если true спойлер всегда открыт, если false спойлер всегда закрыт;
- контролировать какие коды вставлять вместе с ссылкой, по умолчанию включены все(вставляются только не пустые),свойство codes, если какие-то из них не перечислены то отображаются дополнительные кнопки с этими кодами.
- контролировать отображение дополнительных кнопок для раздельной вставки кода в пост, свойство showAllButtons если true то отображаются все кнопки, если false то только кнопка вставки ссылки и не указанные в codes.
- так же если вы знакомы с CSS то в 34 строке есть переменная css хранящая стили кнопок и etc. стили можно подстраивать под себя.

2)Почему вставляются пустые ссылки на фидлы?
Фидлы нужно обязательно сохранять, если вы не сохранили фидл то будет пустая ссылка на jsfiddle.

3)Почему вставляются теги, но без кода, хотя тот на фидле есть?
Как и в вопросе 2 нужно сохранять фидл, если вы не сохранили изменения они не вставятся в тэги.

4)Почему при быстром ответе ссылки не превращаются в превью?
Это замечено в браузерах FF(у них есть такой баг), если обновить страницу то все пройдет и вы увидите превью.
9
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
21.07.2016, 03:26  [ТС] 3
Любые вопросы/предложения пишите в эту тему. Вам обязательно ответят. Так же Мы собираемся здесь писать о больших обновлениях, если такие будут.
1
volvo
Супер-модератор
Эксперт Pascal/DelphiАвтор FAQ
26372 / 17695 / 7006
Регистрация: 22.10.2011
Сообщений: 31,149
Записей в блоге: 6
21.07.2016, 08:11 4
Что в результате видит пользователь, у которого НЕ установлен этот скрипт? Где в этом случае находится код? Если у него будет только ссылка на песочницу, то скрипт прямо нарушает Правила форума, и будет удален. Код должен быть не "где-то там", а на форуме, все остальное - дополнение.

Из постов в тестовой теме ответ на заданный вопрос непонятнен. В одном посте есть и ссылка и код, в другом - только ссылка. Итак?
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
21.07.2016, 12:47  [ТС] 5
volvo, у вставки ссылки есть автоматическая вставка полей кода, которые выбираются в настройках
Мы знаем что давать просто ссылку на фидл является нарушением, поэтому и была введена эта функция для тех ленивых, которые не хотят нажимать на кнопки вставки кода отдельно.

ps
в тестовой теме первые 2 поста это тест первой версии, которая могла только вставлять ссылки и делать к ним превьюшки
Цитата Сообщение от volvo Посмотреть сообщение
нарушает Правила форума, и будет удален
Как-то страшновато звучит, но это ведь не так. Ведь надо не обрубить любые концы, а просто код на форум залить. Никто же не удаляет ссылки, не подтверждённые кодом, а просто переносит код на форум.
1
tolimadokara
745 / 413 / 91
Регистрация: 24.10.2012
Сообщений: 3,023
21.07.2016, 14:40 6
Поддерживаю форумный энтузиазм людей BANO и ntlinuxnt! В суть идеи особо не вникал. Но это круто, запускать javascript код прямо на кибер форуме. Так ведь? Верно понимаю? Вообще, имхо, лично мне это не очень нравится - хватит одной ссылки на JSFiddle, и все. Перешел, код протестировал и все понял. Вы знаете, форум и так сложный, может быть администрация не хочет его перенасыщать ещё большим функционалом. Хотя, это же userscript, хочешь пользуйся хочешь не пользуйся. Понятно. Имеет смысл генерировать очень простые в реализации идеи но одновременно очень полезные для форума. Вот, одна из идей форумчанина djadjavova (если не ошибся в нике) была реализована на форуме - это текстовая кнопка "Выделить код" в блоке кода. Так же, была идея, кто ее автор не помню, добавить подсветку строк по onmouseover (либо это через CSS реализовано) в таблицах со списком названия тем, что бы в глазах не двоилось и не троилось.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
21.07.2016, 14:53  [ТС] 7
Цитата Сообщение от tolimadokara Посмотреть сообщение
хватит одной ссылки на JSFiddle, и все.
Одна ссылка нарушает пункт правил 4.11. По-этому Мы сделали и вставку кода, о чём вообще-то написано в моём посте про функционал, и в первом пункте ЧаВо от Никиты.
1
tolimadokara
745 / 413 / 91
Регистрация: 24.10.2012
Сообщений: 3,023
21.07.2016, 15:09 8
хватит одной ссылки на JSFiddle, и все.
Одна ссылка нарушает пункт правил 4.11. По-этому Мы сделали и вставку кода, о чём вообще-то написано в моём посте про функционал, и в первом пункте ЧаВо от Никиты.
Так, пункт правил 4.11:

4.11 Картинки и любые другие файлы загружайте на форум, во избежание их удаления или потери на сторонних ресурсах. По этой же причине коды программ также должны находиться на форуме.
Понял. Логично. Тогда надо ждать критики форумчан, и, - ответа от администрации форума.

Добавлено через 1 минуту
BANO, а если разместить код[!] в теме на форуме и дополнить это ссылкой на jsfiddle? И правила не нарушаются и ссылка на jsfiddle есть?
0
ntlinuxnt
$ su
1598 / 513 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 2
Завершенные тесты: 5
21.07.2016, 15:28 9
Цитата Сообщение от volvo Посмотреть сообщение
Что в результате видит пользователь, у которого НЕ установлен этот скрипт?
Ссылку на фидл и вставки кода которые были не пустые на фидле. А если у него установлен наш скрипт то плюс ко всему увидит спойлер с фреймом фидла.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
21.07.2016, 15:59  [ТС] 10
Цитата Сообщение от tolimadokara Посмотреть сообщение
BANO, а если разместить код[!] в теме на форуме и дополнить это ссылкой на jsfiddle? И правила не нарушаются и ссылка на jsfiddle есть?
Повторюсь, эта функция уже реализована. Кнопкой "Fiddle #1".
1
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
23.07.2016, 10:04 11
CSS
1
url([url]https://jsfiddle.net/favicon.png[/url])
Зачем так делать?
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.07.2016, 11:32  [ТС] 12
Stas_Garcia, это сделано было в первой версии, во второй обе иконки (второй в этой версии нету) мы перевели в base64 и теперь скрипт статиками независим от фидла. Только фидлами. Иконки теперь "свои".
Предлагаю Вам установить версию из репозитория. Там есть несколько фич законченных, сейчас работаем над ещё одной, но как-то она не идёт ещё. Как только её закончим, сразу сюда выложим.
Скоро ещё добавим инструкцию по установке в фотографиях.

Добавлено через 1 минуту

Не по теме:

Цитата Сообщение от Stas_Garcia Посмотреть сообщение
Зачем так делать?
Честно? Чтобы как-то обозначить, что кнопка есть. Теперь мы подошли к этому более обстоятельно.

1
Stas_Garcia
Ушел наливать чай
187 / 136 / 32
Регистрация: 02.03.2013
Сообщений: 652
23.07.2016, 11:36 13
Цитата Сообщение от BANO Посмотреть сообщение
это сделано было в первой версии
Думал код под спойлером актуален. Будем тестировать
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
23.07.2016, 20:36  [ТС] 14
Цитата Сообщение от Stas_Garcia Посмотреть сообщение
код под спойлером актуален
Он работает, и свою задачу полностью выполняет. А остальное - просто фичи.

Выкладываю последнюю версию скрипта. Поскольку новых предложений не поступило, а те, которые поступили, мы реализовали, считаю разработку скрипта успешной.
Если будут какие-то предложения или ошибки, обязательно пишите сюда. Будем исправлять.
Кликните здесь для просмотра всего текста
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
// ==UserScript==
// @name        cyberForumJsFiddleSync
// @description sync jsfiddle on cyberforum.ru
// @author      Nikita Davidenko(nbytes|ntlinuxnt) and BANO.notIT
// @license     GPL v2
// @version     1.0
// @include     *://*.cyberforum.ru/*
// @include     *://jsfiddle.net/*
// @run-at      document-start
// ==/UserScript==
!function(e,t){"use strict"
var n={
// порядок табов в iframe соответствует порядку их в этом массиве
// так же отсутствие элемментов массива означает отсутствие соответствующего таба
tabs:["html","js","css","result"],
// использовать тёмную тему
dark:true,
// являются ли спойлеры с кодом сразу открытыми
open:true,
// какие коды вставлять вместе с ссылкой
codes:["css","js","html"],
// если этот параметр будет равен false, то не будут показываться кнопки кодов, указаных в codes
showAllButtons:true
};/^www\.cyberforum\.ru$/.test(e.location.hostname)?function(){var e=document.querySelectorAll.bind(document),t=function(e,t,n,o){e.addEventListener(t,n,o||!1)},o='.spoiler>input+label:before{content:"+";float:left;margin-right:3px;font:bold 14px Tahoma}.spoiler > input:checked + label:before{content:"-";float:left;margin-right:3px;font:bold 14px Tahoma}.spoiler > input{display:none}.spoiler > input + label{padding:5px 15px;overflow:hidden;width:100%;box-sizing:border-box;display:block;cursor:pointer}.spoiler > input + label + .text{display:none}.spoiler > input:checked + label + .text{display:block}.spoiler > .text{border-top:none}.spoiler label{border:1px solid rgb(215,215,215);font-weight:bold}.fbtn{background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABGdBTUEAALGPC/xhBQAABURJREFUWAntVn1sU1UUP+e91+4DaMc+2GibyNfUEAwMUYKEBIliCApEQINRjDHBBCRZZ/iIgDTRSBTom4GoUfcXfiSKiRERgyzIH4hEJegkKCgzuNaVTba2DNq1715/t9vrWlaQ6f6Tm7T33nN+5+Oee865j+jmuBmB4YjA8g/1ylc6PBRoLR6qOh6qgI2v3n5xisMw/JLpHpY8gZic/bx2kvJzImtPm3/0Vzb+WvOQHaje3j7GcJQ2MfGDUso4ER8gKc6wxudhpFwSTYHShaCPJpJfiET6mfDGcsUrOIbkQM2O+GRdl/tx2koIvtSTSL/ZtbE8Okhz4JTT6/athpNbJXEvs1jUVu8+PggHwg07UBHs9JZozhaSfFmK9MLQc6N/KKQwl+Z7NVornbyfJVWkSNwV8Zedy+WrdUEHPGb3dI20R8Gehju+CAWHJcvFJGlOOi2mRtaVtV6t6Fr7GrNrnE76tzD0e5vfdTdwuKWBMcgBT2P8BRjcAlwSsB/7ws21SkRKWh3yj3pjQPzGVh4zukJj7X0hxWNhv/uDa0p5zfgyX2Nc+hpj7yDZRthAz47u+72NsX3YD3LYxvzDzD4z/pPPjB25Ls5rxlph6CgFAtp1gf+C6THjW72N8bQrGC3PFc8aUuXFzOOQZO/CAZELGpa1tI4hfPpIybfn6jOyG91ZrdYARbK0nIVKTCJtGpOMhE6fPUhvzUjlsDNLlXBI3ln4JZOpK193rB/TbmMsS4Q1TSeNeKxNU3NfBBByBxuPK4IkeZua7eF9OVaBa9mvsf69xtzErH3mm3zr6bHB7hk2BjN7g9EXdTZ+VcmGU3xc5CxpRfKtsTG6w0gh/SUs7vKYsSU2PeOAz+XfSszrJYnXQ9E/dtpMNXMJNeF/rhC0RiRStwghF4Gs4TRHvGb3PIVB5WxhTdtMJN6WFg6QSk1V7RjO7PaZ0QUKE653/UIyPR0HPI+r3usJxhYrOqvQMuoUbbUp3OBapYj2yPR7h6OFhKhva3C/NkBX7XjElzAy0SK5HKeYgK7nCvld22wMBQ4bPveME+gf8VC9a/YAvbXY6644hAPXpVM94xFV7VlmeSkVSzRkQf0Lw9Dr1DJlyU9zeZF1NRd6e688oGg6a/tw6m/yjCtG4N60IPUo8TTskFr9IzA+gWb2BHZFhlFar+Elm48G80lHYMwlG5OdBXeptcaUVzqKlhbGFUvoj6i1bmgfqVxR67whqRyWu0HL6359nVQewFU8pKHVeuDgmTzB/o2V5OO4mh4Y2JTbG3w740tLixydxKJHpuVclG4NlXBzpdmRzfCqYHQSa7QC8s2FdMOlFtAnqTIU8DJTglcD258f1eEJRjfimnb53A3HyPQfINZqcZwVONSx9uhfxwkh9QS7lwCzt5iLTqHbNeEFdKBcn0RkE0lKbrhab9+eS8A3cAX0MxLlzsIgZG+DezdZtAxKnaihTRCaw1JuD/0WmaeMK7lwQ9lBQTwTjh1Fcq1FTq1EZJupN1XX6a/6s5BuOAib8hyhPW7GT4wNxuYUAubR8OmVty+06cMMJF0BjGdnVx3enZSnMbaNae3ZIu/E6pPA6dZlnq3CXkBm2EhVgQsjnWUlR1HC7mRv8g70pdokWfIpJKJXL6UWvFoP06rvHMNm0VaEbouec5/TXYyPGpqM3vJ054aqeDZUma8XB+9BacyETAId6ySYqoT+80DejEInmIpmNRLGTwmyVob9ZSeU4qwDGSu4P++s+UuR6QvAGI+kGvJndiFvoasXptrQmA6Fz0Xey0S9EPAm7X8Zgb8BVowAjPMF30EAAAAASUVORK5CYII=) no-repeat scroll center center;width:35px;height:28px;cursor:pointer}.cbfBtn{border:2px solid #5baef6;color:black;padding:4px;text-decoration:none;font-family:sans-serif;background:#EBF0FC;transition:0.5s;cursor:pointer;width:12%;margin-bottom:5px;display:inline-block}.cbfBtn:hover{border-color:#373790;color:#295b95}.fbtn-import{width:35px;height:28px;cursor:pointer;background:transparent url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgCAYAAABzenr0AAAABmJLR0QA/wD/AP+gvaeTAAAACXBIWXMAAAsTAAALEwEAmpwYAAAAB3RJTUUH4AcWABcDgUiwXQAABUhJREFUWMPtl2tsFFUUx3/nzuyWUrtb2krpzkYFgxo1kZcPNEZj4isafNZXoh81QU3YooaAj40aX9BOjUaNyicDJlYTI6JGJWoUFV9RkaCi1mB3bSnS7i5I2925xw9sy7RdQNSIHzzJTSZ37pzzP+f+7/+eAZDyOCRmQs/yXwAghwpAOLgcCgBaDmz+UiVaXnAaH+5LkO6adLAAJDSiQADY8tD9fdi0fMeJEddNqXC6qMxAiJZf9aD6GgTPdaemvHug+OGsxwOwlQP3THUjk1cKcrGqFkBeR+33YmQrUK9wosBFIFNA37CDpZuyS+q37iP50ewdoAoohUDo+CpMW1E43nF0LUKjwP27BktP9S+pz01wnd4U9eLJhYLco8iwiF3QvSi+oQIADVdg0v4ANLRv96pNdCMqv6stXZRZPOWrA+1v8pHcTI3KWlEaitiTe1N1P40n+ggAB4iUgwfND2dnGXdyixhnlgo7RHlHRS9BObNUsif13l7X9WdJNs3vP8rB+VTg5+5U7JQQ4cdUIFqeKDWv+G2ZiLtMjAwBX+8pt8wEUGVhJlX75MEyPeHnrjViVlu112VT8efDAAgBqGp+6Nervfacev7As03Le2pGHawYONfryK/5GxohSb/wTdLPvzeu8mYEgAtEEm07uhLt/etpaXH+acFJ+IV7vI5CKdaeqw8R3xkVnsalnzWKOEehsorOzuAflzwNPhJwDlM5LjztlgFYU9s0FRGMmJ7KGQzMATNL0N7M5i1v8vS8YiXCGcx8gxkaKu7+sO+OqaO+gsBmjXEwSHNIfY0BLC0tRKK114kIih4bduo9kG/wOvJrjTifG5GVIubV5PHHbG5uH5gX3mOvPXefI+4PRsxqhJeqotVdCT9388gCJ+IWFRTDYwk/f8kICANocv6zd4vj3KHYJzK5X9rGsKealSBnW8vNdrB4pLW6ADDGOO95/sA5AImOwl1izJ1gn9FAj6VYPAnV14yYx5N+7kKA7KLYd2hpjqJbReTF5hU7FgAqCX9gjuB8qqors62xGyfofSSyEWsXdbfGHx0rxzVvoXp0gLYYmCFILJOKPbhXDd9xk/F5oqKlzKLYXkVNd03y4g1vIzK7uHPbEUbE3CKiO4v5wdbxe+q6zmyAYqCvhOd7b5+2bXh49/kAjpg1GujH4eCen4948blFRYdRrOfn3b0Apg+WSvZ6oCpSc/gZRlTOU+XlvvTUnROYZ6UfwAj141+VrLs7sM5VAI5rOr0H8g37OwNjE6jrAn1dRBYbFRIg31f6KhiSDaq6y3HNMtLp0e4p2Va4YnJVZDtid2lJz0ZlGtWyrtHvaw6drn11XiOQNgKnGMAKNFUC0LO0tk9Vl4Bcloy3fpT0c+lkR2GVOnQi+klPfvuG7G2xD6wGl4LOmCRVm5J+fnkFxYxUEMdqVVwjyrcqOndftcu2xh8n4EpFoopZpsqZoro882PvOaSnD+5ZU/emRU5VWI/IrUBNyEUfUJzYDOhc0E3idRTuBO61Vs/6tTX2/oFaLzqvCg60xjv9Ai3frCMWzaRioyASbf2zxbifqOgtwq1bqryjm74EnOB3OaNnaW3f31Vdz89HgaHQVHUmFRsEODy97bBoXfV6VONDw0MnCIDXljsNx6wDCqIs7N783ZpKUvsng+u+j4KNCGYLSBIbXJBZXLdOxnQvEXlORE4FBhX9UmDgIONfDkRUyVXoAKOCCMoXluCGbKrui4n/AC0vON78865AzIUC03VPm3awdhOQKZNv5PKvAcGi12R/6l3FYzOH/pWfjv1tx//2n7E/ABuoJS3qdUBxAAAAAElFTkSuQmCC) no-repeat scroll center center}',i=document.createElement("style")
i.type="text/css",i.appendChild(document.createTextNode(o)),document.head.appendChild(i),t(document,"DOMContentLoaded",function(){function o(e,t){return["[",e.toUpperCase(),"]",t,"[/",e.toUpperCase(),"]"].join("")}function i(e,t){u[e]=t}function r(e){console.log(e),e.origin.indexOf("jsfiddle.net")>0&&e.data[0]in u&&i.apply(null,e.data)}function a(t){u[t]={url:"http://jsfiddle.net/",css:"",js:"",html:""}
var o=e(".vBulletin_editor")[0],i=document.createElement("b")
i.innerHTML="<div><strong class='cbfBtn' data-code='url' data-id='"+t+"'>Fiddle #"+Object.keys(u).length+"</strong>"+["js","html","css"].filter(function(e){return n.showAllButtons||n.codes.indexOf(e)<0}).map(function(e){return"<a class='cbfBtn' data-code='"+e+"' data-id='"+t+"'>"+e.toUpperCase()+"</a>"}).join("")+"</div>",o.appendChild(i.firstElementChild)}function d(e){var t=l(e)
a(t),window.open((e?e:"http://jsfiddle.net/")+"#"+t)}function l(){return location.href.split("#")[0].replace(/[^a-f\d]/g,"")+(new Date-0)}function s(e){var t=vB_Editor["vB_Editor_"+(document.getElementById("vB_Editor_001")?"001":"QR")]
t.check_focus(),t.insert_text(e,!1)}function c(){var o=[].slice.call(e("div[id^='post_message'] a[href*='jsfiddle.net']:not(.checkedLink)")),i="embedded/"+n.tabs+"/"+(n.dark?"dark/":"")
o.reverse().filter(function(e){return["","user","api"].indexOf(e.href.split("/")[3])<0}).forEach(function(e){var o,r,a,l,s,c
c=e.href.split("#")[0].replace(/\/$/,""),console.log(c),console.log(c.match(/\/([^\/]+?)(?:\/\d+)?$/)),e.addEventListener("click",function(e){e.preventDefault(),d(c)},!0),s=c.split("/").concat(i).join("/"),o=c.match(/\/([^\/]+?)(?:\/\d+)?$/)[1]
var p=c.replace(/[^a-f\d]/,""),f=document.createElement("b")
return f.innerHTML='<div class="spoiler"><input type="checkbox" id="'+p+'" '+(n.open?"checked":"")+'><label class="alt2" for="'+p+'">'+e.innerText.toUpperCase()+':</label><div class="text"><iframe src="'+s+'" width="100%" height="70" frameborder="0"sandbox="allow-forms allow-popups allow-scripts allow-same-origin allow-modals"></iframe></div></div>',r=f.querySelector("iframe"),e.parentNode.parentNode.insertBefore(f.firstElementChild,e.parentNode.nextSibling),e.classList.add("checkedLink"),l=function(e){return e.slug===o?r.height=e.height:void 0},a=function(){return function(e){var t,n
return n=e.data[0],t=e.data[1],"embed"==n?l(t):void 0}}(this),t(window,"message",a,!1)})}var p=e(".vBulletin_editor tr")[0],f=document.createElement("td")
f.innerHTML="<div class='fbtn-import'></div>",f.onclick=function(){var e=prompt("Введите ссылку нафидл","http://jsfiddle.net/");/^https?:\/\/jsfiddle\.net\//.test(e)&&["","user","api"].indexOf(e.split("/")[3])<0&&d(e.split("#")[0])}
var A=document.createElement("td")
A.innerHTML="<div class='fbtn'></div>",A.onclick=function(){d()},p.insertBefore(f,e("div[id*='_cmd_resize_0_']")[0].parentNode.previousElementSibling),p.insertBefore(A,f)
var u={}
t(window,"message",r,!1),e(".vBulletin_editor")[0].addEventListener("click",function(e){var t=e.target
if(t.classList.contains("cbfBtn")){var i=u[t.dataset.id]
if(e.preventDefault(),"url"==t.dataset.code){var r="[URL="+i.url+"]песочница[/URL]"
n.codes.forEach(function(e){i[e].length&&(r+="\n"+o(e,i[e]))}),s(r)}else s(o(t.dataset.code,u[t.dataset.id][t.dataset.code]))}},!0),c()
var h=new MutationObserver(function(e){e.forEach(function(e){"childList"==e.type&&[].forEach.call(e.addedNodes,c)})})
h.observe(document.getElementById("posts"),{childList:!0})})}():function(){if("#cbef"==location.hash.substr(0,5)){var e=location.hash.substr(1),t=location.href
document.addEventListener("DOMContentLoaded",function(){function n(){window.opener.postMessage([e,{url:(t=location.href).split("#")[0],html:o("id_code_html"),css:o("id_code_css"),js:o("id_code_js")}],"*")}function o(e){return document.getElementById(e).value}setInterval(function(){console.log(o("panel_html")),t!=location.href&&(location.hash!="#"+e&&(location.hash="#"+e),n())},1e3),n()})}}()}(window)
1
tolimadokara
745 / 413 / 91
Регистрация: 24.10.2012
Сообщений: 3,023
07.08.2016, 21:28 15
BANO, не бывает последней версии программы Первая версия, бывает А последней, крайней не бывает Обязательно, скоро ещё что то придумается и скрипт станет более функционален.
0
BANO
Ренегат
Эксперт HTML/CSS
1716 / 1059 / 385
Регистрация: 06.08.2014
Сообщений: 5,203
Записей в блоге: 1
07.08.2016, 21:32  [ТС] 16
tolimadokara, на данный момент это последняя версия.
2
ntlinuxnt
$ su
1598 / 513 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 2
Завершенные тесты: 5
08.08.2016, 14:34 17
Всем кто боится закладок и прочих причуд, увы не сжатая версия не влазит в сообщение превышая 15000 тысяч символов, посему, обращаю внимание что актуальную версию кода можно получить на нашем репозитории
ВОТ ЗДЕСЬ она не сжата и можно смотреть за ходом разработки.
2
8Observer8
2298 / 1464 / 237
Регистрация: 05.10.2013
Сообщений: 4,533
Записей в блоге: 56
01.07.2017, 11:29 18
У меня не отображается ""Быстрая" кнопка открытия сервиса jsfiddle.net". Её убрали? Если да, то почему?
0
ntlinuxnt
$ su
1598 / 513 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 2
Завершенные тесты: 5
02.07.2017, 00:22 19
Цитата Сообщение от 8Observer8 Посмотреть сообщение
Её убрали? Если да, то почему?
Скорее всего за год на форуме что-то поменялось, надо доделывать.
1
ntlinuxnt
$ su
1598 / 513 / 97
Регистрация: 18.11.2010
Сообщений: 2,805
Записей в блоге: 2
Завершенные тесты: 5
03.09.2017, 18:29 20
Цитата Сообщение от 8Observer8 Посмотреть сообщение
У меня не отображается ""Быстрая" кнопка открытия сервиса jsfiddle.net". Её убрали? Если да, то почему?
Что-то починили на форуме и оно заработало.
0
03.09.2017, 18:29
MoreAnswers
Эксперт
37091 / 29110 / 5898
Регистрация: 17.06.2006
Сообщений: 43,301
03.09.2017, 18:29

Составить функции для интеграции полинома на С++
Ввести структуру для описания понятия алгебраический полином. Составить и...

Угрозы интеграции автоматизированных технологий для человечества
Итак, решил поднять такую, как мне кажется важную и актуальную тему, напрямую...

Система приема платежей для интеграции в БД сайта?
Посоветуйте систему приема платежей от клиентов, с ее дальнейшей интеграцией в...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
20
Ответ Создать тему
Опции темы

КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin® Version 3.8.9
Copyright ©2000 - 2018, vBulletin Solutions, Inc.
Рейтинг@Mail.ru