CodeMirror et color pickup

Version imprimable

J'essaye d'intégrer in color picker dans codemirror.

J'ai trouvé ce script http://enjalot.github.io/Inlet/ how to do.

Merci.

Ce code ci dessous fonctionne parfaitement .

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
    <script src="lib/CodeMirror3/lib/codemirror.js"></script>
    <script src="lib/CodeMirror3/mode/javascript/javascript.js"></script>
    <script src="inlet.js"></script>
      <div id='editor'></div>
      <script>
        var editor = CodeMirror(document.getElementById("editor"),{
          //default code for example:
          value: '//Click on the hex value or number below:\n\nvar color = "#D1FFDB"\n\nvar theAnswer = 42;\n\nvar is = true;\n\n//Usage looks like:\n//var editor = CodeMirror(...);\n//Inlet(editor);\n\n//You can also use hsl colors, try replacing #D1FFDB with hsl(133,100%,91%)',
          lineNumbers: true,
        });
 
        editor.on("change", changeFunction)
        function changeFunction() {
          eval(editor.getValue());
        };
        changeFunction();
 
        var inlet = Inlet(editor);
      </script>

Si j'essaye ceci afin de pouvoir prendre dans un texarea la couleur ce ne fonctionne pas.

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
 
        <link rel="stylesheet" href="lib/CodeMirror3/lib/codemirror.css">
        <script src="lib/CodeMirror3/lib/codemirror.js"></script>
        <script src="lib/CodeMirror3/addon/selection/active-line.js"></script>
        <cript src="inlet.js"></script>
 
      <textarea style="display: none;" name="code" cols="5" rows="" id="code"><style>color:#3300db;</style></textarea>
      <script>
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
             styleActiveLine: true,
            lineNumbers: true,
            lineWrapping: true,
            viewportMargin: Infinity
        });
 
        editor.on("change", changeFunction)
        function changeFunction() {
          eval(editor.getValue());
        };
        changeFunction();
 
        var inlet = Inlet(editor);
      </script>

07/06/2016, 11h39
T4GAD4

Salut Oitsuki!

Pourquoi te compliques-tu la vie et veux faire ça dans un textarea?

De ce que je peux voir, ton code ne peut pas être colorisé car il manque une classe dans la génération de ton code HTML par le plugin. Voici le résultat en ajoutant cette classe: https://jsfiddle.net/ogyo1dvb/3/

Et tu as une erreur au niveau le ta fonction changeFunction.

Bon courage!:P
07/06/2016, 15h54
oitsuki

Merci,

En fait dans textarea j'ai un css qui est sélectionné par dropdown), voila pourquoi je fais ça, je vais regarder ce que tu as fait.

Bon cela ne fonctionne pas chez moi.
pour obtenir le color picker je suis obligé de mettre le script thistle car dans le débuggage inlet.js le demande, ce qui est bizarre car sans thistle, cela fonctionne.

Citation:

ReferenceError: thistle is not defined inlet.js:174:5
soit
// so that the "old color view" will initilize correctly
picker = new thistle.Picker("#ffffff")

Avec thistle, j'ai bien le color picker, mais dans mon textaera les couleurs ne change pas !
La j'ai ça.

Citation:

ReferenceError: Color is not defined
onClick/<() inlet.js:216
Picker.prototype.emit() thistle.js:286
Picker.prototype.setHue() thistle.js:219
Picker.prototype.setSaturation() thistle.js:225
Picker.prototype.setLightness() thistle.js:232
attachEvents/this.lKnob.onmousedown</</move() thistle.js:320

Ce qui donne ça dans mon code

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
  <div>
 
    <link rel="stylesheet" href="../ext/codemirror/lib/codemirror.css">
    <link rel="stylesheet" href="../ext/codemirror/src/inlet.css">
    <link rel="stylesheet" href="../ext/codemirror/theme/monokai.css">
 
    <style type="text/css">
      .CodeMirror {
        background: #f8f8f8;
        border-top: 1px solid #eee;
        border-bottom: 1px solid #eee;
        height: auto;
      }
      .CodeMirror-scroll {
        overflow-y: hidden;
        overflow-x: auto;
      }
    </style>
 
 
<?php
  echo HTML::hiddenField('directory_css', $directory_selected);
  echo HTML::hiddenField('filename', $filename_selected);
  echo HTML::textAreaField('code', $code, '', '', 'id="code"');
?>
 
    <script src="../ext/codemirror/lib/codemirror.js"></script>
    <script src="../ext/codemirror/mode/css/css.js"></script>
    <script src="../ext/codemirror/addon/selection/active-line.js"></script>
 
    <script src="../ext/codemirror/src/inlet.js"></script>
    <script src="../ext/codemirror/src/thistle/thistle.js"></script>
 
    <script>
      (function() {
        var editor = CodeMirror.fromTextArea(document.getElementById("code"), {
          styleActiveLine: true,
          lineNumbers: true,
          lineWrapping: true,
          viewportMargin: Infinity
        });
 
        document.getElementsByClassName('CodeMirror')[0].className += ' cm-s-monokai';
 
        editor.on("change", changeFunction)
 
        function changeFunction() {
          var value = editor.getValue();
        };
        changeFunction();
 
        var inlet = Inlet(editor);
 
      })();
 
    </script>