¿Hay alguna manera de pegar imágenes dentro del rico editor de texto, para mi sitio de Wiki Enterprise?

Question

Tengo una colección de sitios de publicación utilizando la plantilla de Wiki Enterprise.Actualmente, si tengo un documento de Word que contiene texto e imágenes, y copo todo el contenido de la palabra documento, después de eso, pegue el contenido dentro del editor de texto enriquecido, solo el texto se copiará (sin las imágenes).

¿Entonces mi pregunta si hay una manera de permitir pegar las imágenes dentro del rico editor de texto?

gracias

Answer 1

No puede pegar las imágenes en las páginas de SharePoint directamente, las imágenes no se pueden representar como HTML, por lo que no se puede pegar.

Tienes que subir las imágenes en SharePoint, luego insértelo en las páginas / lugares que desee.

o puede probar la herramienta de terceros para esto.

http://www.kwizcom.com/sharepoint-Add-ONS / SharePoint-Portapero-Gerente / Descripción general /

o

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

Answer 2

Puede aprovechar la capacidad de los navegadores para pegar imágenes codificadas BASE64 en contenido editable. Pero desde que SharePoint's Editor Strips Base64 se puede usar un truco sucio para almacenar contenidos de la imagen a los marcadores de posición ocultos que no se eliminan y luego vuelven a hacer imágenes de estos marcadores de posición en la carga de la página.

Hay profesionales (hace el trabajo, es fácil de usar, simplemente agregue el script a su sitio) y los contras (imágenes grandes en línea, pegando las imágenes uno por uno, eventos de JS adicionales, etc.) de esta solución.

Así que intente con este javascript (insértelo como código de incruste, en la página maestra, etc.) y debe simplemente trabajar (probado en SharePoint 2013 Enterprise Wiki, pero debería funcionar con cualquier formulario de edición de contenido de SharePoint con algunos ajustes de código). Tenga en cuenta que primero debe establecer su ID del editor 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>

Además, se puede actualizar para almacenar imágenes de base 64 pegadas como archivos en el servidor utilizando el servicio web de SharePoint copyintoitems directamente en JavaScript (en Pegado o en un evento previamente guardado) y luego reemplazando BASE64 con nombre de archivo en el servidor.

Answer 3

Descubrí que podría usar el editor de la lista de la Junta de Discusión para al menos insertar-> desde la computadora y usar las herramientas del editor para manipular las imágenes incrustadas en el texto.Luego, puede cortar y pegar desde allí en los campos de texto enriquecidos en el elemento de la lista de SharePoint Normal.Ni siquiera tiene que guardar la publicación de la lista de discusión que usó para editar, simplemente cancele la publicación después de cortarla y pegarla.Si necesita una manipulación de imágenes más sofisticada (como rotar una imagen), si puede enviar un correo electrónico a su lista de tableros de discusión, puede simplemente usar su editor de correo electrónico de Outlook para componer el texto y las imágenes y envíelo a esa lista de tableros de discusión.