#javascript #jquery #tinymce
#javascript #jquery #tinymce
Вопрос:
Я пытаюсь изменить цвет / полужирный цвет ключевых слов по мере ввода пользователем в поле ввода текста TinyMCE. Не уверен, нужно ли вам знать TinyMCE, чтобы ответить на этот вопрос. В любом случае, у меня определено следующее:
<p class="air-section">
<span class="air-text-entry air-entry" style="display: block; color: #E2E7E9; margin: 5px;" />
</p>
Когда пользователь вводит «Это опасно», при нажатии пробела после dangerous слово ищется, и если dangerous найдено, ТОЛЬКО dangerous выделяется жирным шрифтом и окрашивается в красный цвет.
Что у меня есть:
if ($element.hasClass('air-text-entry')) {
let pos = $element.text().lastIndexOf(" ");
if (pos > 0)
pos = 1;
// ?? What to do here
// I've played with:
$element.text().substr(pos).css({'color':'#FFD700', 'font-weight':'bold'})
Как вы можете сказать, я довольно невежественен.
Спасибо
РЕДАКТИРОВАТЬ В настоящее время я пытаюсь выделить ключевое слово как подстроку и перенести его в объект jQuery, а затем изменить css только для этого текста. Не уверен, что это выполнимо.
Ответ №1:
Вот что я получил после некоторой работы. Не полностью протестировал, но я думаю, что это сработает.
let text = $element.text()
text = $element.text().substr(0, pos)
let appliedText = text "<span class='red-text'>" $element.text().substr(pos) "</span>";
$element.html(text);
Комментарии:
1. Это забавно. В настоящее время я работаю над тем же самым. Хотя и борюсь с этим.
2. Какое-то уродливое решение, но оно отвечает моим потребностям.
Ответ №2:
Я не видел TinyMCE на работе, поэтому я использую блокнот на приемном компьютере. Я, вероятно, что-то не так, но это первый бит: Мне нужно добавить что-то, что получает «Это опасно», и обернуть его в тег span, чтобы иметь возможность добавлять туда класс.
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.danger {
color: red;
font: bold;
}
</style>
</head>
<body>
<p class="air-section">
<span class="air-text-entry air-entry danger" style="display: block; color: #E2E7E9; margin: 5px;">This is dangerous</span>
</p>
</body>
<script>
const entry = document.querySelector('.air-entry');
if(entry.textContent.includes('This is dangerous')){
entry.classList.add('danger');
}
</script>
</html>
Комментарии:
1. Мне нравится этот классовый подход. Мне придется попробовать.
Ответ №3:
Если вы знаете слова, которые нужно выделить жирным шрифтом и раскрасить, то вам может помочь следующий код. Я делал это раньше для написания SQL-запросов
Скрипка:
https://jsfiddle.net/qcykvr8j/2/
<textarea name="query_field_one" id="query_field_one" onkeyup="checkName(this)"></textarea>
function checkName(el)
{
if (el.value == "SELECT" ||
el.value == "FROM" ||
el.value == "WHERE" ||
el.value == "LIKE" ||
el.value == "BETWEEN" ||
el.value == "NOT LIKE" ||
el.value == "FALSE" ||
el.value == "NULL" ||
el.value == "TRUE" ||
el.value == "NOT IN")
{
el.style.color='orange'
}
else {
el.style.color='#FFF'
}
}
#query_field_one
{
width: 400px;
height: 150px;
max-width: 400px;
max-height: 150px;
background-color: #444;
color: white;
font-size: 14px;
}
Комментарии:
1. Это круто. Но я считаю, что с TinyMCE динамически меняется только текстовое поле. Поэтому, хотя это будет работать,
<textarea>BETWEEN</textarea>
я не думаю, что это будет работать с<textarea>I found myself BETWEEN</textarea>
тем, где простоBETWEEN
выделено.
Ответ №4:
Было бы лучше?
<!DOCTYPE html>
<html>
<head>
<title>Document</title>
<style>
.danger {
color: red;
font: bold;
}
</style>
</head>
<body>
<p class="air-section"> blah blah blah This is dangerous blah blah
</p>
</body>
<script>
const section = document.querySelector('.air-section');
let str = section.innerHTML;
let newstr = str.replace(/This is dangerous/gi, '<span class="air-text-entry air-entry danger" style="display: block; margin: 5px;">This is dangerous</span>');
section.innerHTML = newstr;
</script>
</html>