javascript - texto - tiny wysiwyg editor
¿Cómo usar los enlaces en Medium Editor? (4)
He encontrado cómo enlazar evento.
Aquí está la lista completa de eventos https://github.com/yabwe/medium-editor/blob/master/CUSTOM-EVENTS.md
Intenta cambiar tu código para
var editor = new MediumEditor(''.editable'')
.subscribe("editableClick", function(e){if (e.target.href) {window.open(e.target.href)}})
He estado probando el excelente editor mediano . El problema que he tenido es que parece que no puedo obtener enlaces para "trabajar".
En lo más simple, aquí hay algo de HTML / JS para usar para demostrar el problema:
HTML:
<html>
<head>
<script src="//cdn.jsdelivr.net/medium-editor/latest/js/medium-editor.min.js"></script>
<link rel="stylesheet" href="//cdn.jsdelivr.net/medium-editor/latest/css/medium-editor.min.css" type="text/css" media="screen" charset="utf-8">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/medium-editor/latest/css/themes/beagle.min.css" type="text/css">
</head>
<body>
<div class=''editable''>
Hello world. <a href="http://www.google.com">link</a>
</div>
</body>
</html>
Javascript:
var editor = new MediumEditor(''.editable'');
Este fiddle demuestra el problema (usando el código anterior).
- Si se desplaza sobre el enlace, aparece una ventana emergente.
- Si haces clic en el enlace, no pasa nada.
- Si hace clic en la ventana emergente, aparece un formulario donde puede editar el enlace.
Me parece que hacer clic en el enlace debería llevarme a cualquier lugar donde se encuentre la href del enlace. La única forma de usar el enlace es hacer clic con el botón derecho y abrirlo en una nueva pestaña o en una nueva ventana, lo que no quiero pedirle a mis usuarios.
Siento que debo faltar algo simple en la configuración (ya sea las Opciones de vista previa de anclaje o las Opciones de formulario de anclaje ). Desafortunadamente, no lo estoy viendo.
En mi aplicación real, no estoy usando jQuery , pero estoy usando angularjs . Si no existe una respuesta estrictamente del Editor Medio, puedo volver a usar JS básico o cualquier cosa que proporcione angularjs.
Lo que realmente quería cuando hice la pregunta era un comportamiento similar al de Google Docs cuando estaba en el modo "editar" ( como lo describió Nate Mielnik ). Abrí un issue y decidieron no implementarlo como parte del editor mediano central, pero señalaron que estarían felices de que alguien agregue esa funcionalidad como una extensión.
Entonces, decidí implementar esa funcionalidad como una extensión como se sugiere. Se puede encontrar como parte de MediumTools 1 . El proyecto aún se encuentra en etapas muy tempranas (p. Ej., No he hecho nada para que el estilo se vea mejor, o para usar mejores prácticas de clasificación, etc., pero aceptaremos con gusto las solicitudes de extracción).
Las agallas del código se ven así:
var ClassName = {
INNER: ''medium-editor-toolbar-anchor-preview-inner'',
INNER_CHANGE: ''medium-editor-toolbar-anchor-preview-inner-change'',
INNER_REMOVE: ''medium-editor-toolbar-anchor-preview-inner-remove''
}
var AnchorPreview = MediumEditor.extensions.anchorPreview;
GdocMediumAnchorPreview = MediumEditor.Extension.extend.call(
AnchorPreview, {
/** @override */
getTemplate: function () {
return ''<div class="medium-editor-toolbar-anchor-preview">'' +
'' <a class="'' + ClassName.INNER + ''"></a>'' +
'' -'' +
'' <a class="'' + ClassName.INNER_CHANGE + ''">Change</a>'' +
'' |'' +
'' <a class="'' + ClassName.INNER_REMOVE + ''">Remove</a>'' +
''</div>'';
},
/** @override */
createPreview: function () {
var el = this.document.createElement(''div'');
el.id = ''medium-editor-anchor-preview-'' + this.getEditorId();
el.className = ''medium-editor-anchor-preview'';
el.innerHTML = this.getTemplate();
var targetBlank =
this.getEditorOption(''targetBlank'') ||
this.getEditorOption(''gdocAnchorTargetBlank'');
if (targetBlank) {
el.querySelector(''.'' + ClassName.INNER).target = ''_blank'';
}
var changeEl = el.querySelector(''.'' + ClassName.INNER_CHANGE);
this.on(changeEl, ''click'', this.handleClick.bind(this));
var unlinkEl = el.querySelector(''.'' + ClassName.INNER_REMOVE);
this.on(unlinkEl, ''click'', this.handleUnlink.bind(this));
return el;
},
/** Unlink the currently active anchor. */
handleUnlink: function() {
var activeAnchor = this.activeAnchor;
if (activeAnchor) {
this.activeAnchor.outerHTML = this.activeAnchor.innerHTML;
this.hidePreview();
}
}
});
Como explicación, acabo de usar el tipo de herencia prototípica del medio para "subclase" la extensión original / incorporada de AnchorPreview . getTemplate método getTemplate para agregar los enlaces adicionales en el marcado. Luego tomé mucho de la implementación básica de getPreview , pero getPreview nuevas acciones a cada uno de los enlaces según corresponda. Finalmente, necesitaba tener una acción para "desvincular" el enlace cuando se hace clic en "Eliminar", así que agregué un método para eso. El método de desvinculación probablemente se podría hacer un poco mejor usando la magia de contenido (para asegurarse de que sea parte de la pila de deshacer del navegador), pero no dediqué tiempo a averiguarlo (aunque sería una buena Solicitud de extracción para Alguien interesado :-).
1 Actualmente, es la única parte, pero espero que eso cambie en algún momento. . .
Por lo tanto, el editor mediano se construye sobre el soporte de navegador integrado para elementos contenteditable . Cuando crea una instancia del editor de medios, agregará el atributo contenteditable=true a los elementos que lo proporcionó.
De forma predeterminada, dado que el texto ahora es editable (el atributo contenteditable hace que el navegador lo trate como texto WYSIWYG) el navegador ya no admite hacer clic en los enlaces para navegar. Por lo tanto, el editor de medios no impide que estos clics de enlace se produzcan, los navegadores lo hacen de forma inherente como parte de la edición del texto.
medium-editor ha incorporado extensiones para interactuar con enlaces:
- extensión de anclaje
- permite agregar / eliminar enlaces
- extensión de vista previa de anclaje
- muestra una información sobre herramientas al pasar el cursor sobre un enlace
- cuando se hace clic en la información sobre herramientas, permite editar el href del enlace a través de la extensión de anclaje
Creo que el objetivo subyacente del editor es el malentendido aquí. El editor permite editar texto, y para agregar / eliminar / actualizar enlaces, debe poder hacer clic en él sin navegar de forma automática. Esto es lo que yo considero como modo "editar".
Sin embargo, el html producido como resultado de la edición es html válido, y si toma ese html y lo coloca dentro de un elemento que NO tiene el atributo contenteditable=true , todo funcionará como se espera. Pienso en esto como ''modo de publicación''
Miro a editores como word o google docs, y usted ve un tipo de comportamiento similar en el que cuando edita el documento, los enlaces no solo se alejan al hacer clic en ellos, sino que realmente tiene que elegir navegar por ellos Acción después de hacer clic en el enlace. Sin embargo, en una versión ''publicada'' del documento, al hacer clic en el enlace se abrirá una ventana del navegador y se navegará allí.
Creo que esto hace una buena sugerencia como una mejora de la extensión existente de vista previa de anclaje. Quizás la información sobre herramientas que aparece cuando se desplaza el mouse sobre un enlace puede tener múltiples opciones (por ejemplo, Editar enlace | Eliminar enlace | Navegar a URL).
tldr;
Los enlaces no son navegables al hacer clic cuando se "edita" el texto en un navegador a través del soporte WYSIWYG incorporado (se puede contenteditable ). Cuando no esté en modo ''editar'', los enlaces funcionarán como se espera. Esto podría hacer una mejora agradable a la extensión de vista previa de anclaje de editor medio.
Trabajando con algunas ideas de @Valijon en los comentarios, pude hacerlo funcionar usando el siguiente código:
var iElement = angular.element(mediumEditorElement);
iElement.on(''click'', function(event) {
if (
event.target && event.target.tagName == ''A'' &&
event.target.href && !event.defaultPrevented) {
$window.open(event.target.href, ''_blank'');
}
});
Creo que la clave es que, aparentemente, el editor permite que el evento se propague a los elementos ancestrales, así que solo pude escuchar el clic en el elemento del editor de nivel superior.
Aquí, $window es el servicio de $window angular. Si no está usando angularjs , window y yo usé angular.element para facilitar el registro de oyentes de eventos, pero podría hacerlo de la manera antigua (o usando el marco de JS de su elección).