Я наконец-то нашел скрипт, который может добавить функции отмены / повтора к программам c вставленный текст, который отсюда .
Вот оригинальный скрипт демо
Вот оригинальный скрипт
<div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>// http://stackoverflow.com/a/9851769/529024
// Opera 8.0+
var isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0;
// Firefox 1.0+
var isFirefox = typeof InstallTrigger !== 'undefined';
// Safari 3.0+ "[object HTMLElementConstructor]"
var isSafari = Object.prototype.toString.call(window.HTMLElement).indexOf('Constructor') > 0 || (function(p) {
return p.toString() === "[object SafariRemoteNotification]";
})(!window['safari'] || safari.pushNotification);
// Internet Explorer 6-11
var isIE = /*@cc_on!@*/ false || !!document.documentMode;
// Edge 20+
var isEdge = !isIE && !!window.StyleMedia;
// Chrome 1+
var isChrome = !!window.chrome && !!window.chrome.webstore;
var position = 0;
// text to anser
var text = 'Inserted Text';
// Just for fun :)
if (isFirefox)
text = " __ Firefox __ ";
else if (isIE)
text = " __ IE __ ";
else if (isEdge)
text = " __ Edge __ ";
else if (isSafari)
text = " __ Safari __ ";
else if (isOpera)
text = " __ Opera __ ";
else if (isChrome)
text = " __ Chrome __ ";
/* Adding text on click based on browser */
jQuery(".addText").on("click", function() {
if (isFirefox) {
// Firefox
var val = jQuery(".textArea").val();
var firstText = val.substring(0, position);
var secondText = val.substring(position);
jQuery(".textArea").val(firstText + text + secondText);
} else {
jQuery(".textArea").focus();
var val = jQuery(".textArea").val();
jQuery(".textArea")[0].selectionStart = position;
jQuery(".textArea")[0].selectionEnd = position;
document.execCommand('insertText', false, text);
}
});
jQuery(".textArea").on("focusout", function(e) {
position = jQuery(this)[0].selectionStart;
});
textarea {
padding: 10px;
font-family: Calibri;
font-size: 18px;
line-height: 1.1;
resize: none;
}
.addText {
padding: 5px 15px;
transition: all 0.5s;
border: 1px solid black;
border-radius: 2px;
background-color: #169c16;
width: 70px;
margin: 10px 0;
color: white;
cursor: pointer;
}
.addText:hover {
background-color: #2776b9;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<textarea name='textArea' class='textArea' rows="7" cols="50">Suspendisse convallis, metus at laoreet congue, sapien dui ornare magna, a porttitor felis purus a ipsum. Morbi vulputate erat rhoncus, luctus neque ut, lacinia orci. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis
egestas. Fusce aliquam, nulla nec fringilla ultrices, ipsum lectus maximus nisl, ut laoreet purus lectus eget nisl. Duis blandit cursus nulla. Vestibulum consectetur, nunc non viverra condimentum, neque neque tincidunt diam, nec vestibulum neque nisi
ac sem. Integer aliquam a leo id laoreet. Mauris ultrices mauris lorem, eu hendrerit odio volutpat ut. Nam eget hendrerit metus.</textarea>
<div class='addText'>
Add Text
</div>
Теперь мне удалось настроить этот код мне нужен, и скрипт должен был выглядеть так:
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
var text = 'text1';
jQuery("#n101").on("click", function() {
if (isChrome) {
var val = jQuery("#codearea1").val();
} else {
jQuery("#codearea1").focus();
var val = jQuery("#codearea1").val();
document.execCommand('insertText', false, text);
}
});
</script>
Так вот, я не сделал CSS, поэтому позволил ему go. Что касается этого измененного скрипта, то, что делает, у меня есть текстовая область выше и кнопка, и когда я нажимаю на эту кнопку с id="n101", она вставит text1, и я также могу отменить / повторить его, используя ctrl + z / ctrl + y
Все идеально. Пока мне не придется дублировать эту технику примерно 80 раз, где каждая кнопка эквивалентна 80 различным текстам.
Я использую только этот скрипт, потому что мне действительно нужна функция отмены / возврата. Мне пришлось переделать весь мой код, чтобы использовать этот скрипт. Раньше у меня все 80 кнопок работали просто отлично, но без отмены / повтора.
Теперь, когда я пытаюсь создать хотя бы 2 кнопки, используя тот же скрипт, который я настроил, он вставляет только вторую .
Например: демо моего скрипта
У меня есть скрипт и кнопка, соответствующие n101, которые должны давать text1 в текстовой области при нажатии
У меня также есть n102, который должен выдавать text2 в текстовой области при нажатии
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
var text = 'text1';
jQuery("#n101").on("click", function() {
if (isChrome) {
var val = jQuery("#codearea1").val();
} else {
jQuery("#codearea1").focus();
var val = jQuery("#codearea1").val();
document.execCommand('insertText', false, text);
}
});
</script>
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
var text = 'text2';
jQuery("#n102").on("click", function() {
if (isChrome) {
var val = jQuery("#codearea1").val();
} else {
jQuery("#codearea1").focus();
var val = jQuery("#codearea1").val();
document.execCommand('insertText', false, text);
}
});
</script>
Однако, это не работает так, что я не уверен, почему , Я не так хорош с javascript, поэтому я не уверен, что означает каждое слово в сценарии. Однако иногда я могу заставить его работать, анализируя его. Для этого, хотя, я не могу. : (
В этой настройке происходит следующее:
Если у меня есть только скрипт и кнопка n101, она выдаст text1 идеально
Но если У меня есть оба или больше, я думаю, это только последний, то есть
Если я нажал n101 или n102, они дают только text2
PS Извините за мой плохой английский sh. Я надеюсь, что мой вопрос не такой размытый. Пожалуйста, мне нужна помощь. Я использую этот инструмент для своей работы, а именно для создания шаблонов. Каждая кнопка спасает меня и мою небольшую команду много времени и у нас около 80+ кнопок. Пожалуйста, помогите мне разобраться в этом коде и как я могу это исправить?