Форум программистов, компьютерный форум, киберфорум
PHP для начинающих
Войти
Регистрация
Восстановить пароль
Блоги Сообщество Поиск Заказать работу  
 
Рейтинг 4.60/5: Рейтинг темы: голосов - 5, средняя оценка - 4.60
0 / 0 / 0
Регистрация: 25.01.2017
Сообщений: 7

Некорректное отображение CKEditor

30.07.2018, 16:36. Показов 1059. Ответов 10

Студворк — интернет-сервис помощи студентам
Здравствуйте!

Прикрутила ckeditor к окну ввода текста. Если в других случаях все нормально, то конкретно в данном случае редактор загружается только при нажатии пробела или энтера и вид у него ну совершенно некорректный. Подскажите, пожалуйста, как исправить и привести эдитор в классический удобоваримый вид.

Спасибо.
Миниатюры
Некорректное отображение CKEditor  
0
IT_Exp
Эксперт
34794 / 4073 / 2104
Регистрация: 17.06.2006
Сообщений: 32,602
Блог
30.07.2018, 16:36
Ответы с готовыми решениями:

Некорректное отображение даты из БД
Привет. такой вопрос, при внесении даты с админки дата в базу данных заносится корректно, но на сайте вообще левая дата отображается, и...

Некорректное отображение сообщений
Добрый ночи! У меня есть скрипт помигите его доработать. У меня когда я вставляю текст html выводятся все теги, хотя я указад text/html; ...

Некорректное отображение элементов массива
Здравствуйте! Есть база данных MYSQL, из которых PHP делает выборку с определёнными условиями: Ввод данных HTML: ...

10
ytf
276 / 259 / 185
Регистрация: 15.08.2017
Сообщений: 1,483
30.07.2018, 20:31
можно попробовать тинимце tinymce
0
0 / 0 / 0
Регистрация: 25.01.2017
Сообщений: 7
30.07.2018, 20:47  [ТС]
а можно как-то исправить имеющееся? на всех остальных страницах скедитор работает без проблем, не хотелось бы распыляться на разные модули
0
1152 / 554 / 320
Регистрация: 21.06.2012
Сообщений: 1,854
30.07.2018, 20:54
ktotaikatk, очевидно что если на одной странице он работает а на другой нет, то значит Вы что-то делайте не так. Посмотрите чем отличается работающая страница от неработающей. Если сами не сможете найти отличие, то выложите исходники файлов (хорошего и плохого), может кто и найдет отличия.
0
0 / 0 / 0
Регистрация: 25.01.2017
Сообщений: 7
31.07.2018, 10:18  [ТС]
так в том и дело, что не могу понять, почему в одном месте так, а в другом сяк)

Вот этот файл НЕ работает (то, что на картинке)
HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<div id="answer-answer">
    <p>Вопрос (подкорректировать при необходимости):</p>
    <textarea id="area-feedback" cols="50" rows="5"><?php echo $textquest; ?></textarea><br/>
    <p>Текст ответа:</p>
    <textarea id="area-answer" cols="50" rows="5"></textarea><br/>
    <p>Ваше имя:</p>
    <input type="text" id="answerer-name">
    <p>Ваша должность:</p>
 
    <input type="text" id=answerer-job>
    <br/>
    <button id="answer-the-quest">Отправить!</button>
</div>
 
<script type="text/javascript" src="//cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("area-answer");
</script>
А здесь все нормально отображается:
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
<form id="ask">
    <h4>Оставить отзыв (<?php echo filter_var($_SESSION['city'], FILTER_SANITIZE_SPECIAL_CHARS);?>):</h4>
    Выберите офис: <br/>
    <select id="office-name">
        <?php foreach ($offices as $itemOffice): ?>
            <option value="<?php echo htmlentities($itemOffice['title']) ?>"><?php echo htmlentities($itemOffice['title']) ?></option>
        <?php endforeach ?>
    </select>
    <br/>
    Ваше ФИО: <br/>
    <input id="sender-name" class="custom-input" type="text" size="50">
    <br/>
    Ваш E-Mail:
    <br/>
    <input id="sender-email" class="custom-input" type="text" size="50">
    <br/>
    Ваш контактный телефон:
    <br/>
    <input id="sender-phone" class="custom-input" type="text" size="50">
    <br/>
    Текст отзыва:
    <br/>
    <textarea id="question" class="custom-input" cols="100" rows="20"></textarea>
    <br/>
    <input type="checkbox" name="podtverzdenie" value="check_but" id="check">   
    <label>Cоглашаюсь с обработкой (сбор, систематизация, накопление, хранение, изменение, использование, обезличивание, блокирование, уничтожение) моих персональных данных </label>
    <br/>
    <p>Введите код с картинки:</p>
    <img src="/my/capcha.php" alt="captcha" id="captcha"/>
    <br/>
    <br/>
    <input type="text" id="user_code" class="custom-input">
    <br/>
</form>
<script type="text/javascript" src="//cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
<script type="text/javascript">
CKEDITOR.replace("question");
</script>
0
1152 / 554 / 320
Регистрация: 21.06.2012
Сообщений: 1,854
31.07.2018, 11:12
ktotaikatk, да действительно, прям 2 отличия с трудом найти можно ))

ckeditor прикручивается к textarea а не к div (как Вы делаете в первом случае).
0
0 / 0 / 0
Регистрация: 25.01.2017
Сообщений: 7
31.07.2018, 11:36  [ТС]
пока что я профан, к тому же не всегда настолько внимательный, как хотелось бы, но я над этим работаю
можете носом ткнуть, где я к диву прикручиваю скедитор? делала первый по полной аналогии со вторым вариантом (собственно, только название текстареа поменяла).
0
1152 / 554 / 320
Регистрация: 21.06.2012
Сообщений: 1,854
31.07.2018, 12:12
ktotaikatk, оказывается у меня глаз замылился )) Да, он к textarea прикручен.

Ну на самом деле различия есть, и их очень много. В первом случае завернут в див а во втором в форму. Во втором файле у текстареа класс custom-input в первом его нет. Попробуйте добавить этот класс:
HTML5
1
<textarea id="area-answer" class="custom-input" cols="50" rows="5"></textarea>
Но судя по всему, ckeditor наследует Ваши стили, возможно которые определены для answer-answer (попробуйте на время его убрать). Возможно также, что библиотека ckeditor.js конфликтует с другой. Посмотрите какие js файлы подключены к первой странице и ко второй.

Посмотрите все родительские дивы для textarea id="area-answer" и сравните их с родителями textarea id="question" может стили какого-то дива влияют на стили ckeditor-а
0
 Аватар для otto-fukin
14 / 60 / 21
Регистрация: 15.06.2017
Сообщений: 572
31.07.2018, 13:10
ktotaikatk, стили разные, поэтому и вид разные. сравните какие стили используются в разных случаях
0
1 / 1 / 0
Регистрация: 31.07.2018
Сообщений: 11
31.07.2018, 16:58
Посмотрите консоль в браузере, возможно, ломается JS где-то в другом месте, но заодно ломает и редактор (т.к. перестает работать). Особенно, если он стили подключает через JS.
0
0 / 0 / 0
Регистрация: 25.01.2017
Сообщений: 7
02.08.2018, 13:46  [ТС]
Господа, всем большое спасибо за советы. Проблему решила)
Решение лежало действительно в стилях. Нашла стиль, который используется при загрузке блока, в нем записала класс-исключение

HTML5
1
:not(.disable-answered-questions>*)
этот же класс объявила в имеющемся диве. Таким образом, стиль, который влияет на корректное отображение, не применяется к указанному классу и всему его содержимому. Надеюсь, решение кому-то поможет в будущем)
0
Надоела реклама? Зарегистрируйтесь и она исчезнет полностью.
BasicMan
Эксперт
29316 / 5623 / 2384
Регистрация: 17.02.2009
Сообщений: 30,364
Блог
02.08.2018, 13:46
Помогаю со студенческими работами здесь

Некорректное отображение русского языка
Я понимаю, что эта тема поднималась уже много раз. Но... У меня некорректно отображается русский язык на сайте (черные знаки вопроса). БД...

Некорректное отображение кириллицы в меню
Добрый вечер! имеется список меню: &lt;select name=&quot;select1&quot;&gt; &lt;option value=&quot;Книга&quot;&gt;Книга&lt;/option&gt; &lt;option...

Некорректное отображение текста на сайте на Денвере
Здравствуйте! Уважаемые форумчане, пожалуйста, подскажите в чем дело. С BOM-меткой все было хорошо. Но из-за нее не устанавливались...

Некорректное отображение HTML-разметки в письме
Помогите найти ошибку, надо чтобы была ссылка mail($_POST,'Регистрация ','Ссылка для активации:&lt;a href=&quot;...

CSV файл и fputcsv, некорректное отображение данных
Добрый день, столкнулся с тем, что при записи в *.csv файл записываются числа с плавающей точкой и на выходе некоторые из них...


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

Или воспользуйтесь поиском по форуму:
11
Ответ Создать тему
Новые блоги и статьи
SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf
8Observer8 01.02.2026
Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .
SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли
8Observer8 30.01.2026
Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .
SDL3 для Web (WebAssembly): Установка Emscripten SDK (emsdk) и CMake для сборки C и C++ приложений в Wasm
8Observer8 30.01.2026
Содержание блога Для того чтобы скачать Emscripten SDK (emsdk) необходимо сначало скачать и уставить Git: Install for Windows. Следуйте стандартной процедуре установки Git через установщик. . . .
SDL3 для Android: Подключение Box2D v3, физика и отрисовка коллайдеров
8Observer8 29.01.2026
Содержание блога Box2D - это библиотека для 2D физики для анимаций и игр. С её помощью можно определять были ли коллизии между конкретными объектами. Версия v3 была полностью переписана на Си, в. . .
Инструменты COM: Сохранение данный из VARIANT в файл и загрузка из файла в VARIANT
bedvit 28.01.2026
Сохранение базовых типов COM и массивов (одномерных или двухмерных) любой вложенности (деревья) в файл, с возможностью выбора алгоритмов сжатия и шифрования. Часть библиотеки BedvitCOM Использованы. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL_LoadPNG (без SDL3_image)
8Observer8 28.01.2026
Содержание блога SDL3 имеет собственные средства для загрузки и отображения PNG-файлов с альфа-каналом и базовой работы с ними. В этой инструкции используется функция SDL_LoadPNG(), которая. . .
SDL3 для Android: Загрузка PNG с альфа-каналом с помощью SDL3_image
8Observer8 27.01.2026
Содержание блога SDL3_image - это библиотека для загрузки и работы с изображениями. Эта пошаговая инструкция покажет, как загрузить и вывести на экран смартфона картинку с альфа-каналом, то есть с. . .
Влияние грибов на сукцессию
anaschu 26.01.2026
Бифуркационные изменения массы гриба происходят тогда, когда мы уменьшаем массу компоста в 10 раз, а скорость прироста биомассы уменьшаем в три раза. Скорость прироста биомассы может уменьшаться за. . .
КиберФорум - форум программистов, компьютерный форум, программирование
Powered by vBulletin
Copyright ©2000 - 2026, CyberForum.ru