Sharepoint: editor de texto enriquecido (basado en cinta) en un elemento web en SharePoint 2013

Solución:

Sí, es posible, consulte este tutorial que demuestra cómo crear un Visual WebPart como editor de texto y también está conectado a Ribbon como afirma el autor, sin embargo, es para SharePoint 2010, pero estoy bastante seguro de que funcionará como está o con algunos cambios para SharePoint 2013 también.

Desarrollar un elemento web visual editable personalizado (WebPart)

Enlaces Útiles

https://stackoverflow.com/questions/15668474/webpart-with-custom-editorpart-does-not-save-data

https://stackoverflow.com/questions/3614989/how-can-i-extend-the-ootb-content-editor-web-part-in-sharepoint-2010

https://stackoverflow.com/questions/3771519/develop-a-custom-editable-visual-web-part-webpart-for-sharepoint-2010/3786142#

Editar

La publicación del blog es demasiado larga para agregarla aquí, pero la descripción está aquí,

Quería crear un elemento web para Sharepoint 2010 que permitiera a un editor agregar un bloque de html de forma libre a una página, pero envuelto en un contenedor HTML bien formateado de mi elección. También quería que el elemento web incluyera algunas propiedades personalizadas para permitir al usuario seleccionar algunas permutaciones para el contenedor HTML (color, posición, etc.). La clave fue que cuando el editor está modificando el contenido, quería poder usar los controles de cinta estándar en lugar de tener que conectar un control de texto enriquecido de terceros como Telerik RadEditor.

Entonces, asumí que podría simplemente tomar el elemento web del Editor de contenido (CEWP) integrado y extenderlo. Sin dados, ¡porque está sellado!

Así que terminé sacando Reflector y profundizando en el código CEWP, arrancando las tripas para hackear un nuevo webpart. El siguiente elemento web hace lo que me propuse hacer, y tal vez también sea una buena base para usted.

Mi solución completa para SharePoint 2013: editor de texto enriquecido basado en cintas de estilo. Hice esto hace algún tiempo, así que ciertamente tomé prestado un código de Google.

ASPX / ASCX:

<div id="editor">
    <div id="RTEDiv" tabindex="0"></div>
    <asp:HiddenField ID="RTEDivHidden" runat="server" />
    <div class="commands">
        <asp:Button ID="btnSubmit" Text="Submit" runat="server" CssClass="editorbtn" />
        <input type="button" value="Cancel" id="btnCancel" class="editorbtn" />
    </div>
</div>

Contenedor div simple, futuro div de texto enriquecido id="RTEDiv", campo oculto para publicar datos y dos botones simples.

JS:

(function ($) {
    // add SP13 rich text params to div
    $.fn.SPEditable = function () {
        return this.each(function () {
            $(this).addClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").attr("role", "textbox").attr("aria-haspopup", "true").attr("contentEditable", "true").attr("aria-autocomplete", "both").attr("aria-autocomplete", "both").attr("aria-multiline", "true");
        });
    };
    // remove SP13 rich text params from div
    $.fn.SPNonEditable = function () {
        return this.each(function () {
            $(this).removeClass("ms-rte-layoutszone-inner-editable ms-rtestate-write").removeAttr("role aria-haspopup contentEditable aria-autocomplete aria-multiline");
        });
    };
    // add event actions before existing ones
    $.fn.preBind = function (type, data, fn) {
        this.each(function () {
            var $this = $(this);

            $this.bind(type, data, fn);

            var currentBindings = $._data(this, "events")[type];
            if ($.isArray(currentBindings)) {
                currentBindings.unshift(currentBindings.pop());
            }
        });
        return this;
    };
})(jQuery);

preBind La función se utiliza para transferir datos de texto enriquecido a un campo oculto antes de enviarlo (uso a continuación). Entonces usa esto:

// Rich Edit start
// mark div as Ribbon enabled rich edit area
$("#RTEDiv").SPEditable();

// transfer data from rich edit div to hidden field
$("input[id$='btnSubmit']").preBind("click", function () {
    var rText = $("#RTEDiv").html();
    $("input[id$='RTEDivHidden']").val(rText);
});

Código detrás:

Y la parte principal. En codebehind tienes que hacer esto:

protected void Page_Load(object sender, EventArgs e)
{
    // tweak SPRibbon to show RichEdit
    SPRibbon current = SPRibbon.GetCurrent(this.Page);
    if (current != null)
    {
        current.MakeRTEContextualTabsAvailable(SPRibbon.RTEVisibilityContext);
        current.Visible = true;
        current.CommandUIVisible = true;
    }

    if (IsPostBack)
    {
        var body = RTEDivHidden.Value;
        if (!string.IsNullOrWhiteSpace(body))
        {
            // now you have pure HTML value of rich-text
        }
    }
}

Para escribir algo en div de texto enriquecido, use esto en JS:

$('#RTEDiv').html("<b>pure html text</b>");

Y el resultado final (perdón por muchas cosas rusas):

La parte de edición enriquecida de la cinta se desliza correctamente hacia abajo y hacia arriba, cuando establece la opción Eliminar el foco de la div de texto enriquecido.

¡Espero que esto ayude!

Es posible que también desee probar este pequeño complemento de jQuery

Le permite habilitar el editor Ribbon WYSIWYG mientras está en modo de edición.

Funciona simplemente así:
$("#myDiv").SPEditable();

Y el resultado podría verse así:

Y este es un ejemplo de la vida real donde esto puede ser realmente útil:

Actualización: ahora este complemento es compatible con SP 2013:

---

---

Utiliza Nuestro Buscador