Форум программистов, компьютерный форум, киберфорум
JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.71/14: Рейтинг темы: голосов - 14, средняя оценка - 4.71
 Аватар для nepster
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844

TinyEditor — визуальный редактор на JavaScript

07.02.2011, 03:13. Показов 3013. Ответов 6
Метки нет (Все метки)

Студворк — интернет-сервис помощи студентам
Если кто сталкивался с данным редактором, подскажите пожалуйста как получить все содержимое
textarea в переменную в js

HTML5
1
<textarea id="input" style="width:1160px; height:375px"></textarea>

Пробовал всеми способами, но все результаты пустые.
JavaScript
1
var input = document.getElementById("input").value;


Сам редактор
http://www.zhitenev.ru
0
cpp_developer
Эксперт
20123 / 5690 / 1417
Регистрация: 09.04.2010
Сообщений: 22,546
Блог
07.02.2011, 03:13
Ответы с готовыми решениями:

Редактор tinymce, как вставить текст в визуальный редактор
Приветствую форумчане! Прошу подсказки от гуру своего дела Вопрос заключается в следующем: //есть блок div, с текстом...

Визуальный редактор
При попытке установить редактор JCE? выдаёт следующую ошибку: JInstaller::install: Ошибка SQL DB function failed with error number 1005 ...

Визуальный редактор С++
Недавно знакомый попросил помочь с Excel, совершенно случайно залез в редактор VBA радости не было границ не надо знание WIN API чтоб...

6
 Аватар для Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
09.02.2011, 01:07
Так там ведь текст в iframe пишется. А значение можно получить так:
JavaScript
1
var val = window.frames[0].document.getElementById("editor").innerHTML
1
 Аватар для nepster
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844
09.02.2011, 13:12  [ТС]
JavaScript
1
 document.getElementsByTagName("iframe").item(0).contentWindow.document.body.innerHTML

Спасибо, я тоже догадался, сделал вот так.

А вот как добавить свою кнопку в редактор ?
0
 Аватар для Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
09.02.2011, 13:25
Расскажи, что эта кнопка делать будет?
1
 Аватар для nepster
61 / 61 / 11
Регистрация: 19.09.2009
Сообщений: 844
09.02.2011, 13:51  [ТС]
ну к примеру вызывать функцию которая ну для примера вставляет какой блок дива

JavaScript
1
2
3
4
5
6
7
function test() {
var text = prompt('Введите текст блока');
 
// и вот тут как то занести в окошко редактора 
'<div class="test">'+text+'</div>';
 
}
0
 Аватар для Kdn
307 / 165 / 25
Регистрация: 07.02.2011
Сообщений: 319
09.02.2011, 14:08
Там весь HTML рисуется динамически скриптом. Кнопки задаются как массив именованных элементов с определённым конфигом.
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
TINY.editor=function(){
    var c=[], offset=-30;
    c['cut']=[1,'Cut','a','cut',1];
    c['copy']=[2,'Copy','a','copy',1];
    c['paste']=[3,'Paste','a','paste',1];
    c['bold']=[4,'Bold','a','bold'];
    c['italic']=[5,'Italic','a','italic'];
    c['underline']=[6,'Underline','a','underline'];
    c['strikethrough']=[7,'Strikethrough','a','strikethrough'];
    c['subscript']=[8,'Subscript','a','subscript'];
    c['superscript']=[9,'Superscript','a','superscript'];
    c['orderedlist']=[10,'Insert Ordered List','a','insertorderedlist'];
    c['unorderedlist']=[11,'Insert Unordered List','a','insertunorderedlist'];
    c['outdent']=[12,'Outdent','a','outdent'];
    c['indent']=[13,'Indent','a','indent'];
    c['leftalign']=[14,'Left Align','a','justifyleft'];
    c['centeralign']=[15,'Center Align','a','justifycenter'];
    c['rightalign']=[16,'Right Align','a','justifyright'];
    c['blockjustify']=[17,'Block Justify','a','justifyfull'];
    c['undo']=[18,'Undo','a','undo'];
    c['redo']=[19,'Redo','a','redo'];
    c['image']=[20,'Insert Image','i','insertimage','Enter Image URL:','http://'];
    c['hr']=[21,'Insert Horizontal Rule','a','inserthorizontalrule'];
    c['link']=[22,'Insert Hyperlink','i','createlink','Enter URL:','http://'];
    c['unlink']=[23,'Remove Hyperlink','a','unlink'];
    c['unformat']=[24,'Remove Formatting','a','removeformat'];
    c['print']=[25,'Print','a','print'];
 
//..
Таким образом добавив в этот массив свою кнопку она будет отрисована в процессе создания класса TINY.editor .
Есть небольшая проблемка, background-image для кнопок в одном файле .png. Так что если добавлять кнопку с другим рисунком, то есть два способа: 1) дорисовать .png в графическом редакторе для твоей кнопки, 2) Изменить логику работы скрипта. Например добавить признак твоей кнопки и указать необходимые действия в скрипте(какой CSS класс применять и т.д.).
По любому если ты хочешь доработать для себя editor, то разберись со скриптом tinyeditor.js!
И FireBug тебе в помощь. Возникнут нерешаемые проблемы пиши, посмотрим вместе.
1
AliceMak
04.06.2012, 10:49
Цитата Сообщение от Kdn Посмотреть сообщение
Так там ведь текст в iframe пишется. А значение можно получить так:
JavaScript
1
var val = window.frames[0].document.getElementById("editor").innerHTML
Kdn здравствуйте, а каким образом можно было бы подставить в данный фрейм свое значение, это я к тому, что например пользователь написал комментарий, опубликовал его, но затем решил отредактировать его, вот собственно как подставить этот текст в данный редактор?
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
raxper
Эксперт
30234 / 6612 / 1498
Регистрация: 28.12.2010
Сообщений: 21,154
Блог
04.06.2012, 10:49
Помогаю со студенческими работами здесь

Визуальный редактор
Я пользуюсь Microsoft Visual C++ 2008 Express Edition и я знаю что там есть визуальный редактор, как к какому нибудь элементу подключить...

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

визуальный редактор
Здравствуйте, мне понадобился визуальный редактор. Я даже не знаю с чего начать. В поисковике натыкаюсь на JS или уже под определенные...

Визуальный редактор
Всем доброго времени суток.Хотел бы задать вопрос &quot;совсем новичка&quot;. Скачал visual c++ express 2010. Открывал исходники визуальным...

Простенький визуальный редактор
Здравствуйте. Необходимо в админке вставить какой-нибудь простенький визуальный редактор для редактирования описания. Посмотрел в интернете...


Искать еще темы с ответами

Или воспользуйтесь поиском по форуму:
7
Ответ Создать тему
Новые блоги и статьи
Функция установки текстового статуса в реквизите формы документа
Maks 01.04.2026
Алгоритм из решения ниже реализован на нетиповом документе "ВыдачаОборудованияНаСпецтехнику" разработанного в конфигурации КА2, в дополнении к предыдущему решению. На форме документа создается. . .
К слову об оптимизации
kumehtar 01.04.2026
Вспоминаю начало 2000-х, университет, когда я писал на Delphi. Тогда среди программистов на форумах активно обсуждали аккуратную работу с памятью: нужно было следить за переменными, вовремя. . .
Идея фильтра интернета (сервер = слой+фильтр).
Hrethgir 31.03.2026
Суть идеи заключается в том, чтобы запустить свой сервер, о чём я если честно мечтал давно и давно приобрёл книгу как это сделать. Но не было причин его запускать. Очумелые учёные напечатали на. . .
Модель здравосоХранения 6. ESG-повестка и устойчивое развитие; углублённый анализ кадрового бренда
anaschu 31.03.2026
В прикрепленном документе раздумья о том, как можно поменять модель в будущем
10 пpимет, которые всегда сбываются
Maks 31.03.2026
1. Чтобы, наконец, пришла маршрутка, надо закурить. Если сигарета последняя, маршрутка придет еще до второй затяжки даже вопреки расписанию. 2. Нaдоели зима и снег? Не надо переезжать. Достаточно. . .
Перемещение выделенных строк ТЧ из одного документа в другой
Maks 31.03.2026
Реализация из решения ниже выполнена на примере нетипового документа "ВыдачаОборудованияНаСпецтехнику" с единственной табличной частью "ОборудованиеИКомплектующие" разработанного в конфигурации КА2. . . .
Functional First Web Framework Suave
DevAlt 30.03.2026
Sauve. IO Апнулись до NET10. Из зависимостей один пакет, работает одинаково хорошо как в режиме проекта так и в интерактивном режиме. из сложностей - чисто функциональный подход. Решил. . .
Автоматическое создание документа при проведении другого документа
Maks 29.03.2026
Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru