Повернуть текстовое поле в редакторе (WYSIWYG | CKEditor)

Вот быстрая помощь для вас, чтобы интегрировать CKEditor с веб-приложений в три шага.

Презентация

Поверните ваш Теги TEXTAREA в редактор веб-больше не является сложной задачей. Среди многих редакторов, которые вы можете найти в Интернете, Мы видим, использование CKEditor. Увидеть редактор в действии в этом ДЕМО.

Установка

Скачать CKEditor в http://ckeditor.com/download. Версия, используемая в этой должности был 3.6.4, из 17 Июль 2012. Извлеките файл ckeditor_3.6.4.zip Вместе с приложением. Папка CKEditor будет создан. Вскоре, Теперь просто делаете вызов в исходном коде!

Интеграция

CKEditor — это приложение JavaScript. Чтобы прочитать его, просто сделать простой вызов его внутри Теги Глава вашего исходного кода. Готово, что, Javascript API CKEditor уже будет готова к использованию. Не забудьте изменить путь к файлу CKEditor.js в каталог, где вы распаковали.

Шаг 1 – Сделать вызов CKEditor
1
2
3
  <Руководитель>
    <Тип сценария="text/javascript" src="ckeditor/ckeditor.js"></сценарий>
  </Руководитель>
Шаг 2 – Создайте поле TEXTAREA
1
2
3
  <тело>
    <Идентификатор TextArea="editor1" имя="editor1">&Lt;p&GT;Начальное значение.&Lt;/p&GT;</Текстовое поле>
  </тело>
Шаг 3 – Государственный TEXTAREA (ID) будут заменены CKEditor
1
2
3
4
5
6
7
  <Руководитель>
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция()  {
        CKEDITOR.заменить( «editor1» );
      };
    </сценарий>    
  </Руководитель>

Вскоре, уже работает! Не верю? Сохранить, независимо от “F5” в браузере и посмотрите сами… полный код выглядит следующим образом:

Полный код

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<HTML>
  <Руководитель>
    <Название>CKEditor</Название>
    <meta content="text/html; charset = utf-8" http-equiv="content-type" />
    <script type="text/javascript" src="ckeditor/ckeditor.js"></сценарий>
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция()  {
        CKEDITOR.заменить( «editor1» );
     };
    </сценарий>
  </Руководитель>
  <тело>
    <form action="request.php" method="post">
      <textarea id="editor1" name="editor1">&Lt;p&GT;Начальное значение.&Lt;/p&GT;</Текстовое поле>
      <input type="submit" value="Submit" />
    </форма>  
  </тело>
</HTML>

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

Статья заканчивается здесь, но я оставлю несколько больше жемчуг для любопытных:

Советы

(1) Нет события onload, класс =”CKEditor”

Если присвоить класс “CKEditor” для вашего TEXTAREA, Он будет автоматически преобразован в CKEditor, без необходимости использовать скрипт, вызываемый события “OnLoad”, Ну просто:

1
2
3
4
5
6
7
8
9
10
11
12
13
<HTML>
  <Руководитель>
    <Название>CKEditor</Название>
    <Мета содержание="text/html; charset = utf-8" http-equiv="content-type" />
    <Тип сценария="text/javascript" src="ckeditor/ckeditor.js"></сценарий>
  </Руководитель>
  <тело>
    <действия формы="request.php" метод="post">
      <Текстовое поле класс="ckeditor" ID="editor1" имя="editor1">&Lt;p&GT;Начальное значение.&Lt;/p&GT;</Текстовое поле>
      <Тип ввода="submit" значение="Submit" />
    </форма>  
  </тело>
</HTML>

(2) Изменить разрыв строки <p> по <Br />

Я заметил два способа обмена P BR при teclamos. Первый, установлен параметр enterMode с значение 2, Начиная с 1 = P, 2 = BR и 3 = DIV.

1
2
3
4
5
6
7
  <Руководитель>  
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция() {
        CKEDITOR.заменить( «editor1», {enterMode: Номер(2)} );
      };
    </сценарий>
  </Руководитель>

Или так, Открыть файл config.js и что-то вроде:

1
2
3
CKEDITOR.editorConfig = Функция( конфигурации ) {
  конфигурации.enterMode = CKEDITOR.ENTER_BR;
};

В этом случае, При вводе ENTER, У нас есть варианты:
CKEDITOR. ENTER_P – создан новый пункт P;
CKEDITOR. ENTER_BR-линия разрыва с BR;
CKEDITOR. ENTER_DIV-новый блок с DIV создается.

Рекомендуется закрыть и открыть браузер, чтобы увидеть результат

Это изменение, потому что это может быть кэширован! Если он по-прежнему не работает, Очистите кэш браузера.

(3) Изменить цвет фона панели инструментов CKEditor

Как вы заметили, Мы можем вносить изменения в наши CKEditor назначение параметров непосредственно в CKEDITOR или через файл config.js. Так, Я продемонстрирую только один из:

1
2
3
4
5
6
7
  <Руководитель>  
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция() {
        CKEDITOR.заменить( «editor1», {uicolor: «#ff0000»} );
      };
    </сценарий>
  </Руководитель>

(4) Объединение параметров конфигурации CKEditor

Можно комбинировать параметры конфигурации CKEditor. Для удовлетворения возможности, Взгляните на Конфигурационный API. Пример:

1
2
3
4
5
6
7
8
9
10
11
12
  <Руководитель>  
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция() {
        CKEDITOR.заменить( «editor1», {  uicolor: «#ccc»,
                                        enterMode: CKEDITOR.ENTER_P,
                                        customConfig : «ckeditor/outroConfig.js»,
                                        язык: «en»        
                                      } 
                        );
      };
    </сценарий>
  </Руководитель>

(5) Поддерживаемые языки в CKEditor

CKEditor поддерживает 58 Языки, в том числе “EN”. Смотрите больше на Языки интерфейса пользователя. Приведенный выше пример демонстрирует использование.

(6) Настройка панели инструментов

– Основы

Вы не можете предоставлять все возможности CKEditor. Так, Почему бы не оптимизировать панели инструментов согласно вашей потребности? Ниже приведен пример, оставляя очень простой редактор.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
  <Руководитель>  
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция() {
        CKEDITOR.заменить( «editor1», {
                           панель инструментов:
                           [
                             { имя: «basicstyles», элементы : [ «Смелейшей»,«Курсив» ] },
                             { имя: «пункт», элементы : [ «NumberedList»,«BulletedList» ] },
                             { имя: «инструменты», элементы : [ «Увеличить»,'-',«О» ] }
                           ]}         
                         );
      };
    </сценарий>
  </Руководитель>

– Завершить

Ниже приведен полный пример. Удаление кнопки, которые не хотят.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
  <Руководитель>  
    <Тип сценария="text/javascript">
      окно.OnLoad = Функция() {
        CKEDITOR.заменить( «editor1», {
                           панель инструментов: [
                             { имя: «документ», элементы : [ «Источник»,'-',«Сохранить»,«NewPage»,«DocProps»,«Предварительный просмотр»,«Print»,'-',«Шаблоны» ] },
                             { имя: «буфер обмена», элементы : [ «Cut»,«Copy»,«Вставить»,«PasteText»,«PasteFromWord»,'-',«Undo»,«Повторить» ] },
                             { имя: «Редактирование», элементы : [ «Найти»,«Заменить»,'-',«SelectAll»,'-',«Проверка орфографии», «Scayt» ] },
                             { имя: «формы», элементы : [ «Форма», «Checkbox», «Радио», «TextField», «Textarea», «Select», «Кнопки», «ImageButton», «HiddenField» ] },
                             '/',
                             { имя: «basicstyles», элементы : [ «Смелейшей»,«Курсив»,«Подчеркивание»,«Удар»,«Индекс»,«Верхний»,'-',«RemoveFormat» ] },
                             { имя: «пункт», элементы : [ «NumberedList»,«BulletedList»,'-',«Уровень»,«Indent»,'-',«Цитата»,«CreateDiv», '-',«JustifyLeft»,«JustifyCenter»,«JustifyRight»,«JustifyBlock»,'-',«BidiLtr»,«BidiRtl» ] },
                             { имя: «ссылки», элементы : [ «Ссылка»,«Удалить»,«Якорь» ] },
                             { имя: «вставить», элементы : [ «Изображение»,«Flash»,«Таблица»,«HorizontalRule»,«Смайлик»,«SpecialChar»,«Разрыв страницы»,«Iframe» ] },
                             '/',
                             { имя: «стиль», элементы : [ «Стиль»,«Формат»,«Шрифт»,«FontSize» ] },
                             { имя: «цвета», элементы : [ «Прямоугольников»,«BGColor» ] },
                             { имя: «инструменты», элементы : [ «Увеличить», «ShowBlocks»,'-',«О» ] }                            
                           ]}         
                         );
      }; 
    </сценарий>
  </Руководитель>

– Модератором

Это пример более умеренный, с помощью инструмента бар только, но с основных функций. Обратите внимание, что, включая, Это позволяет объединить и определяют высоту и ширину редактора.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
<Руководитель>  
  <Тип сценария="text/javascript">
    окно.OnLoad = Функция() {       
        CKEDITOR.заменить( «editor1», {
                           панель инструментов:
                           [
                             { имя: «basicstyles», элементы : [ «Смелейшей»,«Курсив»,«Подчеркивание» ] },
                             { имя: «пункт», элементы : [ «NumberedList»,«BulletedList» ] },
                             { имя: «пункт», элементы : [ «JustifyLeft»,«JustifyCenter»,«JustifyRight»,«JustifyBlock»] },
                             { имя: «стиль», элементы : [ «Шрифт»,«FontSize» ] },
                             { имя: «цвета», элементы : [ «Прямоугольников»,«BGColor» ] },
                             { имя: «буфер обмена», элементы : [ «Cut»,«Copy»,«Вставить»,«PasteFromWord»,'-',«Undo»,«Повторить» ] },                             
                             { имя: «инструменты», элементы : [ «Увеличить»,'-',«О» ] }
                           ],
                           Ширина: "740px",
                           Высота: "200px"}
                         );
    };
  </сценарий>
</Руководитель>

(7) Текстовое поле (CKEditor) пустой, когда форма

Если ваш Textarea/CKeditor кажутся пустыми (пустая) При отправке формы, Вы можете использовать это “Фейерверк” Я создал ниже, что на самом деле служит для получения содержимого CKEditor и играть в соответствующее текстовое поле. Это делается путем вызова функции setCKEditorToTextarea() Когда вы нажмете кнопку отправить (Отправить или кнопку), обычно в событие onclick() Кнопка.

1
2
3
4
5
6
<Тип сценария="text/javascript">
      Функция setCKEditorToTextarea() {
        Это(var Имя_экземпляра в CKEDITOR.экземпляры)
          CKEDITOR.экземпляры[Имя_экземпляра].updateElement();            
      }
</сценарий>

Слова от разработчика

CKEditor — текстовый редактор для использования внутри веб-страницы. Это WYSIWYG редактор, Это означает, что текст редактируется пользователем будет как можно ближе с опубликованной. Он привносит в общие функции редактирования веб, Найдено в desktop приложения для редактирования, Например, Microsoft Word и OpenOffice. Как только CKEditor лицензируется на условиях лицензии “Открытым исходным кодом” и коммерческие вопросы, Вы сможете использовать в любом типе приложения. Это идеальный редактор для разработчиков, призваны обеспечить удобные и мощные решения для их пользователей.

Другие редакторы

Шрифты

В первую очередь, что! Разработчик веб-сайт для получения более подробной информации.

Всего просмотров: 64597

29 Комментарии по “Повернуть текстовое поле в редакторе (WYSIWYG | CKEditor)

  1. Очень крутой пост, к которому я хотел бы использовать часть связана с темой 6, Учитывая, что CKEditor сохраняет в вашем html содержание описано внутри textarea нужно представить текст по электронной почте в формате html, но нужно сохранить в BD в txt формате же. Есть ли у вас какие-либо предложения, которые я могу использовать? :)

  2. Роналдо сказал:

    Гай, Я занимаюсь разработкой проекта и форма имеет два поля textarea.
    Я использую CKEditor в обоих.

    Рабочие часы – Слева

    CKEDITOR. заменить( ' expedienteEsq’ );
    CKEDITOR.add

    Рабочие часы – Правильно

    CKEDITOR. заменить( ' expedienteDir’ );
    CKEDITOR.add

    Редактор применяется правильно. Но когда форма обработки php файла он получает только данные из первого поля и вторым будет недействительной.

    Это проблема с CKEditor? потому что если вы не используете его я обычно получают данные из двух полей
    .
    Я использовал структуры предложил сам сайт CKeditor.

    • Привет Роналдо, Я сделал тест здесь и не было никаких проблем. Выполните следующие действия, Возьмите код ниже, поместить в файл “Teste.php” внутри вашего сервера, но изолированы от вашего приложения, которое дает проблема. Обратите внимание, что при представлении формы с двумя textarea (CKEditor), данные будут отправляться нормально.

      Teste.php файл (ДВА ОДНОВРЕМЕННЫХ TEXTAREAS)

      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      21
      22
      
      <HTML>
        <Руководитель>
          <Название>CKEditor</Название>
          <meta content="text/html; charset = utf-8" http-equiv="content-type" />
          <script type="text/javascript" src="ckeditor/ckeditor.js"></сценарий>
          <script type="text/javascript">
            Window.OnLoad = функция()  {
              CKEDITOR. заменить( «editor1» );
              CKEDITOR. заменить( «editor2» );
           };
          </сценарий>
        </Руководитель>
        <тело>
          <form action="teste.php" method="post">
            <textarea id="editor1" name="editor1">Начальное значение 1</Текстовое поле>
            <textarea id="editor2" name="editor2">Начальное значение 2</Текстовое поле>
            <input type="submit" value="Submit" />
          </форма>  
        </тело>
      </HTML>
      <?PHP Эхо ' Редактор 1 ---> '.@$_ ЗАПРОС[«editor1»].'<Br />'; ?>
      <?PHP Эхо ' Редактор 2 ---> '.@$_ ЗАПРОС[«editor2»].'<Br />'; ?>
  3. Роналдо сказал:

    Я попытался передать код, но я не думаю, что он был опубликован. Но вы знаете, что случилось с правом? CKEditor использовать только один из textarea отправляет данные в другой пустой.

    • Ok, Я думаю, что я понимаю. Как показано выше, Я не имею такую же проблему. Так, reanalise код, Если у вас не более одного поля (Вход) с тем же именем (имя). Объятия!

      • Роналдо сказал:

        Я решил с собственное…. (6) Текстовое поле (CKEditor) пустой, когда форма

        Это было достаточно, чтобы поставить функцию там и ОК :) Таким образом, что вы прошли использует php право? Даже находясь в php страниц я развернуты редактор, с помощью javascript.
        Спасибо за советы

        используя хотя q не является предметом этой должности, Я программа долгое время с java и .net и php в меньше времени и я собирание с даты конвертации в строку. Не имеют функцию прямой, Как строка, Дата (strtotime) Правильно? Думаю, вы знаете php также более q я. Если вы знаете, это отправить на мой электронный ronaldodantas2@GMAI.com

        Не нужно публиковать этот комментарий. Спасибо за советы.

  4. Привет Тейлор очень хорошо ваше сообщение.

    Уже установлен, и я использую работает отлично. У меня есть сомнения, например в вашем блоге вы ввели в желтой коробки с помощью скриптов. Как вы это сделали? В ckeditor и?

    Спасибо

  5. Фернандо сказал:

    Как включить специальный характер th(ПЕРВЫЙ 1) и й(ВТОРОЙ 2) ЕСЛИ Я НАЖМИТЕ КНОПКУ ВСТАВКА СПЕЦИАЛЬНЫХ СИМВОЛОВ? Я ХОТЕЛ БЫ СДЕЛАТЬ ЭТО, ПРИ НАБОРЕ НА КЛАВИАТУРЕ САМ БЕЗ ОТКРЫТИЯ ЛЮБОГО ОКНА.

    • Гай, Протестировано здесь и просто обычная форма, которая работает, IE, удерживайте клавишу ALT и введите последовательность чисел, соответствующих нужный символ. Пример: ALT + 166 = РР и ALT + 167 = °. Сказал!

  6. Джеймс сказал:

    Доброе утро, очень хорошее сообщение, Я начала работать с javascript теперь, и мне нужно создать текстовый редактор, Я думал, что я хотел бы использовать ckeditor, но с трудом, чтобы иметь возможность манипулировать, Я просто хотел бы тип , Сохранить, Новые функции, Отменить, Повторить, Паста, копия, и выбор языка, только вместо формы письма, Он бы языки программирования, и тогда придется обрабатывать полученные данные, вроде как нормальный редактор кода, только онлайн, Если вы можете мне помочь.

  7. Приятель, Я установил хорошие, небольшая проблема, я столкнулся, но что он преобразует специальные символы в html коды как â â и я хотел, чтобы быть в любом случае для моей базы данных, имеет как?

    • К сожалению, что там может быть что-то с помощью редактора, который вы используете для написания кода. Попробуйте использовать Блокнот и введите полный пример кода HTML, и посмотреть, если проблема остается.

      Попробуйте также задать политики, которые говорят на вашу страницу, которая charset использовать (8859-1-ISO или UTF-8).

      1
      2
      3
      4
      5
      
      <тело>
        <Руководитель>
            <Meta charset="UTF-8">
        </Руководитель> 
      ...

      Если вы используете PHP, Установите кодировку в начале кода, Прежде чем что-нибудь:

      1
      
        <?PHP заголовок("Content-Type: текст/html;  charset = ISO-8859-1",значение true) ?>

      Или, Старайтесь поступать содержание запросов с использованием правильной кодировки:

      1
      
        htmlentities( utf8_decode($_ ПОСТ[«переменная»]) );

      Дело в том, что проблема, которую вы цитируется не похоже CKEditor, Почему его использования в различных приложений и у меня нет проблем с Специальный символ. Испытания также демо на сайте разработчика, и я видел, никаких проблем. Там: http://ckeditor.com/demo

  8. Марсио сказал:

    Добрый день, я пытаюсь получить текст в текстовое поле через javascript для отправки в базу данных, но я не могу, является там любой метод, чтобы получить текст?
    Спасибо

  9. Добрый день.
    Я имею в виду с помощью этого устройства для рецепта врача – что-то так просто даже.
    – Хотите знать, как настроить в верхней панели (где находится функциональность) скрыть (как мало кнопку, чтобы сделать ее исчезнуть после редактирования текста)
    – Также как я получить освобожданным в нижней строке (где она появляется “тело” и другие теги) ?
    – Как сделать текстовое поле с “Высота” Автоматически: Тип, Если я прописал 10 поле будет encompridando препаратов, в то время как я печатаю… Если я только типа 1 Препарат находится на высоте окна, что я типа…

    • Привет, Извините, Там были некоторые сокращения (неудачи) в коде, так что я в конечном итоге его удаления.

      Об этом нужно, Это вполне возможно, но я хотел бы предложить, ищите профессионала, который понимает JavaScript, чтобы помочь вам.

      Я просто говорю то камней:

      – Скрыть панель инструментов (панель инструментов):

      1
      2
      3
      
      var Редактор = CKEDITOR.Встроенный( «editor1», {
          removePlugins: «инструментов»
      } );

      – Скрыть нижний колонтитул (elementspath):
      http://ckeditor.com/forums/CKEditor-3.x/Disabling-Elements-Path-Display

      – Автоматически увеличить высоту (автоматический рост):
      http://sdk.ckeditor.com/samples/autogrow.html
      http://ckeditor.com/demo#auto-grow (Демонстрация)

      Пример:

      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
      
      <HTML>
        <Руководитель>
          <Название>CKEditor</Название>
          <Мета содержание="text/html; charset = utf-8" http-equiv="content-type" />
          <Скрипт src="http:////CDN.CKEditor.com/4.5.3/Basic/CKEditor.js"></сценарий>
          <Скрипт src="plugin.js"></сценарий>  <!-- получить плагин.JS в http://CKEditor.com/addon/Autogrow-->  
          <Тип сценария="text/javascript">
           окно.OnLoad = Функция()  {
              CKEDITOR.заменить( «editor1», {             
                  removePlugins: «elementspath», 
                  removePlugins: «инструментов»,
                  extraPlugins: автоматический «рост»,
                  autoGrow_minHeight: 70,
                  Высота: «70px»
              });
           };
          </сценарий>
        </Руководитель>
        <тело>
          <действия формы="request.php" метод="post">
            <Идентификатор TextArea="editor1" имя="editor1">Первоначальный текст.</Текстовое поле>
            <Тип ввода="submit" значение="Submit" />
          </форма>  
        </тело>
      </HTML>
  10. Одилон сказал:

    Не удается правильно ввести текст в базе данных, хорошо все странно

    ex:
    <p>&AACUTE; &Это; &iacute;ASD</p>
    для

  11. Клаудио сказал:

    Привет Тейлор, поздравления на этот пост, очень хорошо объяснил. Я хочу использовать этот редактор в PHP-приложении и хотел бы знать, как создать Комбо (или кнопку) на панели инструментов, чтобы принести BD данные для вставки в текст? Другими словами, При нажатии на кнопку откроет диалоговое окно с результатом запроса, чтобы выбрать запись.
    Вы можете?

  12. Glaydison Сильва сказал:

    Привет, Великий пост. Может предложить новую должность? Нужна помощь, чтобы реализовать кнопку для загрузки изображений, близкие к демо-версии, где вы можете перемещаться вверх на сервер и такие. Я не могу никак.

  13. Ромул сказал:

    Эта должность помогла мне много, но было интересно, если вам нужно удалить пункт, который он создает автоматически, когда заполнено поле.

    ATT.
    Ромул

Оставь ответ

Ваш электронный адрес не будет опубликован. Обязательные поля отмечены *