Все технические форумы на одном сайте Удобный поиск информации с популярных форумов в одном месте
Вопрос: JS Простой редактор фотографий

Всем доброго времени суток.

Посоветуйте простой редактор фотографий на js, который обладает следующим функционалом:
1) Изменения размеров изображения (строго пропорционально 4:3);
2) Изменения яркости, контрастности, экспозиции (не обязательно);
3) Возможность получить все вышеописанные параметры что-бы подсунуть их в php (imagecopyresampled, imagefilter);

Несколько дней гугления не привели ни к чему похожему

(Отредактировано автором: 19 Декабря, 2017 - 01:27:59)

Ответ:
armancho7777777 пишет:
https://fengyuanchen.github.io/cropperjs/

Спасибо, но эта либа не умеет работать с яркостью и контрастностью, так что не походит
Вопрос: Редактор шаблонов текста

Коллеги здравствуйте.

Пролог:
Название этой штуки я не знаю, но думаю "такое" неоднократно делалось, да и продаётся, наверное.
Я бы не хотел эту штуку с нуля мастерить (т.к. много времени затратить предётся) и не плохо было бы её найти на просторах суперНета.

Вступление:
Я тут горожу "классную штуку" (веб ориентированную). Не знал в какой конкретно раздел написать, но подумал, что конкретно эта задача "чисто фронтенд" ну и выбрал JS.
Кликните здесь для просмотра всего текста
(если уважаемые админы знают куда, для большей продуктивности эту тему перенести - воля ваша!)


Суть задумки:
Нужно сделать "текстовый редактор шаблонов".
Что это такое - по сути говоря простой редактор текста.
В чём основная "штука" - в том, что этот редактор имеет возможность подстановки "шаблона текста" (то есть "вставить текст" с блоками статического текста и блоками динамического текста).
Как пример - как пример, у себя в голове, я ориентируюсь на медицинскую форму заполнения результатов. То есть выбрав какое-то исследование, мы получаем уже текстовку с стандартным (статическим) текстом и места куда (дырки) где мы можем подставить свой, произвольный (динамический) текст.
Вот подобное примеру я хочу сделать (с чуть расширенным функционалом).

Суть помощи:
Мне нужно чуть больше инфы для более простого researchа-а.
Если у этой штуки есть общепринятое имя - скажите его.
Если у этой штуки есть известные варианты решения (опенсорс библиотеки или "платные продукты") - дайте ссылки.
Если вы делали эту штуку - напишите мануальчик (план действий) который вы проделали для получения хорошего результата и что использовали.

Что я...:
...а я пошёл ресёрчить дальше
Ответ: Эгэгэй! JS-прошареныйПипол, вы де?
Вопрос: Текстовый редактор кода с нуля

Помогите советами!

Хочу начать писать СВОЙ текстовый редактор кода под броузер. (под особый узкоспециализированный скриптовый язык)
Понимаю - процесс не на один месяц, но с чего-то надо начать!

Надо:

1) каждая строка является аякс-запросом на сервер (в PHP). Каждый ентер или переход с измененной строки на другую вызовет отправку строки на сервер.
2) каждая строка имеет свой "блок маркеров" перед текстом. (типа поставлена метка для прыжка, здесь ошибка, обнаружена переменная)
3) все строки обьединены в общий скролл. (как в обычном редакторе)
4) могу управлять цветами текста в каждой строке (как в HTML, но со стороны сервера)
5) можно управлять копи-пасте как текстом на несколько строк.

Когда-то нечто подобное начинал писать на Делфи, рисовал с нуля каждую строку на канвасе
Сейчас хочу переписать на яваскрипт "под сервер" для онлайн редактирования скриптов.

Видел похожие "редакторы" под коды на других языках (яваскрипт, css, ruby, pyton). Там каждая строка отдельным фоном, с проверкой орфографии на сервере и подсветкой ключевых слов.

Может есть некие готовые "фрейворки"? Чтобы совсем с нуля не писать?

Или хотя-бы посоветуйте с чего начать??? Общий большой канвас? набор канвасов под строки? Класс наследник редактора? Некий класс наследник некого универсального компонента html? Вообще без ООП?
Ответ:
Сообщение от Padimanskas
Вот тут нужно определиться - либо текстовый редактор с нуля, либо заготовка для редактора, либо нефреймворк, либо неканвас, либо обучающие материалы с нуля по всему стеку ))
Мне нужно то, на чем можно написать максимально БЫСТРО мультиплатформенный текстовый редактор для браузера (подгрузил на любом чужом компе с сервера недостающие js и меняешь код лежащий на сервере).

Либо адаптировать чужой редактор (сейчас склоняюсь что проще "сломать"/"наложить свои скрипты" на готовый универсальный ACE-редактор), либо писать совсем с нуля. ACE использует целиком теги html (каждая строка=div). Он (вроде) абсолютно мультиплатформенный (не будет глюков - канвас не заработал на старом андроиде/маке/айпэде/ie6). Он не требует модификации серверной части - там php через jquery, здесь hml+javascrip+js-файлы самого редактора. Не понадобиться ставить что-нибудь вроде Pyton или NodeJS на хостинг.

Просмотрел сотню редакторов и вьюверов. Скачал и опробовал десяток. Канвасных не встретил. Большинство на уровне "выделил" и "изменил стиль" (для "админок-редакторов статей", вики-страниц или форумов). С ace я провозился пока только 4-6 часов. Уже умею менять стили, нащупал как менять расскраску текста формулами, вставлять формулы в зону номеров строк, Нашел сотни примеров, включая авто-тесты манипуляции текстом из js - курсор бегает, выделяется, удаляется, вставляется текст... Правда ОЧЕНЬ много незнакомого кода. И я еще не понял как сохранять изменения. И не нашел точку где он читает файл (хотя команду указания файла нашел, но не кусок в исходнике где он его разлагает на строки). Нашел в тестах "вывод логов всех действий" - теоретически смогу обрабатывать изменение строк (но еще не управляю этим). Думаю часов за 100-300 внесу хоть как-нибудь ВСЕ нужное мне (скорее всего нагло ломая исходники - скрипты "настроек" писать на порядок сложнее)... Даже смогу подкладывать мини-картинки нарисованные на javacript-канвас в зону номеров или в зону скролла (нужна "карта кода"). Некоторых возможностей не находил даже в обычных редакторах (мультикурсоры - 3-4 варианта, выпадающий миниредактор под строкой с этим-же текстом, быстрая подмена клавиш - например "как VIM")

Сколько я буду писать подобное на NWJS ? И что полезного мне даст изучение этого фреймворка? (пока нашел только одну популярную программу написанную на нем - все жаловались на большие размеры файла - торрент-просмотрщик фильмов. И та была "снята с поддержки". Остальные на хабре жалуются на фреймворк)
Вопрос: Визуальный редактор

Приветствую форумчане!

Хочу к себе в админку поставить текстовый редактор, и вот столкнулся с большим выбором.

Кто с чем сталкивался и кто что использует? Какой редактор лучше?

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

Пока что из всей инфы выбрал несколько редакторов:

1) jHtmlArea - есть все необходимые функции и просмотр в текстовом режиме

2) MarkItUp - очень интересный редактор. но он сразу работает в текстовом режиме, если
выделяешь слово к примеру жирным то автоватом видно тег

3) TinyMCE - неплохой, но очень громоздский

4) CLEditor - тоже неплохой редактор со всем нужным функционалом и есть возможность
просмотра в текстовом режиме.

Вот из всех которые глянул больше понравились вот эти 4 редактора.
А из этих 4 мне больше нравятся 1 и 4.

Честно говоря наверно бы выбрал 4- CLEditor, но вот что меня в нем смущает, он все
стили запихивает в тег span, даже тотже болд, вместо strong или b он прописывает
<span style="font-weight: bold;">
И вот этот тег span меня очень смущает, так как вроде как он закрывает контент
от индексации если текст будет помещен в тег span. Может я конечно и не прав,
если так то прошу подтолкнуть что лучше.

Кто с чем имел дело, какой проще в установке и настройке?

_
Ответ:
Ну может и не логично, но я не в довался в подробности какой у вордпресса.
Я прекрасно понимал и понимаю что есть много редакторов и значит есть выбор.
Вот и начал искать те которые бы подошли именно мне. С этой точки зрения все
и началось, думаю что это логично. А задуматься о редакторе как у вордпресс даже в
мыслях не было, так как пришлось бы искать инфу что у него за редактор, потом
смотреть именно его функционал и еслиб так и случилось, то может я бы и не
смотрел остальные редакторы а просто остановился на вордпрессовском. Я просто
отдал предпостение поиску выбора и сравнению
Вопрос: Адаптивная верстка и серверный визуальный редактор

Как я понимаю, при адаптивной верстке размеры элементов указываются не в пикселях, а в относительных единицах (например, в процентах). Но если в CMS имеется визуальный редактор (например, TinyMCE), то он при создании кода указывает размеры графики в пикселях. И получается, что использование визуального редактора исключает адаптивность верстки.

Есть ли решение этой проблемы?
Ответ: Владимир55 Если верно сделан адаптивный макет то пофигу что девочки текст будут в пикселях вставлять, по уму даже на простом сайте ничего не должно ломаться при вставке контента.
Ну а еще можно как выход предложить, там где возможно что контент попробуют поломать пикселями пропишите в css important, потом пускай мучаются ломают )))
Вопрос: текстовый редактор, заменить div на p

Здравствуйте.

Пишу текстовый редактор для админки, есть такая проблема : в окне редактора (iframe с designMode = "on") , по нажатию на enter создается div, который будет содержать контент.
Необходимо вместо div создавать p .

Узнал, что див создается из-за работы с designMode = "on" .

Я представляю решение так : отловить enter , создать p , и отменить действие по умолчанию .
Javascript
1
2
3
4
5
6
7
frame.onkeydown = function(event) {
  if (event.keyCode == 13) {
    p = frame.document.createElement("p");
    frame.document.body.appendChild(p);
    event.preventDefault();
  }
}
В моем примере скрипт работает, тег p вместо div создается, но курсор внутрь тега не попадает и добавить контент в него нельзя, курсор остается на прежнем месте (в начале).

Подскажите логику, как можно исправить это, или возможно, есть другие способы ?
Ответ: Решение оказалось очень простым, как для iframe так и для div с contenteditable = true :
Javascript
1
document.execCommand('defaultParagraphSeparator', false, "p");
Вопрос: Как разместить фотографии в HTML горизонтально?

Здравствуйте! Прошу помощи, на сайте HTML нужно разместить две фотографии горизонтально, рядом с друг другом..
Что не делаю, не получается! В итоге фотки размещаются вертикально.. Делал через <p>...</p> , делал черз <div>...</div>...
Через сss не знаю как..
Ответ: nik25, можно бородатый костыль с флоут. Но лучше использовать флексбокс.

Добавлено через 10 минут
Как-то так получится:
Код CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
/*(правило для контейнера в котором находятся фотографии)*/
.photos {
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -webkit-flex-direction: row;
    -ms-flex-direction: row;
    flex-direction: row;
    -webkit-flex-wrap: nowrap;
    -ms-flex-wrap: nowrap;
    flex-wrap: nowrap;
    -webkit-justify-content: space-around;
    -ms-flex-pack: distribute;
    justify-content: space-around;
    -webkit-align-content: space-around;
    -ms-flex-line-pack: distribute;
    align-content: space-around;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}
Вопрос: Tiny MCE редактор и markdown-код

Всем привет,
В Framework 5.5.3/jquery/bootstrap приложении есть редактор содержимого(статьи и темплейты мейлов), где подключается
CK Editor или Tiny MCE редакторы в зависимости от настроек
Понадобилось реализовать поддержку markdown

Погуглив я нашел плагин
Я его подключил( отключив все остальные настройки - сделал как в описании )
Посмотреть можно тут

Но введя небольшой кусок markdown-кода :
An h1 header
============

Paragraphs are separated by a blank line.

2nd paragraph. *Italic*, **bold**, and `monospace`. Itemized lists
look like:

* this one
* that one
* the other one



И сохранив редактор в переоткрывшейся странице в tiny-редакторе я вижу что код введен одной строкой и редактировать его довольно неудобно.
1) Я чего-то недоставил ?
2) Или сохряняя нужно символ перевода строки менять на <br>?
3) Или если текст markdown, то выводить обычный textarea ?
4) Как-то иначе ?
Спасибо!

Ответ: Спасибо, так ошибка ушла, но и при работающем редакторое текст после сохранении отображается в одну строку
Я копирую из текстового редактора (чтобы исключить html-код через буфер обмена и сохраняю) текст :

# h1 Heading
## h2 Heading text
### h3 Heading
#### h4 Heading
##### h5 Heading
###### h6 Heading


и сохраяню без обработки ссимвлолов конца строки

Оставляю в обработчике:
    tinymce.init({
selector: "textarea", // change this value according to your HTML
plugin: 'textpattern,pagebreak,nonbreaking',


setup: function(editor) {
editor.on('BeforeSetContent', function(e) {
console.log('BeforeSetContent event e.content : ', e.content);
console.log('BeforeSetContent event e.initial : ', e.initial);
if (e.initial) {

var str = e.content.replace(/\r?\n/g, 'ZZZZZ');
console.log('BeforeSetContent event -1 str : ', str);

var str = e.content.replace(/\n/g, 'XXXXX');
console.log('BeforeSetContent event -2 str : ', str);

var str = e.content.replace(/\r/g, 'WWWWW');
console.log('BeforeSetContent event -3 str : ', str);
e.content = e.content.replace(/\r?\n/g, '<br />');

}
}
);
},

В JS консоль я вывожу строку, чтобы удостовериться что символы перевода строк отсутствует
и в контроле средствами php посимвольно вывожу содержимое строки с их кодами:
То есть после символов “ing” сразу идет пробели и 2 символа ‘##’ новой строки.
Это при сохранении tinymce так рендерит текст ? У него еще какие-то настройки ?
Ранее я сохранял html текст и никаких продлем не было ...
Вопрос: Плагины для редактора TinyMCE не работают

Здравствуйте.
Есть сайт на wp со встроенным редактором TinyMCE. Как вы знаете, для этого редактора можно писать плагины. Находятся они в папке редактора /plugins. Но они почему-то не работают. Даже если удалить эту папку полностью, они не будут работать...
Кто может подсказать в чем может быть дело? Спасибо.
Ответ: Ну да, логично, точно... Имеел ввиду, что папка с плагинами имеет уйму плагинов. И без этой папки работа редактора не изменяется...

Да, проблема в том, что отстутсвуют признаки работы плагинов... Попробую разобраться с тем, подключаются они или нет. Но вот найти бы это самое место подключения...
Вопрос: Как поставить редактор ckeditor

Как поставить редактор ckeditor
или другие редакторы...
Заранее спасибо.
Ответ: Настройка системы
Настройка параметров скрипта (используйте навигацию для доступа к разделам)

Редактор при добавлении/редактировании новостей в админпанели:
Выберите редактор, который будет использоваться при добавлении или редактировании новостей в админпанели