Использовать стили от Ckeditor

@abbat81 · Регистрация: 20.07.2011

Author24 — интернет-сервис помощи студентам

Вроде успешно подключил стиль от Ckeditor, но заставить корректно отображать то, как запланировано в самом редакторе не получается.

На картинке видно сверху текст сохраненный в редакторе, а внизу текст, как он делается в редакторе.

На оф. сайте редактора есть демо:
http://ckeditor.com/demo

В самом редакторе текст в том виде, который требуется. Сверху Source (Источник, у кого как по локали), берем исходник, прибавляем:

HTML5

<head>
<link rel="stylesheet" href="ckeditor/contents.css">
<script type="text/javascript" src="ckeditor/ckeditor.js"></script>
</head>

И получается текст величиной побольше планируемого, цитаты не такие, как планировались. Как заставить корректно отображать исходник?

Все, что я прошу - показать, как отобразить текст из Демо в таком виде, как он лежит в textarea на стадии редактирования.

Заранее благодарен.

@Lazy_Den · 13.07.2015, 23:49

abbat81, возьмите стили для шрифтов и других нужных компонентов из css-файла, который относится к редактору, запишите их в свой css-файл, который вы будете использовать на сайте.

Добавлено через 15 минут
P.S. Вот самые основные для демо на оф.сайте (пример в песочнице):

CSS

body {
  font-family: sans-serif, Arial, Verdana, "Trebuchet MS";
  font-size: 13px;
  line-height: 1.6;
  color: #333;
  background-color: #fff;
}
a {
  color: #0782C1;
}
p {
  font-size: 13px;
  line-height: 1.6;
}
i, cite, em, var, address, dfn {
  font-style: italic;
}
s, strike, del {
  text-decoration: line-through;
}
ol, ul, dl {
  padding: 0 40px;
}
h1, h2, h3, h4, h5, h6 {
  font-weight: normal;
  line-height: 1.2;
}
h1 {
  font-size: 2em;
}
h2 {
  font-size: 1.5em;
}
blockquote {
  font-style: italic;
  font-family: Georgia, Times, "Times New Roman", serif;
  padding: 2px 8px 2px 20px;
  border-style: solid;
  border-color: #ccc;
  border-width: 0;
  border-left-width: 5px;
}
img.right {
  border: 1px solid #ccc;
  float: right;
  margin-left: 15px;
  padding: 5px;
}

@abbat81 · 14.07.2015, 13:01 **[ТС]**

А где были взяты "Вот самые основные для демо"?

@abbat81 · 14.07.2015, 13:48 **[ТС]**

Ка сделать отступы текста от таблицы.
В стилях добавил

CSS

1
2
3

table, th, td {
 margin-left: 15px;
}

Это помогло, но вся моя страница прилепилась к левому краю, она просто заключена в <table border="0" align="center">

Пробовал, но не помогло:

CSS

1
2
3

p {
  margin-right: 15px;
}

Вот исходник:

HTML5

<h2>Technical details <a id="tech-details" name="tech-details"></a></h2>
 
<table align="right" border="1" margin ="50" bordercolor="#ccc" cellpadding="5" cellspacing="0" style="border-collapse:collapse">
    <caption><strong>Mission crew</strong></caption>
    <thead>
        <tr>
            <th scope="col">Position</th>
            <th scope="col">Astronaut</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td>Commander</td>
            <td>Neil A. Armstrong</td>
        </tr>
        <tr>
            <td>Command Module Pilot</td>
            <td>Michael Collins</td>
        </tr>
        <tr>
            <td>Lunar Module Pilot</td>
            <td>Edwin &quot;Buzz&quot; E. Aldrin, Jr.</td>
        </tr>
    </tbody>
</table>
 
<p>Launched by a <strong>Saturn V</strong> rocket from <a href="http://en.wikipedia.org/wiki/Kennedy_Space_Center">Kennedy Space Center</a> in Merritt Island, Florida on July 16, Apollo 11 was the fifth manned mission of <a href="http://en.wikipedia.org/wiki/NASA">NASA</a>'s Apollo program. The Apollo spacecraft had three parts:</p>
 
<ol>
    <li><strong>Command Module</strong> with a cabin for the three astronauts which was the only part which landed back on Earth</li>
    <li><strong>Service Module</strong> which supported the Command Module with propulsion, electrical power, oxygen and water</li>
    <li><strong>Lunar Module</strong> for landing on the Moon.</li>
</ol>

@Lazy_Den · 14.07.2015, 14:43

Сообщение от abbat81

А где были взяты "Вот самые основные для демо"?

Из файла contents.css

Добавлено через 3 минуты

Сообщение от abbat81

но вся моя страница прилепилась к левому краю, она просто заключена в <table border="0" align="center">

Таблицы не являются элементом верстки, а элементом для вывода информации в табличном виде.

@abbat81 32 / 32 / 3 Регистрация: 20.07.2011 Сообщений: 407
	14.07.2015, 13:01 [ТС]	3
	А где были взяты "Вот самые основные для демо"? 0

@Lazy_Den 3325 / 2845 / 1423 Регистрация: 15.01.2014 Сообщений: 6,170
	14.07.2015, 14:43	5
	Сообщение от abbat81 А где были взяты "Вот самые основные для демо"? Из файла contents.css Добавлено через 3 минуты Сообщение от abbat81 но вся моя страница прилепилась к левому краю, она просто заключена в <table border="0" align="center"> Таблицы не являются элементом верстки, а элементом для вывода информации в табличном виде. 0