तो मेरे पास एक कस्टम विजेट है जो एक कस्टम घटक प्रस्तुत करता है।

conversion.for('editingDowncast').elementToElement({
    model: 'modelName',
    view: (modelElement, viewWriter) => {
      const modelName = modelElement.getAttribute('modelName');
      const modelNameView = viewWriter.createContainerElement('span', {
        class: 'modelName',
        'data-modelName': modelName,
      });

      const reactWrapper = viewWriter.createUIElement(
        'span',
        {
          class: 'modelName__react-wrapper',
        },
        function (this, domDocument) {
          const domElement = this.toDomElement(domDocument);

          rendermodelName(modelName, domElement);

          return domElement;
        },
      );

      viewWriter.insert(
        viewWriter.createPositionAt(modelNameView, 0),
        reactWrapper,
      );

      return toWidgetEditable(modelNameView, viewWriter);
    },
  });

जहां rendermodelName एक साधारण इनपुट बॉक्स के साथ एक रिएक्ट घटक को वापस देगा back

return (
    <div>
      <input type="text" />
    </div>
  );

https://ckeditor.com/docs/ckeditor5/ latest/builds/guides/integration/frameworks/react.html

लेकिन समस्या यह है कि, जब भी मैं इनपुट के अंदर कुछ सामग्री जोड़ने की कोशिश करता हूं, तो फोकस फ़ील्ड से हट जाता है और स्वचालित रूप से आसपास के संपादक में चला जाता है। मैं क्या खो रहा हूँ। फोकसहैंडलर बनाने और उसमें modelNameView जोड़ने का प्रयास किया।

क्या मुझे नए createRawElement के साथ जाना चाहिए? मेरा वर्तमान CK5 20.0.0 है इसलिए मैं नहीं चाहता कि अब कोई भी ब्रेकिंग परिवर्तन आए।

संपादित करें: मैंने थोड़ा और शोध किया। ऐसा लगता है कि createRawElement शायद यहां काम न करें। मुझे लगता है कि इसका कोई आसान समाधान नहीं है। मैंने allowContentOf: '$block' के साथ प्रयास किया जिसने मुझे ध्यान केंद्रित करने नहीं दिया। लेकिन ये मान सामान्य सीके विजेट के लिए स्पष्ट रूप से हैं, प्रतिक्रिया घटक के लिए नहीं।

0
Asim K T 15 सितंबर 2020, 13:03

1 उत्तर

सबसे बढ़िया उत्तर

मुझे इसी तरह के मुद्दे का सामना करना पड़ा।

CKEditor उन सभी ईवेंट को रिएक्ट घटक पर ले जाएगा जिसे आपने विजेट पर होस्ट किया था।

चारों ओर का काम सीकेएडिटर को घटनाओं के प्रसार को रोकना है जो आपके डीओएम तत्व (domElement) से निकाल दिए जाते हैं जहां आपके रिएक्ट घटक की मेजबानी की जाती है।

यहाँ नमूना कोड है: https://github.com/ckeditor/ckeditor5- कोर/तुलना/प्रोटो/इनपुट-विजेट#diff-44ca1561ce575490eac0d660407d5144R239

आपको सभी आवश्यक घटनाओं को रोकना चाहिए। इसके अलावा आप किसी भी सामग्री को रिएक्ट घटक के इनपुट क्षेत्र के अंदर पेस्ट नहीं कर सकते। इसे CKEditor के clipboardInput इवेंट द्वारा भी सुना जाएगा।

1
Sitaramireddy 24 सितंबर 2020, 09:34