Я близок к желаемой цели после того, как нашел код, который мне «почти» нужен из другого вопроса
Проблема, однако, заключается в том, что цель их кода отличается от моей. Они пытаются использовать его для чата.
Вот демонстрация исходного кода, который мне нужно понять и настроить
Я создал простой инструмент, который уже используется мной и моей командой, но есть ограничение textarea. Я хотел преобразовать textarea в contenteditable, чтобы я мог добавить стиль к тексту, который вставляю, используя скрипт вставки onclick.
Мой сценарий onclick выглядит следующим образом:
<script>
var isChrome = !!window.chrome && !!window.chrome.webstore;
var mapObj = {
'n100': 'The 2020 amendment, effective May 12, 2020, ',
'n101': 'twice ',
'n102': 'in ',
'n103': 'the ',
'n104': 'sentence',
'n105': 'first sentence',
'n106': 'second sentence',
'n107': 'third sentence',
'n108': 'fourth sentence',
'n109': 'last sentence',
'n110': 'paragraph',
'n111': 'first paragraph',
'n112': 'second paragraph',
'n113': 'third paragraph',
'n114': 'fourth paragraph',
'n115': 'last paragraph',
'n116': 'at the beginning',
'n117': 'at the end',
'n118': 'added the (*) designation',
'n119': 'designation',
'n120': 'added “”',
'n121': 'and “”',
'n122': 'through ',
'n123': 'substituted “” for “”',
'n124': '“” for “”',
'n125': 'deleted “” following “”',
'n126': '“” following “”',
'n127': 'deleted “” preceding “”',
'n128': '“” preceding “”',
'n129': 'deleted former (*), which read: “”',
'n130': 'which formerly read: “”',
'n131': 'which read: “”',
'n132': 'redesignated former (*) as (*)',
'n133': 'redesignated former (*) and (*) as (*) and (*)',
'n134': 'redesignated former (*) through (*) as (*) through (*)',
'n135': 'in the concluding language',
'n136': 'in the concluding language of ',
'n137': 'in the introductory language',
'n138': 'in the introductory language of ',
'n139': 'rewrote (*)',
'n140': 'rewrote the section.',
'n141': 'rewrote (*), which formerly read: “”',
'n142': 'renumbered this section, which formerly appeared as § xxx, and',
'n143': 'and made a related change.',
'n144': 'and made related changes.',
'n145': 'and made a stylistic change.',
'n146': 'and made stylistic changes.',
'n147': 'and made related and stylistic changes.',
'n148': 'added ',
'n148': 'added ',
'n149': 'deleted ',
'n150': 'and ',
'n151': 'in ',
'n152': 'the ',
'n153': 'of ',
'n190': '—',
'n191': '§'
}
jQuery(".cbtn1000, .cbtn1").on("click", function(event) {
var currButtonId = jQuery(event.target).attr('id');
var mappedText = mapObj[currButtonId];
jQuery("#codearea1").focus();
document.execCommand('insertText', false, mappedText);
});
</script>
Его цель заключается в том, что если я щелкну соответствующий button с соответствующим id, он вставит этот текст в мой textarea (ранее, что теперь является спорным)
Теперь, поскольку я знаю, что можно поместить стиль, например highlight и bold, как мне на самом деле вставить его onclick в contenteditable box?
Я не могу сделать это с моим текущим скриптом, потому что если я вставлю теги типа <b>Hello</b>, он будет вставлен именно так. Я хотел бы, чтобы теги <b></b> стилизовали текст.
Может быть, возможно иметь 2 "пути" (не могу найти слово, что я имею в виду, где я могу поместить текст в конец -конец), чтобы описать мой onclick сценарий, где, если я добавлю <b></b> или <mark></mark> где-нибудь в сценарии и Hi в другой его части, так как они разделены, теперь будут применяться теги стиля.
Вот демонстрационная версия , где я объединил полученный код и мой код, который вставляет текст по клику. Обратите внимание, что я не очень хорошо разбираюсь в JavaScript, даже в основах, я просто пытаюсь проанализировать его, и иногда он работает.
Как мне создать скрипт только для одной кнопки, например:
'n101': 'twice ',
n101 - это id twice - текст, который мне нужно вставить
Если бы я мог просто увидеть сценарий, где его можно стилизовать Я просто проанализирую и скопирую процесс, который будет использоваться на других кнопках.