Insérer un lien dans l'élément contenteditable

Je suis en train de travailler sur un simple système de blog et je suis en utilisant contenteditable, de sorte que les utilisateurs peuvent mettre en forme le texte.

Jusqu'à présent, tout fonctionne comme un charme.

Prochaine chose que je veux, c'est que les utilisateurs peuvent ajouter un lien hypertexte dans le texte.

À l'utilisateur de sélectionner une partie du texte et cliquez sur le bouton lien. Après cela, une popup s'ouvre, où les utilisateurs doivent entrer l'adresse du lien.

Lorsque l'utilisateur clique sur le bouton "accepter" je tiens à ajouter le lien vers le texte sélectionné dans le contenteditable.

Comment puis-je mettre en œuvre cette fonctionnalité, car je n'ai aucune idée de comment faire cela?

Mon site: http://82.170.147.49/blog/3/alpha-release

jsFiddle de mon site: http://jsfiddle.net/qhN9j/

source d'informationauteur PeeHaa

  1. 7

    Comme alfred dit il y a déjà bien développés éditeurs, en particulier pour les fonctions de base. Vous pouvez restreindre à utiliser aussi peu ou autant de fonctionnalités, comme vous le souhaitez.

    La partie la plus difficile dans le développement à partir de zéro, c'est que tous les navigateurs agir un peu différemment. La suite devrait vous faire bouger dans la bonne direction dans la plupart des navigateurs autres qu'IE:

    var selected = document.getSelection();
document.execCommand("insertHTML",false,"<a href='"+href+"'>"+selected+"</a>");
  2. 2

    Montage, C'est pas possible c'est à dire dans Execcommand, parce que nous ne pouvons pas insérer des citations dans 'href', nous devons le faire en javascript avec la gamme :

    //EN DE LA DIV DANS UNE IFRAME

    //Get the frame
var iframe = document.getElementById('myframe');

//Selection object in the frame
theSelection = iframe.contentWindow.getSelection();

//position of the selection to insert
theRange = theSelection.getRangeAt(0);

//get content inside the original selection (and delete content in)
var fragment = theRange.extractContents();

//Create a new link in frame
var newLink = iframe.contentWindow.document.createElement('a');

//Create a text element with the fragment to put in the link
var theText = document.createTextNode(fragment.textContent);

//URL 
theLink.href = '#';

//Title
theLink.title = 'title';

//Attribute 'onclick'
theLink.setAttribute('onclick', thelink);

//Target
theLink.target = '_blank';

//Add the text in the link
theLink.appendChild(theText);

//Insert the link at the range
theRange.insertNode(newLink);

    //DIV SANS CADRES

    //Selection object in the window
theSelection = window.getSelection();

//begin of the selection to insert
theRange = theSelection.getRangeAt(0);

//get content inside the original selection (and delete content in)
var fragment = theRange.extractContents();

//Create a new link in the document
var newLink = document.createElement('a');

//Create a text element with the fragment to put in the link
var theText = document.createTextNode(fragment.textContent);

//URL 
theLink.href = '#';

//Title
theLink.title = 'title';

//Attribute 'onclick'
theLink.setAttribute('onclick', thelink);

//Target
theLink.target = '_blank';

//Add the text in the link
theLink.appendChild(theText);

//Insert the link at the range
theRange.insertNode(newLink);
  3. 0

    Je voudrais faire de cette façon:

    1. Créer un lien avec un (peut-être unique) initiale faux href attribut de l'identifier.
    2. Extraction de l'élément à l'aide de document.querySelector('a[href=<unique-href>]').
    3. Vous avez maintenant une référence à l'élément et pouvez en faire ce que vous s'il vous plaît.

    L'avantage de ceci est que vous n'avez pas à travailler avec Selection à tous.