Перейти к содержимому


Пользователь месяца
Андрей WPMasterKZ Андрей WPMasterKZ 1-й за Ноябрь
Очков активности: 888 1 тема, 71 сообщение, 8 баллов репутации
Сайт: wpmaster.kz
ТОП самых активных за этот месяц
  • Фотография OlgaGetman
    #1

    OlgaGetman
    Очков активности: 666 5 тем, 96 сообщений, 4 балла репутации

  • Фотография Mandarin
    #2

    Mandarin
    Очков активности: 552 3 темы, 83 сообщения, 4 балла репутации

  • Фотография TimurR
    #3

    TimurR
    Очков активности: 150 Вне конкурса за определение пользователя месяца

  • Фотография Андрей WPMasterKZ
    #4

    Андрей WPMasterKZ (wpmaster.kz)
    Очков активности: 117 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 102 0 тем, 17 сообщений, 4 балла репутации

  • Фотография Rodiola
    #6

    Rodiola
    Очков активности: 45 1 тема, 12 сообщений, 2 балла репутации

  • Фотография WGN
    #7

    WGN (worldgamenews.com)
    Очков активности: 36 Вне конкурса за определение пользователя месяца

  • Фотография thisismyname
    #8

    thisismyname
    Очков активности: 27 4 темы, 6 сообщений, 1 балл репутации

  • Фотография pozitron123
    #9

    pozitron123
    Очков активности: 24 2 темы, 10 сообщений, 1 балл репутации

  • Фотография m3Re
    #10

    m3Re
    Очков активности: 22.5 2 темы, 9 сообщений, 1 балл репутации

  • Показать весь ТОП 10
Поддержите форум! =)
Апдейты
  • Яндекс ИКС: 29.11.2018
  • Яндекс выдача: 11.12.2018
Топ 5 участников по репутации


Визуальный редактор своими руками

#1 WebJunior

WebJunior
  • Пользователь
  • 60 сообщений
  • Репутация: 9
0

Отправлено 17 January 2018 - 14:48

Доброго времени суток! Хочу для своего проекта создать визуальный редактор так, как ныне существующие редакторы мне не очень нравятся. Скажите, что для этого нужно? Как я понял все визуальные редакторы работают по следующей схеме. Создаётся html элемент див или параграф(не важно) с атрибутом contenteditable, А дальше уже js добавляет нужные тэги к выделенному тексту. У кого есть опыт в создании визуального редактора подскажите как лучше всего его реализовать?

 

 

P.S Заметил, что темы с вопросами про визуальный редактор имеют печальную статистику куча просмотров и ни одного ответа. Надеюсь мою тему не постигнет та же участь)


 

 

Сообщение отредактировал Разгильдяев: 17 January 2018 - 14:50

  • 0

#2 Ixman

Ixman
  • Пользователь PRO
  • 2974 сообщений
  • Репутация: 775

Отправлено 17 January 2018 - 15:00

@Разгильдяев, опыта как такого в разработке полноценного визуального редактора нет. Делал небольшой скриптик для поля textarea и нескольких тегов. По существу весь код работает через JS. Думаю иного и городить не нужно. А так всё зависит от того, какой функционал вам нужен.


  • 0


#3 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 17 January 2018 - 15:11

А так всё зависит от того, какой функционал вам нужен
 

 

Обычный текстовый редактор без особых наворотов. К примеру такой же как на этом форуме только чуть по скромней.


  • 0

#4 Ixman

Ixman
  • Пользователь PRO
  • 2974 сообщений
  • Репутация: 775

Отправлено 17 January 2018 - 15:48

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


  • 1


#5 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 17 January 2018 - 16:17

Рекомендую присмотреться к http://wysibb.com/

Там есть отличная возможность добавлять свои теги и поведение. Вполне может быть и не придется создавать свой. Но этот редактор на bb-кодах. Может быть они сейчас не так актуальны, как раньше. Сейчас вроде MD очень хорошо развивают и удобный он.

Если будешь делать свой, присмотрись к этому, мне понравилась возможность регистрации своих тэгов.


  • 2

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#6 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 17 January 2018 - 18:06

@fedornabilkin, Благодарю! Очень крутая идея использовать стразу bb-коды без html-тэгов. Я обязательно возьму это на вооружение. А свой визуальный редактор мне больше для интереса хочется сделать. Приятно пользоваться тем, что сделано своими руками)


  • 0

#7 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 17 January 2018 - 21:01

Напишу здесь не буду ради этого новую тему создавать. Такой вопрос. Начал пилить свой визуальный редактор и заметил, что метод getSelection через который можно получить выделенный текст вдруг перестал работать. Просто ничего не возвращает и всё. И выяснил, я что дело в атрибуте contenteditable без него выделенный текст прекрасно перехватывается.

 

Screenshot_1.png

 

А если выделить текст в не редактируемом диве то тогда всё в порядке

 

Screenshot_2.png

 

Интересная особенность. У кого какие соображения?


  • 0

#8 miketomlin

miketomlin
  • Пользователь
  • 515 сообщений
  • Репутация: 109

Отправлено 18 January 2018 - 02:20

@Разгильдяев, contenteditable, конечно, фишка интересная, но большинство популярных редакторов использует обычную textarea. Как выше советовали, «изучите врага в лицо» и сделайте лучше. Ничего особенно крутого в bb-кодах я не вижу. Все равно нужно тщательно проверять и структурировать (строить иерархию тегов в стеке) поступающие данные на стороне сервера, а с bb- еще и подменять придется.


  • 0


#9 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 18 January 2018 - 09:21

Один из главных моментов - учесть возможность использования нескольких редакторов на одной странице. Чтобы у каждого редактора была своя инициализация со своими настройками. Еще несколько раз замечал такой подход, что текст печатают в обычной textarea, а визуализация происходит чуть ниже в диве. Тогда нет необходимости использовать contenteditable. Вполне вероятно, что он не будет работать в старых браузерах.


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#10 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 18 January 2018 - 12:14

@miketomlin, Кажется я понимаю о чём вы. Только не понятно как это реализовать. Что бы текст из textarea попадал в div. Ну точнее реализация то не хитрая пару строчек. Я имею ввиду как это всё визуально уложить? Что бы текст печатался в textarea, а выводился в div и при этом визуально этого не было бы заметно. Вот это задачка конечно интересная) 


  • 0

#11 Ixman

Ixman
  • Пользователь PRO
  • 2974 сообщений
  • Репутация: 775

Отправлено 18 January 2018 - 13:49

@Разгильдяев, отслеживайте изменение в текстовом поле и вставляйте в div. JS или jQuery в помощь. Что там вы используете. 


Сообщение отредактировал Ixman: 18 January 2018 - 13:50

  • 0


#12 miketomlin

miketomlin
  • Пользователь
  • 515 сообщений
  • Репутация: 109

Отправлено 18 January 2018 - 15:16

В какой div? Тег textarea – парный. Теги форматирования могут размещаться и внутри него, хотя вам никто не запрещает на стороне клиента использовать bb-, наложение блока поверх textarea и т.п. Я писал о том, что перед отправкой серверу ваши bb- можно преобразовывать в нативный вид, чтобы не возиться с bb- на стороне сервера, а заниматься исключительно проверками безопасности и соблюдения структуры. И, если что, мой пред. пост касался вашего стартового поста, а не вашего послед. вопроса.


Это пост, адресованный ТСу.


  • 0


#13 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 18 January 2018 - 16:07

Вы меня не поняли) Я имел ввиду то каким образом я могу див внешне выдать за textarea. В textarea текст не будет трансформироваться на ходу. bb-коды добавить можно налету, но тогда это уже не визуальный редактор, а просто удобное поле ввода. Кстати на этом форуме текст вводится именно в div с атрибутом contenteditable ни в textarea.

 

В прочем это уже не имеет значения потому что я решил взять готовый редактор который мне порекомендовал @fedornabilkin за что ему спасибо.

 

Я скачал исходники wysibb посмотрел объём кода и понял, что я не готов потрать столько времени сколько потратил автор данного редактора) Если взять во внимание, что я не профи то времени у меня уйдёт гораздо больше чем у создателя wysibb.

 

Спасибо всем кто отписался в теме. Благодаря вам я не пустился в авантюру))


  • 1

#14 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 18 January 2018 - 17:11

Если что, могу подкинуть класс для обработки bb-code на стороне сервера. Он немного сыроват, но с задачей справляется и не грузит сервак при обработке текста с большой вложенностью bb. Лично пробовал конструкцию [quote ...[quote... ]...] с вложенностью более 50-ти раз. Возможно я этот класс затачивал именно под этот редактор.

А вообще, если сайт еще не наполнен контентом, и нет необходимости серьезного функционала в редакторе, я бы присмотрелся к MarkDown


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#15 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 18 January 2018 - 17:47

Если что, могу подкинуть класс для обработки bb-code на стороне сервера

 

Да я бы не отказался взглянуть на реализацию обработки bb-кодов. 

 

Вообще, что бы не было перегрузка количество цитат можно ограничить как это реализовано в phpbb не более трёх.

 

А вообще, если сайт еще не наполнен контентом, и нет необходимости серьезного функционала

 

Сайт пока существует только на локалке, но я всегда готовлюсь заранее, что бы когда сайт(форум) появится люди заходили и кайфовали, что бы им было удобно)


  • 0

#16 Ixman

Ixman
  • Пользователь PRO
  • 2974 сообщений
  • Репутация: 775

Отправлено 18 January 2018 - 18:00

Не знаю на сколько он хорош по производительности, но я в своё время заюзал данный вариант http://xbb.uz/docs/ Не очень сложно дополнять своими тегами.


  • 0


#17 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 20 January 2018 - 14:02

Рекомендую присмотреться к http://wysibb.com/
 

 

Как оказалось не работает с последней версией jquery.


  • 0

#18 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 20 January 2018 - 16:54

Выявил ещё одну проблему в wysibb. У него почему-то не работают тэги B и не оказывают на текст никакого воздействия. Возможно css редактора конфликтует как-то с моим css. Из-за чего конкретно возникают косяки выявить не смог. Если у кого-то будут аналогичные проблемы можно добавить в css редактора следующие строчки. 

.wysibb-text-editor b{font-weight: bold;}
.wysibb-text-editor i{font-style: italic;}

Сообщение отредактировал WebJunior: 20 January 2018 - 16:54

  • 0

#19 fedornabilkin

fedornabilkin
  • Модератор
  • 1132 сообщений
  • Репутация: 193

Отправлено 22 January 2018 - 20:16

Как оказалось не работает с последней версией jquery
Я это тоже обнаруживал, писал разработчикам, вроде как поправили. Попробуй скачать последнюю версию с гитхаба.

Или ошибку из консоли сюда, починим, если мозгов хватит :) 


  • 0

Надо обсудить предложение. А тут знакосчиталка считает знаки. Про Yii2 написано.



#20 WebJunior

WebJunior
    Topic Starter
  • Пользователь
  • 60 сообщений
  • Репутация: 9

Отправлено 22 January 2018 - 20:46

@fedornabilkin, А на сайте разве не актуальная версия? 


  • 0

robot

robot
  • Пользователь PRO
  • 2652 сообщений
  • Репутация: 85


Похожие темы

  Название темы Автор Статистика Последнее сообщение

Оформление форума – IPBSkins.ru