Форум программистов, компьютерный форум, киберфорум
JavaScript
Форум программистов и сисадминов Киберфорум > Форум web-программистов > JavaScript
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.67/9: Рейтинг темы: голосов - 9, средняя оценка - 4.67
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611

Таблицы и WYSIWYG редактор

13.02.2014, 14:19. Показов 1847. Ответов 11
Метки нет (Все метки)
Студворк — интернет-сервис помощи студентам
Приветствую всех!
есть WYSIWYG редактор:
Кликните здесь для просмотра всего текста
HTML5
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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111

<!Doctype html>
<html>
<head>
    <title>Rich Text Editor</title>
    <script type="text/javascript" src="editor.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8">
</head>
<body onLoad="initDoc();">
 
<fieldset id="dialog_addtable" class="dialog">
    <legend>Вставка таблицы</legend>
    <label>Количество столбцов</label>&nbsp;<input type="text" name="cols" class="input_text" maxlength="2" value="3"><br><br>
    <label>Количество строк</label>&nbsp;<input type="text" name="rows" class="input_text" maxlength="2" value="3"><br><br>
    <label>Ширина таблицы</label>&nbsp;<input type="text" name="tabwidth" class="input_text" maxlength="4" value="100%"><br><br>
    <label>Толщина границ</label>&nbsp;<input type="text" name="tabborder" class="input_text" maxlength="2" value="0"><br><br>
    <input type="button" value="Вставить" class="button" onClick="CDialog('addtable'); InsertTable();">&nbsp;
    <input type="button" value="Отмена" class="button" onClick="CDialog('addtable');">
</fieldset>
 
<section class="editor">
    <form name="compForm" method="post" action="add.php" onSubmit="if(validateMode()){this.myDoc.value = oDoc.innerHTML;return true;}return false;">
        <input type="hidden" name="myDoc">
        <div id="toolBar1">
            <select class="toolBar1" onChange="formatDoc('formatblock',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option selected>- Форматирование -</option>
                <option value="h1">Заголовок 1 &lt;h1&gt;</option>
                <option value="h2">Заголовок 2 &lt;h2&gt;</option>
                <option value="h3">Заголовок 3 &lt;h3&gt;</option>
                <option value="h4">Заголовок 4 &lt;h4&gt;</option>
                <option value="h5">Заголовок 5 &lt;h5&gt;</option>
                <option value="h6">Подзаголовок &lt;h6&gt;</option>
                <option value="p">Параграф &lt;p&gt;</option>
                <option value="pre">Моноширинный &lt;pre&gt;</option>
            </select>
            <select onChange="formatDoc('fontname',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- Шрифт -</option>
                <option>Arial</option>
                <option>Arial Black</option>
                <option>Courier New</option>
                <option>Times New Roman</option>
            </select>
            <select onChange="formatDoc('fontsize',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- Размер -</option>
                <option value="1">Очень маленький</option>
                <option value="2">Маленький</option>
                <option value="3">Нормальный</option>
                <option value="4">Средний</option>
                <option value="5">Большой</option>
                <option value="6">Очень большой</option>
                <option value="7">Максимальный</option>
            </select>
            <select onChange="formatDoc('forecolor',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- Цвет -</option>
                <option value="red">Красный</option>
                <option value="blue">Синий</option>
                <option value="green">Зеленый</option>
                <option value="black">Черный</option>
            </select>
            <select onChange="formatDoc('backcolor',this[this.selectedIndex].value);this.selectedIndex=0;">
                <option class="heading" selected>- Цвет фона -</option>
                <option value="red">Красный</option>
                <option value="green">Зеленый</option>
                <option value="black">Черный</option>
            </select>
        </div>
        <div id="toolBar2">
            <img class="intLink" title="Очистить" onClick="if(validateMode()&&confirm('Вы уверены?')){oDoc.innerHTML=sDefTxt};" src="images/clean.gif">
            <img class="intLink" title="Печать" onClick="printDoc();" src="images/print.png">
            <img class="intLink" title="Отменить" onClick="formatDoc('undo');" src="images/undo.gif">
            <img class="intLink" title="Повторить" onClick="formatDoc('redo');" src="images/redo.gif">
            <img class="intLink" title="Удалить форматирование" onclick="formatDoc('removeFormat')" src="images/format.png">
            <img class="intLink" title="Жирный" onClick="formatDoc('bold');" src="images/bold.gif">
            <img class="intLink" title="Курсивный" onClick="formatDoc('italic');" src="images/italic.gif">
            <img class="intLink" title="Подчеркнутый" onClick="formatDoc('underline');" src="images/underline.gif">
            <img class="intLink" title="По левому краю" onClick="formatDoc('justifyleft');" src="images/justifyleft.gif">
            <img class="intLink" title="По центру" onClick="formatDoc('justifycenter');" src="images/justifycenter.gif">
            <img class="intLink" title="По правому краю" onClick="formatDoc('justifyright');" src="images/justifyright.gif">
            <img class="intLink" title="Нумерованный список" onClick="formatDoc('insertorderedlist');" src="images/numberedlist.gif">
            <img class="intLink" title="Маркированный список" onClick="formatDoc('insertunorderedlist');" src="images/dottedlist.gif">
            <img class="intLink" title="Цитата" onClick="formatDoc('formatblock','blockquote');" src="images/quote.gif">
            <img class="intLink" title="Увеличить отступ" onClick="formatDoc('outdent');" src="images/outdent.gif">
            <img class="intLink" title="Уменьшить отступ" onClick="formatDoc('indent');" src="images/indent.gif">
            <img class="intLink" title="Вставить гиперссылку" onClick="var sLnk=prompt('Введите URL','http:\/\/');if(sLnk&&sLnk!=''&&sLnk!='http://'){formatDoc('createlink',sLnk)}" src="images/hyperlink.gif">
            <img class="intLink" title="Вырезать" onClick="formatDoc('cut');" src="images/cut.gif">
            <img class="intLink" title="Скопировать" onClick="formatDoc('copy');" src="images/copy.gif">
            <img class="intLink" title="Вставить" onClick="formatDoc('paste');" src="images/paste.gif">
        </div>
        <div id="toolBar3">
            <img class="intLink" title="Вставить таблицу" onClick="GetRange(); ODialog('addtable', 'cols');" src="images/table.gif">
            <img class="intLink" title="Вставить строку" onClick="insert_row();" src="images/table_insert_row.gif">
            <img class="intLink" title="Удалить строку" onClick="delete_row();" src="images/table_delete_row.gif">
            <img class="intLink" title="Вставить столбец" onClick="insert_col();" src="images/table_insert_col.gif">
            <img class="intLink" title="Удалить столбец" onClick="delete_col();" src="images/table_delete_col.gif">
            <img class="intLink" title="Разбить ячейку" onClick="split_cell();" src="images/table_span.gif">
            <img class="intLink" title="Свойства ячейки" onClick="get_cell();" src="images/table_cell.gif">
            <img class="intLink" title="Вставить специальный символ" onClick="open_submenu('div_symbols');" src="images/symbol.gif">
        </div>
        <div id="textBox" contenteditable="true"><span>Lorem ipsum</span></div>
        <p id="editMode">
            <input type="checkbox" name="switchMode" id="switchBox" onChange="setDocMode(this.checked);">
            <label for="switchBox">HTML</label>
        </p>
        <p class="button">
            <input type="submit" value="Сохранить" name="save">
            <input type="submit" value="Отменить" name="cancel">
        </p>
    </form>
</section>
</body>
</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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117

var oDoc, sDefTxt;
var Range = null;
 
// Инициальзация
function initDoc() {
    oDoc = document.getElementById("textBox");
    sDefTxt = oDoc.innerHTML;
    if (document.compForm.switchMode.checked) {setDocMode(true);}
}
 
// Какой режим активен: html или текстовый
function validateMode() {
    if (!document.compForm.switchMode.checked) {return true;}
    alert("Снимите галочку \"HTML\".");
    oDoc.focus();
    return false;
}
 
// Команды форматирования
function formatDoc(sCmd, sValue) {
    if (validateMode()) {
        document.execCommand(sCmd, false, sValue);
        oDoc.focus();
    }
}
 
// Переключение режимов нажатием на чекбокс
function setDocMode(bToSource) {
    var oContent;
    if (bToSource) {
        oContent = document.createTextNode(oDoc.innerHTML);
        oDoc.innerHTML = "";
        var oPre = document.createElement("pre");
        oDoc.contentEditable = false;
        oPre.id = "sourceText";
        oPre.contentEditable = true;
        oPre.appendChild(oContent);
        oDoc.appendChild(oPre);
    } else {
        if (document.all) {
            oDoc.innerHTML = oDoc.innerText;
        } else {
            oContent = document.createRange();
            oContent.selectNodeContents(oDoc.firstChild);
            oDoc.innerHTML = oContent.toString();
        }
        oDoc.contentEditable = true;
    }
    oDoc.focus();
}
 
// Вывод содержимого страницы на печать
function printDoc() {
    if (!validateMode()) {return;}
    var oPrntWin = window.open("","_blank","width=1200,height=800,left=400,top=100,menubar=yes,toolbar=no,location=no,scrollbars=yes");
    oPrntWin.document.open();
    oPrntWin.document.write("<!Doctype html><html><head><title>Print<\/title><\/head><body onload=\"print();\">" + oDoc.innerHTML + "<\/body><\/html>");
    oPrntWin.document.close();
}
 
/* Открыть/Закрыть диалоговое окно */
function ODialog(dialog, first_field) {
    var f = document.getElementById('dialog_'+dialog).style;
    if (validateMode()) {
        f.display = "block";
        f.position = "absolute";
        f.top = "100px";
        f.left = "500px";
        f.background = "#71a6d2";
    }
}
function CDialog(dialog) {
    var f = document.getElementById('dialog_'+dialog).style;
    f.display = "none";
    oDoc.focus();
}
 
// 
function GetRange() {
    if(document.selection) {
        // Для всех браузеров
        oDoc.focus();
        Range = oDoc.selection.createRange();
    } else if(document.getSelection) {
        // Для IE
        Range = oDoc.getSelection().getRangeAt(0).cloneRange();
        oDoc.focus();
    } else {
        alert('Браузер не поддерживает эту функцию');
        Range = false;
    }
}
 
// Вставка html-кода
function PasteHTML(html) {
    if (Range.pasteHTML) {
        oDoc.focus();
        Range.pasteHTML(html);
        Range.select();
    } else {
        formatDoc('insertHTML', html);
    }
}
 
// Вставка таблицы
function InsertTable() {
    CTD = '';
    for (i=0; i<document.getElementById('dialog_addtable').cols.value; i++) {
        CTD = CTD+'<td>&nbsp;</td>';
    }
    CTR = '';
    for (i=0; i<document.getElementById('dialog_addtable').rows.value; i++) {
        CTR = CTR+'<tr>'+CTD+'</tr>';
    }
    PasteHTML('<table width='+document.getElementById('dialog_addtable').tabwidth.value+' border='+document.getElementById('dialog_addtable').tabborder.value+'>'+CTR+'</table>');
    oDoc.focus();
}

вставка таблицы не работает, в чем причина?
Заранее благодарен!
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
 13.02.2014, 14:19
Ответы с готовыми решениями:

кросс-браузерный WYSIWYG редактор
Здравствуйте На сайте хочу разместить простой кросс-браузерный WYSIWYG редактор (готовый скрипт), который имел бы следующие возможности -...

WYSIWYG редактор
Установил на сайт WYSIWYG редактор, проблема такая, если копировать текст с другого сайта, то стиль этого текста ( при вставке в редактор )...

WYSIWYG-редактор
Привет. Хотел услышать, кто какой редактор использует. До недавнего времени юзал tinyMce, но вот когда пришлось реализовать возможность...

11
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 14:50
Потому что TypeError: document.getElementById(...).cols is undefined
1
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.02.2014, 15:10  [ТС]
это я так понимаю в функции InsertTable()?
0
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 15:10
Divil, больше там негде.
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.02.2014, 15:16  [ТС]
изменил я:
HTML5
1
2
3
4
5
6
7
8
9

<fieldset id="dialog_addtable" class="dialog">
    <legend>Вставка таблицы</legend>
    <label>Количество столбцов</label>&nbsp;<input type="text" id="cols" name="cols" class="input_text" maxlength="2" value="3"><br><br>
    <label>Количество строк</label>&nbsp;<input type="text" id="rows" name="rows" class="input_text" maxlength="2" value="3"><br><br>
    <label>Ширина таблицы</label>&nbsp;<input type="text" id="tabwidth" name="tabwidth" class="input_text" maxlength="4" value="100%"><br><br>
    <label>Толщина границ</label>&nbsp;<input type="text" id="tabborder" name="tabborder" class="input_text" maxlength="2" value="0"><br><br>
    <input type="button" value="Вставить" class="button" onClick="CDialog('addtable'); InsertTable();">&nbsp;
    <input type="button" value="Отмена" class="button" onClick="CDialog('addtable');">
</fieldset>
JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13

// Вставка таблицы
function InsertTable() {
    CTD = '';
    for (i=0; i<document.getElementById('cols').value; i++) {
        CTD = CTD+'<td>&nbsp;</td>';
    }
    CTR = '';
    for (i=0; i<document.getElementById('rows').value; i++) {
        CTR = CTR+'<tr>'+CTD+'</tr>';
    }
    PasteHTML('<table width='+document.getElementById('tabwidth').value+' border='+document.getElementById('tabborder').value+'>'+CTR+'</table>');
    oDoc.focus();
}
только у меня даже не открывается окошко с данными вставки таблицы, причина как я понимаю в событии img onClick="GetRange();...если убрать GetRange(); окошко появляется, но все равно так и так не вставляется...
0
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 15:24
А это потому, что TypeError: Range is null

P.S. Я, конечно же, и дальше могу постить сюда ошибки из консоли браузера, но будет быстрее, если ты будешь смотреть их сам, а в идеале ты вообще воспользуешься отладчиком.
1
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.02.2014, 15:25  [ТС]
что за отладчик?
0
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 15:26
Divil, http://en.wikipedia.org/wiki/Debugger

Браузер у тебя какой?
0
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.02.2014, 15:26  [ТС]
chrome
0
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 15:30
Divil, нажми Ctrl+Shift+I, затем ищи что-то типа Sources или Scripts на панели (точно сказать не могу, хром у меня не стоит).

Вот информация по основам отладки в хроме, ещё можешь погуглить по ключевым словам chrome debugging
1
8 / 8 / 10
Регистрация: 11.04.2012
Сообщений: 611
13.02.2014, 17:11  [ТС]
JavaScript
1

Range = oDoc.getSelection().getRangeAt(0).cloneRange();
выдает Uncaught TypeError: Cannot call method 'getSelection' of undefined
что в данном случае делать?
пробовал
JavaScript
1
2
3

Range = oDoc.innerHTMLgetSelection().getRangeAt(0).cloneRange();
Range = oDoc.innerText.getSelection().getRangeAt(0).cloneRange();
Range = oDoc.innerText.createRange.getSelection().getRangeAt(0).cloneRange();
ничего не помогает...может я что-то не так понимаю и делаю?
P.S. Я так понимаю данными действиями я получаю место, где находится курсор?
0
Эксперт С++
 Аватар для Nameless One
5828 / 3479 / 358
Регистрация: 08.02.2010
Сообщений: 7,448
13.02.2014, 17:57
Цитата Сообщение от Divil Посмотреть сообщение
выдает Uncaught TypeError: Cannot call method 'getSelection' of undefined
Можно перевести как "Нельзя вызвать метод 'getSelection' у undefined". У тебя oDoc undefined.
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
 13.02.2014, 17:57
Помогаю со студенческими работами здесь

Идеальный WYSIWYG редактор
Наверняка многие из вас пользовались и пользуются WYSIWYG редакторами для добавления статей, новостей или просто комментов. У каждого...

Ищу wysiwyg редактор
Ищу open sourse редактор с возможностью как опенофисе выделять кисточкой текст и переносить свойства текста на другую часть текста. Только...

Безопасность и WYSIWYG редактор
Здравствуйте. Возникла необходимость использовать WYSIWYG редактор. А конкретно ckeditor. Соответственно появился вопрос: как обезопасить...

Не могу выбрать WYSIWYG редактор
Занимаюсь разработкой своей CMS-ки, и дошла очередь до визуального редактора страниц. Нужен WYSIWYG редактор с лицензией (MIT License)...

Самый "легкий" HTML WYSIWYG редактор
Самый &quot;легкий&quot; HTML WYSIWYG редактор Для моей странички в 2-3 Мб, со множеством рисунков, таблиц и скрытого текста ... на...


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

Или воспользуйтесь поиском по форуму:
12
Ответ Создать тему
Новые блоги и статьи
Установка Android SDK, NDK, JDK, CMake и т.д.
8Observer8 25.01.2026
Содержание блога Перейдите по ссылке: https:/ / developer. android. com/ studio и в самом низу страницы кликните по архиву "commandlinetools-win-xxxxxx_latest. zip" Извлеките архив и вы увидите. . .
Вывод текста со шрифтом TTF на Android с помощью библиотеки SDL3_ttf
8Observer8 25.01.2026
Содержание блога Если у вас не установлены Android SDK, NDK, JDK, и т. д. то сделайте это по следующей инструкции: Установка Android SDK, NDK, JDK, CMake и т. д. Сборка примера Скачайте. . .
Использование SDL3-callbacks вместо функции main() на Android, Desktop и WebAssembly
8Observer8 24.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
моя боль
iceja 24.01.2026
Выложила интерполяцию кубическими сплайнами www. iceja. net REST сервисы временно не работают, только через Web. Написала за 56 рабочих часов этот сайт с нуля. При помощи perplexity. ai PRO , при. . .
Модель сукцессии микоризы
anaschu 24.01.2026
Решили писать научную статью с неким РОманом
 http://iceja.net/ математические сервисы
iceja 20.01.2026
Обновила свой сайт http:/ / iceja. net/ , приделала Fast Fourier Transform экстраполяцию сигналов. Однако предсказывает далеко не каждый сигнал (см ограничения http:/ / iceja. net/ fourier/ docs ). Также. . .
http://iceja.net/ сервер решения полиномов
iceja 18.01.2026
Выкатила http:/ / iceja. net/ сервер решения полиномов (находит действительные корни полиномов методом Штурма). На сайте документация по API, но скажу прямо VPS слабенький и 200 000 полиномов. . .
Расчёт переходных процессов в цепи постоянного тока
igorrr37 16.01.2026
/ * Дана цепь(не выше 3-го порядка) постоянного тока с элементами R, L, C, k(ключ), U, E, J. Программа находит переходные токи и напряжения на элементах схемы классическим методом(1 и 2 з-ны. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Поддержать - Реклама - Условия использования - Обратная связь
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru