Arka plan rengini değiştirirken CKEditor'daki mevcut öznitelikler ile mevcut yayının yeniden kullanılması

Question

Arka plan rengini değiştirirken, CKEditor seçili içeriği satır içi stilin ayarlandığı span öğesinde sarar.

Etkileşimli videolar oluşturmak için bir uygulamanız var: oynatmayı istediğiniz anlarda durdurmak mümkündür ve bu duraklamalarda, görüntüleyen kişi videonun önemli anlarına atlayabilir veya belirli sorulara yanıt olarak küçük sınavlara cevap verebilir. Eğer cevap yanlışsa, vb. Bu interaktif katmanı oynatıcının üzerinde oluşturmak için etkileşimli öğeleri oluşturmak için CKEditor'ı bazı özel eklentilerle kullanıyorum.

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play">My element</span>

data-player-control öz nitelik değeri sabit değildir

(bu eklenti belirtilebilir: eklentileri

Bir özel bir özellik data-player-control ile span elemanları oluşturmak için kullanılır) ve videonun sergisini kontrol etmek için kullanılır. ile,

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play"> 
 
    <span style="background-color:#FF0000">My element</span> 
 
</span>

Bu iki iç içe span elemanları:

editör eleman arka plan rengini değiştirmek için kullanılır

, bu sonuçların neler yeni span yılında öğesi metnini, sarar iki ayrı arka plan renkleri, istenmeyen.

Ne sonuçlanan satır içi stil mevcut span elemana uygulanacak olan ihtiyaç:

span[data-player-control] { 
 
    background-color: #3366FF; 
 
    color: #FFF; 
 
    border-radius: 10px; 
 
    padding: 10px; 
 
}

<span data-player-control="play" style="background-color:#FF0000"> 
 
    My element 
 
</span>

Bu nasıl sağlanabilir?

Verileri kullanmaFilter veya htmlFilter, CKEditor'ın satır içi örneğini girerken veya mevcut olduğunda giriş veya çıkış verilerinde yürütüldüğü için uygulanabilir bir çözüm değildir. Bir dönüşüm kullanmak, gerçek DOM'yi değil, öğeleri temsil etmek için basitleştirilmiş bir form kullandığı için bir çözüm değildir.

İçeriği düzenlerken kullanmak için herhangi bir geriçağırım işlevi var mı (bu nedenle DOM, gereksinimlerime göre değiştirebilir)?

Answer 1

Basit bir çözüm editör örneğinde change olayını dinlemek ve daha sonra DOM'yi event.editor.ui.contentsElement.$ içinde istediğiniz gibi değiştirmek.

Answer 2

Arka plan rengi eklemek için kullanılan özel stiller tanımını kullanmayı deneyebilirsiniz. colorButton_backStyle, editör yapılandırmasında ayarlanabilir.

bazı özel nitelikleri ile Span öğesi geçersiz kılmak için, kullanabilirsiniz:

config.colorButton_backStyle = { 
    element: 'span',   
    styles: { 'background-color': '#(color)' }, 
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } } 
}; 

Yani temelde geçersiz kılar background-renk uygulamasına ve bu tür özelliği olan bir yayılma olduğunda nitelik kullanılır - bu değiştirilir (ama sonra öznitelik de kaldırılır).Sen özelliklerini ekleyebilirsiniz:

yayılma geçersiz kılma da niteliği vardır Böylece

config.colorButton_backStyle = { 
    element: 'span', 
    attributes: { 'data-player-control': 'play' }, 
    styles: { 'background-color': '#(color)' }, 
    overrides: { 'element': 'span', attributes: { 'data-player-control': 'play' } } 
}; 

.

1. diğer öğelere arka plan rengini uygulamak, span da data-player-control özelliği bulunur: Bu çözüm sorun olmasıdır.
2. Arka plan rengini kaldırırken, tüm açıklık çıkarılır.

---

yukarıdaki çözüm ihtiyaçlarına uygun olmayabilir. Belki çözmeye çalıştığınız soruna farklı bir yaklaşım var mı?

Sorudan anladığım kadarıyla HTML'nin tanımlanmış bir yapıya sahip olmasını istersiniz (yalnızca çıkış verileri olarak değil), bu doğru mu? Hangi sorun, uygulamanıza/uygulamanıza neden olan iç içe geçmiş yayılmalara sahip yapıdır?