factotum:тут рабочий пример Livepreview. Довести до ума и будет счастье
Ну да, минипрофиля нет. Да и отправка по каждому символу раз в секунду
завалит любой сервер, кроме разве что вконтакта и круче.Парсинг BBCode через AJAX
Список разделов › phpBBex 1.x (поддерживается) › Пожелания 1.x
factotum » 28.09.2013, 21:30
если честно, задачи предосмотра в реалтайм не ставил. думаю, пока остановлюсь на предосмотре по клику на "предосмотр". если станет тесно, будем двигаться дальшеVEG:Если загружать предпросмотр во фрейм, то будет работать.
Добавлено спустя 3 минуты 52 секунды:
не завалит. но сетевые пакеты да, сыплются как из ведра. По другому нужно делать обработчик на js или обновлять по требованию. В последнем случае уже не лайв, но без редиректов.Sumanai:завалит любой сервер, кроме разве что вконтакта и круче.
там реализация без заморочек. плагин определяет активность и отсылает содержимое формы в парсер. После пересылает полученный контент в условленный ноуд. Определить ид автора не составит труда. Думаю, можно сделать красиво.Sumanai:минипрофиля нет
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
Sumanai » 28.09.2013, 21:38
factotum:думаю, пока остановлюсь на предосмотре по клику на "предосмотр".
Это лучший вариант, просто и со вкусом.
factotum:плагин определяет активность и отсылает содержимое формы в парсер.
Не похоже. В файрбаге запросы каждую секунду.
- Sumanai
- Репутация: 1677
- С нами: 11 лет 2 месяца
factotum » 28.09.2013, 21:42
и да, если VEG вынесет инициализацию bbcode в формате <div id="data-bbcode">JSON data</div>, то парсер на JS допишу 
Добавлено спустя 4 минуты 1 секунду:
Добавлено спустя 4 минуты 1 секунду:
есть вариант еще один. но это в моем случае с markitup. При вставке bbcode текстовый процессор создает индивидуальное событие. К нему и можно привязать обновление. Либо дописывать события в дефолтные скрипты phpBB, чтобы в итоге получить markitup...Sumanai:Не похоже. В файрбаге запросы каждую секунду.
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
factotum » 28.09.2013, 23:56
заработало как хотелось бы.
в корень форума кидаем обработчик "preview.php":
В viewtopic_body.html находим подходящее место в конце листинга постов и маркируем его, скажем, <div id="preview"></div>
В принципе можно использовать разметку полноценного поста с данными текущего пользователя. То есть по сути там будет пустой пост, но с аватарой, подписью и прочими регалиями. Скрываем его по ID.
В форме быстрого ответа убиваем текущую кнопку и меняем что-нибудь вроде такого:
Остается все это связать запросом ajax:
Работает достаточно быстро. Нужно поразмыслить о безопасности таких запросов. Скорее всего код немного обрастет
в корень форума кидаем обработчик "preview.php":
- Код: Выделить всё
<?php
define('IN_PHPBB', true);
$phpbb_root_path = (defined('PHPBB_ROOT_PATH')) ? PHPBB_ROOT_PATH : './';
$phpEx = substr(strrchr(__FILE__, '.'), 1);
include($phpbb_root_path . 'common.' . $phpEx);
include($phpbb_root_path . 'includes/functions_posting.' . $phpEx);
include($phpbb_root_path . 'includes/bbcode.' . $phpEx);
include($phpbb_root_path . 'includes/functions_display.' . $phpEx);
include($phpbb_root_path . 'includes/message_parser.' . $phpEx);
$user->session_begin();
$auth->acl($user->data);
$user->setup();
$parser = new parse_message(utf8_normalize_nfc(request_var('text', '', true)));
$parser->parse(true, true, true);
$output = $parser->format_display(true, true, true, false);
echo $output;
?>
В viewtopic_body.html находим подходящее место в конце листинга постов и маркируем его, скажем, <div id="preview"></div>
В принципе можно использовать разметку полноценного поста с данными текущего пользователя. То есть по сути там будет пустой пост, но с аватарой, подписью и прочими регалиями. Скрываем его по ID.
В форме быстрого ответа убиваем текущую кнопку и меняем что-нибудь вроде такого:
- Код: Выделить всё
<span id="btn-preview" class="btn btn-link">{L_PREVIEW}</span>
Остается все это связать запросом ajax:
- Код: Выделить всё
!function ($) {
/* Preview */
$(function(){
function preview() {
// Получаем содержимое панели ответа и помещаем его в переменную text, объявленную в парсере
var text = "text="+encodeURIComponent(document.getElementById("message").value)
//Техническая строка - выводит содержимое, которое получили. можно удалить
console.log('text:',text)
// Выполняем сам запрос
$.ajax({
type: 'POST',
dataType: 'text',
global: false,
//Выше отменяем ненужную глобальность объектов. Ниже в url указываем адрес, по которому будем стучаться
url: 'preview.php',
data: text,
success: function(data) {
// отладочная строка - выводим в консоль что нам прислал парсер
console.log('data:',data)
// ломим место, где нам нужно показать превью и подставляем туда полученное от парсера содержимое
$('#preview').html(data)
},
// На всякий случай для ошибки. Можно сообщить что-нибудь стоящее, пока отладочный код
error: function(xhr, status, error) {
var err = eval("(" + xhr.responseText + ")");
alert(err.Message);
}
})
}
// ждем клика на кнопку превью
$(document).on('click', '#btn-preview', function(e) {
e.preventDefault()
preview()
})
})
}(window.jQuery)
Работает достаточно быстро. Нужно поразмыслить о безопасности таких запросов. Скорее всего код немного обрастет
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
Sumanai » 29.09.2013, 01:16
factotum:В принципе можно использовать разметку полноценного поста с данными текущего пользователя.
Лучше их передавать во время постинга, чтобы иметь актуальные счётчики пузомерок.
factotum:В форме быстрого ответа убиваем текущую кнопку
Лучше просто повесить обработчик с return false, на всякий.
factotum:возник вопрос. нужно ли обрабатывать bbcode_uid?
message_parser должен его обрабатывать. Он нужен, иначе ббкоды не признаются.
Пошёл пробовать.
Добавлено спустя 25 минут 38 секунд:
factotum:<div id="preview"></preview>
То есть вы хотели написать
<div id="preview"></div>.Добавлено спустя 5 минут 12 секунд:
Sumanai:message_parser должен его обрабатывать. Он нужен, иначе ббкоды не признаются.
Понял, я не о том. При отправке нужно обрабатывать, при записи в БД. В предпросмотре он не нужен.
Вот, сваял за 5 минут:
- Sumanai
- Репутация: 1677
- С нами: 11 лет 2 месяца
factotum » 29.09.2013, 11:32
даSumanai:То есть вы хотели написать <div id="preview"></div>.
Поправьте, пожалуйста, в посте. У меня редактирование уже закрыто.разбухает из-за конвертации символов. По другому никак. Это не критично.Sumanai:Вот, сваял за 5 минут:
Приснил полный список вопросов:
1. Безопасность. К запросу нужно прикручивать тоукен. А это критично.
2. Проверка разрешенных бб-кодов
3. Проверка длины сообщения
4. Проверка цензора
5. Проверка мейджик урлов
Может и еще чего. С этим будет полноценный предосмотр
Добавлено спустя 52 минуты 46 секунд:
немного пруфов по теме.
Начальная инициализация: https://wiki.phpbb.com/Practical.Add_custom_page
Проверка тоукена: https://wiki.phpbb.com/Check_form_key
Парсинг текста: https://wiki.phpbb.com/Tutorial.Parsing_text
Генерация текста для вывода: https://wiki.phpbb.com/Generate_text_for_display
Вывод на внешних страницах: https://wiki.phpbb.com/Practical.Displaying_posts_and_topics_on_external_pages
Добавлено спустя 3 часа 10 минут:
строку:factotum:разбухает из-за конвертации символов. По другому никак. Это не критично.
- Код: Выделить всё
var text = "text="+encodeURIComponent(document.getElementById("message").value)
- Код: Выделить всё
var text = $('#message').val()
Добавлено спустя 1 минуту 39 секунд:
добавил сообщение, а редактирование то закрыто. О как!
Забыл строчку:
- Код: Выделить всё
var text = $('#message').val()
text = "text=" + text
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
Sumanai » 29.09.2013, 18:52
factotum:В хроме работает корректно. Нужно тестировать в других браузерах
В файрфоксе урлы не проскакивают, запарывается на &. В принципе нужно кодировать только несколько символов, остальное прекрасно отправляется, так как UTF-8.
- Sumanai
- Репутация: 1677
- С нами: 11 лет 2 месяца
factotum » 29.09.2013, 20:10
phpbb нужно жить, чтобы понимать все нюансы джунглей кода.Sumanai:Озвучите?
Показалось, что проще сделать запрос аджакс к странице с превью, вытянуть оттуда превью и показать на странице.
Не быстро, побольше ресурсов. Но надежно, правильно и безопасно.
уже поймал. Content-Disposition: form-data; name="preview"Sumanai:Я тоже.
Добавлено спустя 15 минут 52 секунды:
Для желающих побаловаться с отладочным кодом:
- Код: Выделить всё
!function ($) {
/* Preview */
$(function(){
function preview() {
var form = document.postform
var formData = new FormData(form)
formData.append("preview", "")
var url = form.action
console.log("form:",form,"formdata:",formData,"url:",url)
$.ajax({
type: "POST",
url: url,
data: formData,
cache: false,
contentType: false,
processData: false,
success: function(data){
//alert("---"+data);
console.log("data:",data)
}
})
}
$(document).on('click', '#btn-preview', function(e) {
e.preventDefault()
e.stopPropagation()
preview()
})
})
}(window.jQuery)
Там уже ловим нужное. Этот же метод можно использовать для всего остального, в том числе загрузки файлов.
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
factotum » 29.09.2013, 21:44
как минимум - не нужно парится с php. Для меня код phpBB дремучий лес, повернутый к фронд-энд разработчикам нифига не лицом. А вот из формы ответа сделать шлюз для работы через ajax - почему бы и нет?Sumanai:И да, посылает всю страницу целиком. Ну нафиг такой аджакс.
Получаем:
+ безопасные запросы
+ корректная поддержка всего функционала
+ избавляемся от редиректов
+ минимум кода
Самом собой, в итоге нужно подменить все операции с формой быстрого ответа на запросы к шлюзу через аджакс.
В противном случае нужен не один модуль на php. Кто это напишет?
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
Sumanai » 29.09.2013, 21:59
factotum:Для меня код phpBB дремучий лес, повернутый к фронд-энд разработчикам нифига не лицом.
ХЗ, я достаточно легко читаю код при необходимости. Он весьма простой. Хотя опыта у меня нет, в блокноте открыт код, а во вкладке браузера- php.net со страницей описания IF, ибо я забываю, что это такое
(утрирую).factotum:Самом собой, в итоге нужно подменить все операции с формой быстрого ответа на запросы к шлюзу через аджакс.
По мне так просто немного модифицировать, распихав обработчики в нужных местах, типа если это аджакс- то не нужно поднимать код выдачи например списка последних 20 сообщений в обратном порядке. Во многих случаях даже условие писать не надо- только дополнить.
- Sumanai
- Репутация: 1677
- С нами: 11 лет 2 месяца
factotum » 29.09.2013, 22:21
допилить можно то, где железно понимаешь как это работает и последствия. Если не уверен, чем это обернется - не трогать!Sumanai:Во многих случаях даже условие писать не надо- только дополнить.
Пока попробую сделать зеркало формы ответа, чтобы стучаться только через аджакс
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет
factotum » 30.09.2013, 20:04
разобрался немного.factotum:Где лучше смотреть, чтобы posting.php отдавал данные в JSON?
Собственно идея в черновике.
копируем posting.php с условным названием, скажем, postingajax.php
получаем точную копию обработчика событий форума, в которой не нужна генерация страницы:
строка 1567 : // Output page ...
тут комментируем строки исходной генерацию страницы.
в конце добавляем вывод данных в формате JSON, что-то вроде этого:
- Код: Выделить всё
header('Content-type: application/json'); /* добавляем ревалентый заголовок при ответе страницы*/
/* Небольшой пример отправки данных превью */
$previewrow = array('message' => $preview_message, 'signature' => $preview_signature, 'signature_uid' => $preview_signature_uid, 'signature_bitfield' => $preview_signature_bitfield );
echo json_encode($previewrow);
добавляем скрипт:
- Код: Выделить всё
!function ($) {
/* Preview */
$(function(){
function preview() {
// Собираем данные формы. Пока так, но в этом виде отсылает кучу не нужных данных. Правильней собрать значения полей input
var form = document.postform
var formData = new FormData(form)
// добавляем событие предосмотра
formData.append("preview", "")
// Обрабатываем линк на парсер формы, подменяя posting.php на свой обработчик
var url = form.action.replace('posting.php', 'postingajax.php');
// Поглядываем в консоли на полученные данные
console.log("form:",form,"formdata:",formData,"url:",url)
// Отправляем запрос
$.ajax({
type: "POST",
url: url,
data: formData,
dataType: "json",
cache: false,
contentType: false,
processData: false,
success: function(data){
console.log("data:",data)
}
})
}
// Слушаем клик по кнопке предосмотра
$(document).on('click', 'input[name=preview]', function(e) {
e.preventDefault()
// Останавливаем действие по умолчанию
e.stopPropagation()
// Отправляем данные формы и получаем обработанные события
preview()
})
})
}(window.jQuery)
+ Полноценный обработчик событий постинга с вытекающими
+ Безопасность в рамках безопасности форума
+ Возможность использовать любые события через запросы AJAX без редиректа на полную форму ответа
+ Нет откровенной необходимости в правках шаблона/ядра
+ Корректная обработка событий с поддержкой функциональности форума
+ Свобода обработки информации с помощью js
+ Пользователи без JS смогут пользоваться исходным функционалом
Интересны мнения других. Может найдутся минисы
- factotum
- Автор темы
- Откуда: Люксембург
- Репутация: 234
- С нами: 12 лет