Esta es la contestación más válida que encomtrarás dar, pero mírala detenidamente y analiza si es compatible a tu proyecto.
Solución:
Probé un ejemplo y eslint-plugin-vue informó que v-model no es compatible con p elementos. Consulte la regla del modelo v válido.
Al momento de escribir estas líneas, no parece que lo que desea sea compatible directamente con Vue. Presentaré dos soluciones genéricas:
Utilice eventos de entrada directamente en el elemento editable
content
Crea un componente editable reutilizable
Editable.vue
index.vue
Solución personalizada para su problema específico
Después de muchas iteraciones, descubrí que para su caso de uso era más fácil obtener una solución funcional al no utilizando un componente separado. Parece que contenteditable Los elementos son extremadamente complicados, especialmente cuando se representan en una lista. Descubrí que tenía que actualizar manualmente el innerText de cada p después de una remoción para que funcione correctamente. También descubrí que el uso de identificadores funcionaba, pero el uso de referencias no.
Probablemente haya una forma de obtener un enlace bidireccional completo entre el modelo y el contenido, pero creo que eso requeriría manipular la ubicación del cursor después de cada cambio.
Creo que se me ocurrió una solución aún más sencilla. Vea el fragmento a continuación:
Change me!
Explicación:
Puedes editar el lapso ya que he agregado la etiqueta contenteditable. Note que en input, Llamaré a la función handleInput, que establece el innerHtml del contenido en lo que haya insertado en el intervalo editable. Luego, para agregar el negrita funcionalidad, simplemente seleccione lo que desea que esté en negrita y haga clic en el botón en negrita.
¡Bonificación adicional! También funciona con cmd + b;)
¡Ojalá esto ayude a alguien!
Codificación feliz
Tenga en cuenta que traje bootstrap css para diseñar y vue a través de CDN para que funcione en el fragmento.
Puede utilizar el método de observación para crear contenido vinculante bidireccional Editable.
Vue.component('contenteditable',
template: ``,
props:
value:
type: String,
default: ''
,
,
data()
return
focusIn: false,
valueText: ''
,
computed:
localValue:
get: function()
return this.value
,
set: function(newValue)
this.$emit('update:value', newValue)
,
watch:
localValue(newVal)
if (!this.focusIn)
this.valueText = newVal
,
created()
this.valueText = this.value
,
methods:
update(e)
this.localValue = e.target.innerHTML
,
focus()
this.focusIn = true
,
blur()
this.focusIn = false
);
new Vue(
el: '#app',
data:
len: 4,
val: "Test",
content: [
"value": "Heading
"
,
"value": "paragraph 1"
,
"value": "paragraph 2"
,
"value": "paragraph 3"
,
"value": "paragraph 4
"
]
,
methods:
stylize: function(style, ui, value)
var inui = false;
var ivalue = null;
if (arguments[1])
inui = ui;
if (arguments[2])
ivalue = value;
document.execCommand(style, inui, ivalue);
,
createLink: function()
var link = prompt("Enter URL", "https://codepen.io");
document.execCommand('createLink', false, link);
,
deleteThisRow: function(index)
this.content.splice(index, 1);
if (this.content[index])
this.$refs.con[index].$el.innerHTML = this.content[index].value;
,
add: function()
++this.len;
this.content.push(
value: 'paragraph ' + this.len
);
,
);contentCalificaciones y comentarios
Agradecemos que quieras añadir valor a nuestra información contribuyendo tu experiencia en las interpretaciones.
¡Haz clic para puntuar esta entrada!(Votos: 2 Promedio: 4)Utiliza Nuestro Buscador