Existe-t-il un moyen de coller des images à l'intérieur de l'éditeur de texte riche, pour mon site Wiki Enterprise?

Question

J'ai une collection de sites de publication à l'aide du modèle d'entreprise Wiki.Actuellement, si j'ai un document Word contenant du texte et des images, et je copie tout le contenu du document Word, après cela, je colle le contenu dans l'éditeur de texte riche, seul le texte sera copié (sans les images).

Donc, ma question s'il y a un moyen de laisser coller les images dans l'éditeur de texte riche?

merci

Answer 1

Vous ne pouvez pas coller directement les images dans les pages SharePoint, les images ne peuvent pas être rendues telles que HTML ne peuvent donc pas être collées.

Vous devez télécharger les images en SharePoint, puis insérez-la sur les pages / endroits que vous souhaitez.

ou vous pouvez essayer un outil 3ème parti pour cela.

http://www.kwizcom.com/sharepoint-And-ONS / SharePoint-Clipboard-Manager / Vue d'ensemble /

ou

http://www.telerik.com/products/aspnet-ajax/Editor.aspx

Answer 2

Vous pouvez profiter de la capacité des navigateurs à coller des images codées de base64 en contenu modifiable. Mais puisque Editeur de SharePoint Strips Base64 Images Vous pouvez utiliser un truc sale pour stocker des contenus d'image sur des espaces réservés cachés qui ne sont pas dépouillés, puis rendant des images de ces espaces réservés à la page charge.

Il y a des avantages (il fait le travail, il est facile à utiliser - ajoutez simplement le script à votre site) et des inconvénients (de grandes images en ligne, de coller des images un par un, des événements JS supplémentaires, etc.) de cette solution.

Essayez donc avec ce JavaScript (insérez-le sous le code d'intégration, dans la page Master, etc.) et il ne devrait que travailler (testé dans SharePoint 2013 Enterprise Wiki, mais il devrait fonctionner avec n'importe quel formulaire d'édition de contenu SharePoint avec certains modifications de code). Notez que vous devez définir d'abord l'ID de votre éditeur de Div.

    <script type='text/javascript'>

    //set your editable content (editor) client id here:
    var editorClientId = "ctl00_PlaceHolderMain_PageContent_RichHtmlField_displayContent"

    _spBodyOnLoadFunctionNames.push("renderImages()");

    function getImagesByAlt(alt) {
        var allImages = document.getElementsByTagName("img");
        var images = [];
        for (var i = 0, max = allImages.length; i < max; ++i)
            if (allImages[i].alt == alt)
                images.push(allImages[i]);
        return images;
    }
    //if page is in edit mode, delay for other scripts to finish first
    function renderImages() {
        if (window.location.href.indexOf("ControlMode=Edit") > -1)
            setTimeout(function () { renderImagesStart(); }, 1500);
        else
            renderImagesStart();
    }
    //apply data-imgrefs attribute to stripped image contents
    function renderImagesStart() {
        var allSpans = document.getElementsByClassName("imgrefs");
        for (var i = 0, max = allSpans.length; i < max; i++) {
            var img = getImagesByAlt(allSpans[i].title)[0];
            if (img != null)
                img.src = "data:image/gif;base64," + allSpans[i].getAttribute("data-imgref");
        }
    }
    //chrome paste handler
    var IMAGE_MIME_REGEX = /^image\/(p?jpeg|gif|png)$/i;
    var loadImage = function (file) {
        var reader = new FileReader();
        reader.onload = function (e) {
            var img = document.createElement('img');
            img.src = e.target.result;

            var range = window.getSelection().getRangeAt(0);
            range.deleteContents();
            range.insertNode(img);
        };
        reader.readAsDataURL(file);
    };
    document.onpaste = function (e) {
        var items = e.clipboardData.items;
        for (var i = 0; i < items.length; i++) {
            if (IMAGE_MIME_REGEX.test(items[i].type)) {
                loadImage(items[i].getAsFile());
                return;
            }
        }
    }
    //if page is in edit mode apply onblur (leave editor) event to hide images base64 content to spans
    //class name, data- and alt attributes are used because sharepoint doesn't strip them
    if (window.location.href.indexOf("ControlMode=Edit") > -1)
        document.getElementById(editorClientId).onblur = function () {
            var editor = document.getElementById(editorClientId);
            var childNodes = editor.childNodes;
            //remove spans
            for (var i = childNodes.length - 1; i >= 0; i--) {
                var childNode = childNodes[i];
                if (childNode.className == 'imgrefs')
                    childNode.parentNode.removeChild(childNode);
            }
            var imgs = editor.getElementsByTagName("img");
            var id = 0;
            //for each base64 image: hide its content to span data-imgref attribute and append span to editor
            for (var i = 0, max = imgs.length; i < max; i++) {
                var img = imgs[i];
                if (img.src.indexOf("data:image") > -1) {
                    id += 1;
                    img.alt = id & 0xffff;
                    img.alt = 'img' + img.alt;
                    var src = img.src.replace('data:image/gif;base64,', '').replace('data:image/png;base64,', '').replace('data:image/jpg;base64,', '');
                    var span = document.createElement("span");
                    span.className = "imgrefs";
                    span.title = img.alt;
                    span.setAttribute("data-imgref", src);
                    span.innerText = '';
                    editor.appendChild(span);
                }
            }
        }

</script>

En outre, il peut être mis à niveau pour stocker des images de base64 collées sous forme de fichiers sur serveur à l'aide du service Web SharePoint CopyintOitems directement dans JavaScript (sur Coller ou quelques événements de préaution), puis remplacez la base64 avec le nom de fichier image sur le serveur.

Answer 3

J'ai trouvé que je pouvais utiliser l'éditeur de liste de la carte de discussion au moins insertion-> à partir d'un ordinateur et utilisez les outils de l'éditeur pour manipuler les images intégrées dans le texte.Ensuite, vous pouvez couper et coller de là dans les champs de texte riches de la liste SharePoint normaux.Vous n'avez même pas besoin de sauvegarder le message de la liste de discussion que vous avez utilisé pour éditer, annulez simplement le message après avoir coupé et coller de celui-ci.Si vous avez besoin de plus de manipulation d'image sophistiquée (comme la rotation d'une image), si vous pouvez envoyer un courrier électronique à votre liste de la carte de discussion, vous pouvez simplement utiliser votre éditeur de messagerie Outlook pour composer le texte et les images et l'envoyer à cette liste de discussion.