Dev Faq
9
votes

Codemirror fournit-il une API coupée, copier et coller?

de http://codemirror.net/doc/manual.html , je ne trouve que getrange () , annuler (), redo () etc., et je ne trouve pas la coupe (), copier () et coller API, Et plus quand j'essaie d'exécuter Editor.execcommand ("Cut") , je reçois l'erreur. Pourriez-vous m'aider? Merci!

1 commentaires

Stackoverflow.com/Questtions/13929371/...

3 Réponses :

4
votes

Il n'y a pas d'API de Codemirror pour couper / copier / coller, car les restrictions de sécurité du navigateur interdisent JavaScript de l'accès au presse-papiers par programmation. La pâte pourrait être utilisée pour voler des données privées et la coupe / copie peut être utilisée comme Plus vecteur d'attaque élaboré .

Les propulsements de code natif du navigateur les gestes les gestes qui accèdent au presse-papier (raccourcis clavier et éléments de menu contextuel), basés uniquement sur le texte actuellement sélectionné ou le champ de texte ciblé.

Ce siffir A un bon résumé des tentatives de contourner ces restrictions. L'approche de Codemirror est la première balle: il utilise une texture cachée pour que les gestes de presse-papiers utilisent des gestes de presse-papiers, mais cela ne prend toujours pas en charge les API programmatiques.

mais là est une solution de contournement partielle: utilisez un petit widget Flash (il s'agit de la 2ème balle dans le fil ci-dessus). Flash Détende les restrictions sur copie / Couper (mais pas coller) un peu. Il doit encore être déclenché par certains événement utilisateur , mais cela pourrait être quelque chose comme cliquer sur un bouton de votre UI HTML. Wrappers comme Zeroclipboard et Clippy facilite l'accès à ces capacités sans avoir besoin de connaître Flash. Vous auriez besoin d'écrire un petit code de colle pour tirer la chaîne appropriée de Codemirror lors de la copie, mais cela ne devrait pas être trop mauvais.

1 commentaires

Malheureusement, Codemiror ne semble pas bien interopérer avec Android / Chrome. Plus précisément, le robinet long à sélectionner ne fonctionne pas, il n'est donc pas possible de copier du texte.

13
votes

en utilisant presse-papier.js em> strong> a >, vous pouvez définir la fonction text () code> pour saisir la valeur du document interne du Codemirror.

Stocker une référence à la (

2 commentaires

Est-il possible de copier également le style MarkUp / CSS avec elle, de sorte que mon type de code de syntaxe de couleur sympa est préservé lors de la copie par exemple sur le mot?

@Jan qui serait une copie du format RTF (riche texte). Je ne suis pas sûr s'il le supporte pour le moment. Cet exemple utilise le presse-papiers.js et Codemirror, de sorte que le formatage utilisé par Codemirror est une couche supérieure à ce mécanisme de copie.

1
votes

Ajouter une DIV contentiable cachée à votre wrapper Editeur Textarea. Distenditable DIVS Respectez de nouvelles lignes et onglets, que nous avons besoin lors de la copie de code.

Voici mon Démo de Codepen p>

p> 

<!-- resources -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.35.0/codemirror.css" />
<script src="https://codemirror.net/lib/codemirror.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/codemirror/5.40.0/mode/javascript/javascript.min.js"></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>
<script src=""></script>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>


<div class="content">
  <!-- button to copy the editor -->
  <div class="copy-code" title="copy code">copy</div>
  <!-- add contenteditable div as it respects new lines when copying unlike textarea -->
  <div class="copy-this" contenteditable style="display: none"></div>
  <textarea class="editor" style="display: none;">// here is a comment
// here is another comment 
  </textarea>
</div>

1 commentaires

@nourza Merci, on dirait que l'API du presse-papiers a été bloquée ici. non capturé (en promesse) Domexception: l'API du presse-papiers a été bloquée en raison d'une stratégie de fonctionnalité appliquée au document actuel.

Articles qui pourrait vous intéresser :

L'événement useState + useEffect + de React Hooks donne un état périmé
Comment puis-je modifier la couleur du texte sélectionné?