Выберите диапазон в текстовом поле TinyMCE с jquery

Question

Я использую tinymce в своем приложении с jquery. Я также использую jquery add in для tinymce, чтобы загрузить его локально.

Я довольно noob с jquery, но я думаю, что смогу получить его так.

<h1 class="class">John</h1> 
<form> 
    <textarea id="id"> 
     <p>Hello <span class="class">John</span>,</p> 
    </textarea> 
</form> 

<script> 
    // Doesn't work for either 
    $('form#id.class').text('Mark'); 

    // Doesn't Work Either for the textarea but does the h1 
    $('.class').text('Mark'); 
</script> 

Но, конечно, это не работает или почему я буду размещать это. Что я делаю не так?

Я импортирую jquery и могу захватить другие вещи так же, как это, и это работает.

Answer 1

Вы импортируете библиотеку jQuery?

Если вы не хотите скачать jQuery here или использовать CDN, вы можете найти here.

Если это не ваша проблема, обратитесь к документации API для jQuery, чтобы узнать, правильно ли используете .text().

Вот ссылка: http://api.jquery.com/text/

Кроме того, вы не должны использовать HTML-теги в текстовое поле. Textareas визуализирует все внутри себя как текст. Вы хотите использовать редактируемый контент, который выглядит так: <div contenteditable="true"></div>

Answer 2

Содержание <textarea> - это текстовая строка.

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

Рабочий пример:

var textArea = document.getElementsByTagName('textarea')[0]; 
 
var textAreaContent = textArea.textContent; 
 
textAreaContent = textAreaContent.replace('<span class="class">John</span>','<span class="class">Mark</span>'); 
 
textArea.textContent = textAreaContent;

<form> 
 
    <textarea id="id"> 
 
     <p>Hello <span class="class">John</span>,</p> 
 
    </textarea> 
 
</form>

N.B. JQuery для нативного JavaScript выше:

$(document).ready(function(){ 

$('textarea').text($('textarea').text().replace('<span class="class">John</span>','<span class="class">Mark</span>')); 

}); 

Answer 3

При загрузке TinyMCE заменить <textarea> печатными вы автоматически не синхронизируются с оригинальным <textarea>. Как только TinyMCE загружен, вы работаете в iFrame, а не в оригинале <textarea>. Когда вы отправляете форму, используя стандартную форму, отправьте TinyMCE, автоматически обновляя недочет <textarea> перед отправкой формы. Если вы хотите, чтобы получить текущее значение из редактора вы можете сделать один из двух вещей:

• Используйте get() API говорить непосредственно TinyMCE
• Используйте triggerSave() API, чтобы вручную обновить, лежащий в основе <textarea>, прежде чем пытаться работать с <textarea>

The get() API позволяет целевой конкретный экземпляр редактора на странице, а затем использовать getContent() API для получения данных.

• https://www.tinymce.com/docs/api/tinymce/root_tinymce/#get
• https://www.tinymce.com/docs/api/tinymce/tinymce.editor/#getcontent

triggerSave() API говорит TinyMCE для обновления базового актива <textarea> сразу, после чего вы можете взаимодействовать с данными в <textarea>, чтобы получить то, что вам нужно.

• https://www.tinymce.com/docs/api/tinymce/root_tinymce/#triggersave