Блог

Главная - Вопросы по программированию - Добавить CKEditor в тег div с помощью события onclick?

Добавить CKEditor в тег div с помощью события onclick?

#javascript #html #jquery #ckeditor

Вопрос:

Я создаю веб-сайт блога, я хочу добавить это(CKEditor) или любой текстовый редактор(WYSIWYG) в свой тег формы. Я много ищу на всех известных платформах. но ответа я не нашел. Метод, который я использую, заключается в том, что я написал сценарий. Когда я нажал, я ввел код тега textarea в цитату моего сценария, но простые теги textarea добавляются в мой код. Но скрипт редактора не загружается. Как загрузить полнофункциональный редактор для события щелчка?

 <!DOCTYPE html>
<html>
  <head>
      <meta charset="utf-8">
      <title>CKEditor</title>
      <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
  </head>
  <body>
   <h3>Document Load (Working)</h3>
   <textarea name="editor1"></textarea>
   <script>
           CKEDITOR.replace( 'editor1' );
   </script>            
   <h3>When Append (not working)</h3>
   <button onclick="addCodeEditor('Editor')" class="btn btn-primary">Editor</button>   
   <div id="additionalElement"></div>
   <script>
            CKEDITOR.replace( 'editor2' );
   </script>
 </body>
</html>

   <script>
 var codeEditorCount;
 function addCodeEditor(Editor){
    var div = document.getElementById('additionalElement');
    div.innerHTML  = '<textarea name="editor2"></textarea>';
    codeEditorCount  ;
 }
   </script>

Ответ №1:

Это действительно работает. Я сделал для тебя скрипку: https://jsfiddle.net/bogatyr77/cbuzmfpL/2/

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

 document.getElementById('editor1').style.display = 'none';

function myFunction() {
  CKEDITOR.replace('editor1');
} 
 <script src="https://cdn.ckeditor.com/4.16.2/standard/ckeditor.js"></script>
<button type="text" onClick="myFunction()">
Click me
</button>
<textarea name="editor1" id="editor1" rows="10" cols="80">
                This is my textarea to be replaced with CKEditor 4.
</textarea>

Комментарии:

1. И как заменить редактор WYSIWYG. если вы знаете сценарий, упомяните здесь

2. Обновил свою скрипку. Теперь у вас есть редактор 1, загруженный при запуске, и если вы нажмете кнопку, редактор будет заменен редактором 2. Видишь эту скрипку: jsfiddle.net/bogatyr77/cbuzmfpL/4

3. Спасибо тебе, Бернард. не подскажете ли вы мне, как заменить WYSIWYG? CKEditor.replace-это команда для CKEditor. какую команду использовать для WYSIWYG?

4. Сделал новую скрипку. Теперь вы можете изменить текстовую область WISIWIG, нажав на кнопку. См.: jsfiddle.net/bogatyr77/xfwgaL60/3

Метки: