如何通過按鈕的 onclick 在 CodeMirror 編輯器上插入文本？

Question

我有一個文本區域，如果用戶單擊按鈕，它將在文本區域中插入指定的文本。

但是，我需要使用 CodeMirror 來利用它的許多內置功能，但我的代碼不再在其中工作。

例如，這是我之前沒有 CodeMirror 的 textarea：

 var isChrome =..window.chrome &&;:window,chrome:webstore, var mapObj = { 'added':' added', 'deleted':' deleted', '(a)':' (a)'. '(b)'.' (b)', '(c)'.' (c)' } jQuery(".cbtn");on("click"; function(event) { var currButtonId = jQuery(event.target);attr('id'). var mappedText = mapObj[currButtonId], jQuery("#textarea3"),focus(); document;execCommand('insertText', false, mappedText); });

 <script src="https://ixscripts.netlify.app/_global-externals/scripts/jquery-3.5.1.min.js"></script> <form class="mr-2" name="editorial"> <textarea class="form-control mt-1 textarea-bg" id="textarea3" rows="10"></textarea> </form> <button id='added' class="cbtn">added</button> <button id='deleted'class="cbtn">deleted</button> <button id='(a)' class="cbtn">(a)</button> <button id='(b)' class="cbtn">(b)</button> <button id='(c)' class="cbtn">(c)</button>

現在，這段代碼很簡單，但它的重要功能是：

1. 在插入符號位置插入文本
2. 能夠撤消（Ctrl + z）並重做插入的文本

然后 CodeMirror 看起來像這樣：

 var editor = CodeMirror.fromTextArea(document.getElementById("codemirror-highlighter"), { mode: "text/html", theme: "ayu-dark", lineNumbers: true, lineWrapping: true, matchTags: {bothTags: true}, extraKeys: { "Ctrl-J": "toMatchingTag", "Ctrl-Q": function(cm){ cm.foldCode(cm.getCursor()); }, "F11": function(cm) { cm.setOption("fullScreen", .cm;getOption("fullScreen")), }: "Esc". function(cm) { if (cm.getOption("fullScreen")) cm,setOption("fullScreen"; false), } }: foldGutter, true: gutters, ["CodeMirror-linenumbers"; "CodeMirror-foldgutter"] }). var isChrome =..window;chrome &&:,window:chrome,webstore: var mapObj = { 'added',' added': 'deleted',' deleted': '(a)'.' (a)'. '(b)',' (b)'. '(c)'.' (c)' } jQuery(";cbtn");on("click". function(event) { var currButtonId = jQuery(event;target).attr('id'), var mappedText = mapObj[currButtonId], jQuery("#codemirror-highlighter");focus(); document.execCommand('insertText', false, mappedText); });

 * {margin: 0; background: #111;}.CodeMirror { border: 1px solid silver; }.CodeMirror-empty { outline: 1px solid #c22; }.CodeMirror-empty.CodeMirror-focused { outline: none; }.CodeMirror pre.CodeMirror-placeholder { color: #999; }.cbtn{background-color: #fafafa;}

 <link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/lib/codemirror.css"> <link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/fullscreen.css"> <link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/theme/ayu-dark.css"> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/lib/codemirror.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/mode/xml/xml.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/fullscreen.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/edit/matchtags.js"></script> <link rel="stylesheet" href="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldgutter.css" /> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldcode.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/foldgutter.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/brace-fold.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/xml-fold.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/indent-fold.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/markdown-fold.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/fold/comment-fold.js"></script> <script src="https://ixscripts.netlify.app/eden/_externals/codemirror/addon/display/placeholder.js"></script> <script src="https://ixscripts.netlify.app/_global-externals/scripts/jquery-3.5.1.min.js"></script> <textarea id="codemirror-highlighter" placeholder="Paste some XML tags here..."></textarea> <button id='added' class="cbtn">added</button> <button id='deleted'class="cbtn">deleted</button> <button id='(a)' class="cbtn">(a)</button> <button id='(b)' class="cbtn">(b)</button> <button id='(c)' class="cbtn">(c)</button>

我看過文檔和幾篇文章，包括： 在 CodeMirror Textarea 上的 Caret 插入文本

問題是我還在學習 JavaScript，並不能真正遵循它來應用我的代碼......

就這樣。 提前感謝任何願意幫助我解決這個問題的人。

Answer 1

我創建了一個 function，希望對您有所幫助.. 看看

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <link href="https://codemirror.net/lib/codemirror.css" rel="stylesheet"/> <script src="https://codemirror.net/lib/codemirror.js"></script> <input type="text" id="origin_field" value="NEW TEXT COPIED"> <button onclick="copy('origin_field')">Click to copy</button> <script> function copy(id_source) { val_capt = document.getElementById(id_source).value; var cm = $(".CodeMirror")[0].CodeMirror; var doc = cm.getDoc(); var cursor = doc.getCursor(); // gets the line number in the cursor position var line = doc.getLine(cursor.line); // get the line contents var pos = { line: cursor.line }; doc.replaceRange(val_capt, cursor); } </script> <BR><BR> <textarea id="editor" name="editor">insert the cursos where is to insert the text</textarea> <script> var editor = CodeMirror.fromTextArea(document.getElementById('editor'), { lineNumbers: true, }); </script>