Как добавить несколько ckeditor, используя класс на одной странице?

Я пытаюсь добавить несколько ckeditor, используя один класс на странице. Нажав на ссылку добавить больше, я хочу добавить динамический ckeditor. Ниже приведен мой код.

<script src = "https://cdn.ckeditor.com/4.11.3/standard/ckeditor.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script type = "text/javascript">
    CKEDITOR.replace( 'editor1' );
</script>


<textarea class = "editor1"></textarea>
<textarea class = "editor1"></textarea>
<textarea class = "editor1"></textarea>
<textarea class = "editor1"></textarea>

Пожалуйста, объясните больше

— 05.03.2019 15:21

javascript jquery html laravel ckeditor

05.03.2019 15:09

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

2 114

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Во-первых, присвойте всем элементам textarea идентификатор.

<textarea class = "editor1" id = "editor1"></textarea>
<textarea class = "editor1" id = "editor2"></textarea>
<textarea class = "editor1" id = "editor3"></textarea>
<textarea class = "editor1" id = "editor4"></textarea>

Затем просто найдите все экземпляры класса editor1 и используйте идентификатор для создания редактора.

<script>
    $('.editor1').each(function () {
        CKEDITOR.replace($(this).prop('id'));
    });
</script>

Вы использовали идентификатор, я не хочу использовать идентификатор.

— 06.03.2019 06:17

Почему? почти все элементы в html имеют идентификатор.

— 06.03.2019 08:29

Нет, это не требуется. Я хотел получить Ckeditor, используя только класс. Спасибо.

— 07.03.2019 10:24

05.03.2019 15:40

Ответ принят как подходящий

Согласно ckeditor, если вы используете класс «ckeditor», он автоматически создаст редактор. Как показано ниже.

<textarea class = "ckeditor" required = "" name = "question_option_1" ></textarea>
<textarea class = "ckeditor" required = "" name = "question_option_2" ></textarea>
<textarea class = "ckeditor" required = "" name = "question_option_3" ></textarea>

Похоже, вы хотите клонировать ckeditor.

 <html>
        <head>
            <script src = "http://code.jquery.com/jquery-1.11.3.min.js"></script>
            <script src = "http://cdn.ckeditor.com/4.5.4/standard/ckeditor.js"></script>
        </head>
        <body>
            <div class = "row hide_mail_id_domain">
                <div class = "col-sm-12">
                    <table class = "table">
                        <thead>
                            <tr>
                                <th>Option</th>
                                <th>Action</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr>
                                <td>
                                    <textarea class = "ckeditor" required = "" name = "question_option_1" ></textarea>
                                    <textarea class = "ckeditor" required = "" name = "question_option_1" ></textarea>
                                    <textarea class = "ckeditor" required = "" name = "question_option_1" ></textarea>
                                </td>
                                <td></td>
                            </tr>
                        </tbody>
                    </table>
                    <a href = "javascript:void(0)" class = "btn btn-success add_more right" style = "float: right;">Add More</a>
                </div>
            </div>
            <script>
                var REMOVE = '';
                var i=1;
                $(document).ready(function () {
                    $('.add_more').click(function () {
                        var oneplus=i+1;
                        var tr_object = $('tbody').find('tr:first').clone();
                        // getting and renaming existing textarea by name.
                        $(tr_object).find('textarea[name = "question_option_1"]').attr("name", "question_option_"+oneplus+"");
                        $(tr_object).find('input').val(''); 
                        $(tr_object).find('td:last').html('<a href = "javascript:void(0)" class = "btn btn-danger remove_more">Remove</a>');
                        $('tbody').append(tr_object);
                        //replace code
                        CKEDITOR.replace("question_option_"+oneplus+"");
                        // when i were clicking on add more during my testing , then extra cke-editor id also appending to DOM. so for removing other then first
                        // included below code
                        $('#cke_question_option_1').each(function() {
                            var $ids = $('[id=' + this.id + ']');
                            if ($ids.length > 1) {
                                $ids.not(':first').remove();
                            }
                        });
                        i=i+1;
                        oneplus++;
                    });
                    $(document).on('click', '.remove_more', function () {
                        var id = $(this).closest('tr').find('.id').val();
                        if (id != '') {
                            if (REMOVE != '') {
                                REMOVE = REMOVE + ',' + id;
                            } else {
                                REMOVE = id;
                            }
                            $('#id').val(REMOVE);
                        }
                        $(this).closest('tr').remove();
                    });
                });
            </script>
        </body>
    </html>

06.03.2019 06:25

Другие вопросы по теме

Получите сообщения с тем же тегом, нажав

Ввод .NET Core Controller всегда равен нулю из AJAX

Сбросить datetimepicker на текущий месяц

Как выбрать диапазон после флажка с помощью $$this с помощью jQuery

Как я могу изменить модальное окно jQuery на модальное окно React?

LengthChange не отображается, когда я добавляю кнопку (печать) в таблицы данных

OnClick на элементе заполняет массив с помощью JS

Woocommerce, мне нужно получить URL-адрес, чтобы я мог получить идентификатор продукта оттуда

Как я могу получить полное имя класса, если я знаю только его часть?

Можем ли мы получить QR-коды из HTML

Как добавить несколько ckeditor, используя класс на одной странице?

Ответы 2

Другие вопросы по теме

Похожие вопросы