На главную Статьи Функции

Редактор TinyMCE. Извлекаем и добавляем значения.




Не так давно столкнулся с одной проблемой: есть поле для ввода текста textarea с подключенным текстовым редактором tinyMCE, необходимо javascript функцией без перезагрузки страницы извлечь из него значение или добавить в это поле текст. Казалось бы, все просто. Если идентификатор поля для ввода текста text_field и имя тоже text_field то его значение можно извлечь следующими способами:

1. var some_text=document.getElementById('text_field').innerHTML
2. var some_text=document.forms.some_form.text_field.value
Естественно приведенные методы не единственные, можно придумать еще, но мы сейчас не об этом.
К тому моменту, когда я столкнулся с этой проблемой, мои знания о tinyMCE заканчивались на уровне как его подключить или отключить и выше указанные методы извлечения значения текстового поля tinyMCE естественно не работали, поскольку редактор создает вместо элемента формы textarea элемент страницы iframe. Вот здесь и начинались проблемы, поскольку с ifrmae я никогда еще не работал. Ну да ладно, начал читать статьи и описания. Оказывается, все элементарно: чтобы извлечь значение текстового поля, нужно воспользоваться методами объекта tinymce, выглядит это так:
var some_text = tinymce.get('description').getContent();
Все просто и понятно, в переменной some_text содержится значение, которое передается в названии переменной $_POST после нажатия кнопки sybmit.
Некоторое время спустя я столкнулся с еще одной проблемой. Уже умея извлекать текст из textarea, мне нужно было теперь вставить текст в этот самый textarea из переменной javascript. Подробнее: есть текстовое поле textarea с подключенным редактором tinymce и есть select, в котором можно выбрать шаблон сообщения. Шаблоны находятся в базе данных. При выборе шаблона, javascript с помощью AJAXа получает текст шаблона, и дальше этот текст необходимо вставить в textarea. Казалось бы, ничего сложного:
var some_text='<p>Этот текст нужно вставить в текстовое поле редактора</p>';
document.getElementById('text_field').innerHTML=some_text;
или с помощью jQuery:
$('#text_field').html(some_text);

Но, мы же уже знаем, что редактор и текстовое поле – два совершенно разных элемента. Почитав документацию по tinyMCE нашел метод объекта activeEditor, который отлично подходит для наших целей setContent:
tinyMCE.activeEditor.setContent(some_text);
Вот и все, данная строка добавляет в текстовый редактор tinyMCE значение переменной some_text.
Надеюсь эта статья окажется вам полезной. Ну и напоследок: с помощью комбинации методов  getContent() и setContent() можно добавлять текст к уже добавленному в редакторе.



© 2010-2019 При использовании материалов ссылка на сайт www.webchaynik.ru обязательна

обратная связь