Я создаю страницу, где пользователь сможет вставить несколько текстовых областей.Каждая из текстовых областей должна иметь базовый текстовый редактор (жирный и курсив).
Для этого я выбрал CKEditor .Проблема в том, что каждый раз, когда я создаю текстовую область, я должен сделать это:
ClassicEditor.create(document.querySelector(newCKEditorId), {
toolbar: [ 'bold', 'italic' ],
});
Чтобы создать несколько экземпляров этого, я использую Vue.js , например так:
<div v-for="(linha, index) in lista_de_pessoas">
<div :id="index" v-html="linha.componentes"></div>
</div>
Я использую v-html, потому что html-тег компонента будет взят из БД (да, я знаю, что это не очень хорошая идея).
Потому что мне нуженdfferent id для каждого компонента textarea в списке компонентов, я создал следующий метод:
getNumeroDeLinhas() {
return $('#lista_de_ementas .lista .row').length + 1;
},
initNewCKEditor(id_componente) {
ClassicEditor.create(document.querySelector(newCKEditorId), {
toolbar: [ 'bold', 'italic' ],
});
},
addComponentes() {
let newCKEditorId = 'ementa_' + this.getNumeroDeLinhas();
let linha = {
componentes:
'<div class="row" style="margin: 0px;">' +
'<div class="input-field col s12">' +
'<textarea name="content" id="'+ newCKEditorId + '">ementa_' + newCKEditorId + '_da_disciplina</textarea>' +
'<label for="ementa_' + newCKEditorId + '" class="active">Ementa ' + newCKEditorId +'</label>' +
'</div>' +
'</div>',
id: '#' + newCKEditorId
}
this.lista_de_ementas.push(linha);
}
И он возвращает мне это:
Uncaught (in promise) TypeError: Cannot convert undefined or null to object
at Function.keys (<anonymous>)
at qa.init (datacontroller.js:253)
at qa.<anonymous> (observablemixin.js:254)
at qa.fire (emittermixin.js:207)
at qa.<computed> [as init] (observablemixin.js:258)
at classiceditor.js:206
Поскольку элемент HTML не был отображенеще когда initNewCKEditor() был вызван.Чтобы попытаться это исправить, я добавил watch:{} в мое vue:
watch:{
lista_de_ementas:function(val){
this.initNewCKEditor(val[val.length -1].id);
}
Но он все равно возвращает мне ту же ошибку.
Мой вопрос: почему элементеще не отображается, даже когда была вызвана функция часов и как я могу это исправить?Есть ли другой способ сделать это?
Вот мой полный код:
HTML
<!DOCTYPE html>
<html>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script src="https://unpkg.com/vue-ckeditor2"></script>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
<script src="https://code.jquery.com/jquery-3.4.0.js"></script>
<body class="grey lighten-4">
<main style="padding:20px">
<!-- Lista de Ementas -->
<div id="lista_de_ementas">
<div class="white z-depth-1 u-default">
<h5 style="margin-bottom: 20px">Ementa da diciplina</h5>
<div class="lista">
<div v-for="item in lista_de_ementas">
<div v-html="item.componentes"></div>
</div>
</div>
<!-- Btn Adicionar -->
<button class="btn" v-on:click="addComponentes()"><i class="material-icons left">add</i>Adicionar</button>
</div>
</div>
<!-- Lista de Ementas -->
</main>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/js/materialize.min.js"></script>
<script src="https://cdn.ckeditor.com/ckeditor5/12.1.0/classic/ckeditor.js"></script>
<!-- COMPONENTES VUE -->
<script src="js/lista_de_ementas.js"></script>
lista_de_emendas.js
new Vue({
el: '#lista_de_ementas',
data: {
lista_de_ementas: []
},
watch:{
lista_de_ementas:function(val){
this.initNewCKEditor(val[val.length -1].id);
}
},
methods: {
getNumeroDeLinhas() {
return $('#lista_de_ementas .lista .row').length + 1;
},
initNewCKEditor(newCKEditorId) {
ClassicEditor.create(document.querySelector(newCKEditorId), {
toolbar: [ 'bold', 'italic' ],
});
},
addComponentes() {
let newCKEditorId = 'ementa_' + this.getNumeroDeLinhas();
let linha = {
componentes:
'<div class="row" style="margin: 0px;">' +
'<div class="input-field col s12">' +
'<textarea name="content" id="'+ newCKEditorId + '">ementa_' + newCKEditorId + '_da_disciplina</textarea>' +
'<label for="ementa_' + newCKEditorId + '" class="active">Ementa ' + newCKEditorId +'</label>' +
'</div>' +
'</div>',
id: '#' + newCKEditorId
}
this.lista_de_ementas.push(linha);
}
},
mounted() {
this.addComponentes()
}
});