Hello! There is such a task: the page uses the TinyMCE text editor to add descriptions to the slides, and there is a 'add slide' button, by pressing which textarea is added, but a "pure textarea" is added, without using tinymce. (the project also uses the UIKit 2.x framework)
My slide form code:
<form class="uk-form uk-grid uk-margin-bottom" id="theForm" method="post" action=""> <div class="uk-width-1-2"> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Наименование</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Тип</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Габартиные размеры</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Входное напряжение (V)</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">К-во подклчаемых DC</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Ток макс. на один мотор</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Подключаемых ЭМП датчиков (шт)</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Интерфейс связи с ПК</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Микроконтроллер</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Частота кварца</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Входы АЦП (шт)</label> <input class="uk-form-expand" type="text" name="title"></input> </div> <div class="uk-form-row uk-form-horizontal"> <label class="uk-form-label" for="title">Документация</label> <input class="uk-form-expand" type="text" name="title"></input> </div> </div> <div class="uk-width-1-2"> <h3 class="uk-text-center">Добавить фотографии</h3> <div class="uk-form-row uk-form-horizontal"> <div id="targetElement0" ></div> </div> </div> <div id="slides"> <div class="uk-form-row uk-margin-top uk-margin-top uk-width-1-1 uk-grid"> <h3 class="uk-width-1-1 uk-text-center">Добавить слайды</h3> <div class="uk-width-1-2"> <div id="image-preview"> <label for="image-upload" id="image-label">Выберите файл</label> <input type="file" name="image" id="image-upload"/> </div> </div> <div class="uk-width-1-2"> <div class="uk-form-row"> <center><h2>Особенности</h2></center> </div> <div class="uk-form-row uk-form-horizontal"> <textarea>Next, start a free trial!</textarea> </div> </div> </div> <div class="uk-form-row uk-margin-top uk-margin-top uk-width-1-1 uk-grid"> <h3 class="uk-width-1-1 uk-text-center">Слайд №2</h3> <div class="uk-width-1-2"> <div id="image-preview"> <label for="image-upload2" id="image-label2">Выберите файл</label> <input type="file" name="image" id="image-upload2"/> </div> </div> <div class="uk-width-1-2"> <div class="uk-form-row"> <center><h2>Особенности</h2></center> </div> <div class="uk-form-row uk-form-horizontal"> <textarea>Next, start a free trial!</textarea> </div> </div> </div> <div class="uk-form-row uk-margin-top uk-margin-top uk-width-1-1 uk-grid"> <h3 class="uk-width-1-1 uk-text-center">Слайд №3</h3> <div class="uk-width-1-2"> <div id="image-preview"> <label for="image-upload3" id="image-label3">Выберите файл</label> <input type="file" name="image" id="image-upload3"/> </div> </div> <div class="uk-width-1-2"> <div class="uk-form-row"> <center><h2>Особенности</h2></center> </div> <div class="uk-form-row uk-form-horizontal"> <textarea>Next, start a free trial!</textarea> </div> </div> </div> </div> <div class="uk-form-row uk-width-1-2 uk-align-center"> <button class="uk-button uk-width-expand" onclick="addslideformrow()" type="button" id="butt">Добавить ещё один слайд</button> </div> </form> My button code:
<script type="text/javascript"> var i = 4; function addslideformrow() { var parent = document.getElementById('slides'); var container = document.createElement('div'); container.innerHTML = '<div class="uk-form-row uk-margin-top uk-margin-top uk-width-1-1 uk-grid">' + '<h3 class="uk-width-1-1 uk-text-center">Слайд №'+i+'</h3>'+ '<div class="uk-width-1-2">'+ '<div id="image-preview">'+ '<label for="image-upload'+i+'" id="image-label'+i+'">Выберите файл</label>'+ '<input type="file" name="image" id="image-upload'+i+'"/>'+ '</div>'+ '</div>'+ '<div class="uk-width-1-2">'+ '<div class="uk-form-row">'+ '<center><h2>Особенности</h2></center>'+ '</div>'+ '<div class="uk-form-row uk-form-horizontal">'+ '<textarea>Next, start a free trial!</textarea>'+ '</div>'+ '</div>'+ '</div>'; if (++i <= 11) { parent.appendChild(container); } }; </script> (number of slides is limited to 10th)
Tell me how to make it so that when you add a new element to the DOM, it becomes the editor of TinyMCE?
