Textria Для вашего сайта
Дайте посетителям место для заметок прямо на вашей странице. Выберите язык и размеры, попробуйте редактор и скопируйте готовый HTML-код.
Это работающий редактор. Если он шире области предпросмотра, прокрутите её по горизонтали.
Вставьте этот код в HTML страницы или в блок «HTML» вашего конструктора сайта.
Текст временно хранится в sessionStorage браузера и восстанавливается при перезагрузке iframe. Это не постоянная заметка: для дальнейшей работы перенесите её в личный блокнот. Если хранилище недоступно, черновик остаётся только в памяти до перезагрузки.
Ссылка «Открыть личный блокнот» в строке состояния открывает Textria в новой вкладке и переносит текст с форматированием в новую заметку. Для пустого редактора открывается блокнот без создания заметки. При блокировке новой вкладки сообщение появляется в строке состояния.
На странице можно разместить несколько iframe: у каждого свой черновик. Если ваш сайт удаляет и заново создаёт iframe, задайте постоянный параметр instance в настройках выше. Разные редакторы должны иметь разные идентификаторы.
Включите API в настройках выше и укажите origin страницы, в которую вставляете редактор. В src появятся api=1 и parentOrigin. Без этих параметров обмен отключён. Редактор принимает запросы только от непосредственной родительской страницы с указанным origin.
| Сообщение | Назначение |
|---|---|
textria:embed:ready | Редактор загрузил черновик и готов принимать запросы. Содержимое не передаётся. |
textria:embed:ping | Проверка готовности: редактор отвечает ready. Полезно, если обработчик подключён после загрузки iframe. |
textria:embed:get | Получить актуальное содержимое. Ответ content содержит text и html. |
textria:embed:set | Заменить содержимое: передайте content и format: text или html. Пустая строка очищает редактор. В ответе content возвращается результат после обработки. |
textria:embed:error | Ошибка запроса: unsupported-version, invalid-format, invalid-content, content-too-long или editor-error. |
У каждого запроса обязательны version: 1 и уникальный requestId (до 120 латинских букв, цифр и символов _ . : -). Ответ содержит тот же requestId. Лимит записи — 1 000 000 символов. text сохраняет пробелы и переносы строк без интерпретации Markdown; html сохраняет поддерживаемое оформление, удаляя изображения, скрипты и небезопасные ссылки. Запись участвует в автосохранении, её можно отменить в редакторе. Ответ подтверждает применение текста, а не запись в хранилище. Автоматических событий изменения нет: запросите текст через get, когда он нужен вашему сайту.
Разместите этот JavaScript после iframe. В коде iframe при включённом API автоматически появится id; пример ниже учитывает идентификатор из настроек. Проверяйте event.source и event.origin, а в postMessage передавайте точный origin редактора.
const iframe = document.getElementById("textria-editor");
const editorOrigin = new URL(iframe.src).origin;
let nextRequestId = 0;
function send(type, payload = {}) {
const requestId = "embed-" + ++nextRequestId;
iframe.contentWindow.postMessage({
...payload, type, version: 1, requestId,
}, editorOrigin);
return requestId;
}
window.addEventListener("message", (event) => {
if (event.source !== iframe.contentWindow || event.origin !== editorOrigin) return;
const data = event.data;
if (!data || data.version !== 1) return;
if (data.type === "textria:embed:ready") send("textria:embed:get");
if (data.type === "textria:embed:content") console.log(data.requestId, data.text, data.html);
if (data.type === "textria:embed:error") console.error(data.requestId, data.code);
});
send("textria:embed:ping");
function setText(content) {
return send("textria:embed:set", { format: "text", content });
}
// setText("Hello, Textria!");Готовый код уже содержит нужные разрешения: allow-scripts и allow-same-origin — для работы редактора и локального черновика; allow-popups и allow-popups-to-escape-sandbox — для открытия полноценного личного блокнота в новой вкладке.
В iframe доступны оформление текста, ссылки, списки и таблицы. Изображения отключены, в том числе при вставке из буфера и перетаскивании. Для чтения и замены содержимого из скрипта вашего сайта включите API postMessage. Редактор не отправляет форму автоматически.
Если нужен голосовой ввод, добавьте к iframe атрибут allow="microphone". Кнопка появится при поддержке браузером и разрешении доступа к микрофону. Политика разрешений вашего сайта также должна разрешать микрофон для Textria.