Javascript: Obtenir de l'élément par le nom de classe ne fonctionne pas

Je suis en train de travailler sur l'éditeur de texte riche et bien fait jusqu'à maintenant. J'ai fait un distinct .js fichier afin de l'utiliser comme un plugin.

Maintenant, je veux utiliser ce plugin en lui donnant un nom de classe à travers .cshtml fichier.Mais il ne semble pas fonctionner, j'ai cherché pour les réponses et ils ont dit à l'aide de document.getElementsByClassName va résoudre mon problème.

S'il vous plaît aller à travers ce code et me dire ce qui s'est passé?

Éditeur de texte .js-

var richTextEditor = document.getElementsByClassName("text-editor");
    richTextEditor.contentDocument.designMode = 'ON';
    $('#strong').live('click', function () {
        richTextEditor.contentDocument.designMode = 'ON';
        richTextEditor.contentDocument.body.contentEditable = true;

        richTextEditor.contentDocument.execCommand('bold', false, null);
        richTextEditor.focus();
    });

cshtml fichier-

<script src="/js/Texteditor.js" type="text/javascript"></script>
<script src="/js/jquery.js" type="text/javascript"></script>
 <div  id="strong" class="command btn"><i class="icon-bold icon-black"></i></div>



    <iframe id="edtNoteCreate" class="text-editor"  name="DisplayNote" style="width:430px;height:150px;">@((Model.Note != null ? Model.Note : ""))</iframe>
Lire la documentation. getElementsByClassName retourne plus d'un élément.

OriginalL'auteur Manoz | 2013-03-21

  1. 7

    Suffit de prendre le premier élément de la correspondance des nœuds; c'est une NodeList mais peut être déréférencé comme un Tableau.

    var richTextEditor = document.getElementsByClassName("text-editor")[0];

    OriginalL'auteur Ja͢ck

  2. 3

    getElementsByClassName () retourne un tableau afin de les utiliser comme cette

     var richTextEditor = document.getElementsByClassName("text-editor");
    richTextEditor[0].contentDocument.designMode = 'ON';
    $('#strong').live('click', function () {
        richTextEditor[0].contentDocument.designMode = 'ON';
        richTextEditor[0].contentDocument.body.contentEditable = true;

        richTextEditor[0].contentDocument.execCommand('bold', false, null);
        richTextEditor[0].focus();
    });
    pourquoi répéter [0] ? donner [0] lors de la var est déclarée. 🙂
    k, Pourquoi elle retourne un tableau?
    document.getElementsByClassName .. Comme vous le voyez obtenir les ÉLÉMENTS non Élément par le nom de classe .. Si vous avez 5 éléments avec le même nom de classe puis il revient tous les cinq éléments avec l'indice de 0,1,2,3,4,... Si vous voulez obtenir un seul élément que vous devriez aller pour getElementById()
    Parce que c'est le nom de la classe. Vous avez peut-être donné le même nom de classe à de nombreux éléments dans votre code HTML. Même si vous avez donné le nom de la classe à un seul élément, utilisez la même que @PrasathK suggéré. et aussi live fonction de jQuery est obsolète. Vous devriez aller avec .on(). vérifiez la documentation de jQuery.
    Merci pour votre bonne explication .

    OriginalL'auteur Prasath K

  3. 1

    pourquoi ne pas vous utiliser les méthodes jquery??

    var richTextEditor = document.getElementsByClassName("text-editor");

instead try this:

var richTextEditor = $(".text-editor"); //again this is going to return more than  one object.

//so you can also try below code to manipulate in that.

var richTextEditor = $(".text-editor").first(); //for first element. similarly can use .last() or n-th child.
    Vous suggestion est pertinente, Mais je suis en utilisant beaucoup plus de execCommands pour cet éditeur, afin de donner à l'enfant de ne pas m'aider.

    OriginalL'auteur Sangeeta

  4. 0

    Que vous utilisez jQuery, pourquoi ne pas coller avec jQuery. 

      var richTextEditor = $('.text-editor').eq(0);

    et aussi live méthode de jQuery est obsolète, utilisez .on() à la place.

    OriginalL'auteur Mr_Green

  5. 0

    $(".éditeur de texte") renvoie objet HTMl.
    “le document.getElementsByClassName("éditeur de texte")” retourne un tableau d'objets.

    OriginalL'auteur zhicheng