मैं एक ब्लॉग प्रोजेक्ट में रिच टेक्स्ट एडिटर के रूप में उपयोग करने के लिए क्विल की स्थापना कर रहा हूं। मेरे पास संपादक सही ढंग से काम कर रहा है और उपयोगकर्ता पोस्ट को mongoDB में संग्रहीत कर सकता है, उन्हें बाद में पुनर्प्राप्त कर सकता है, और उन्हें प्रदर्शित कर सकता है।

ऐसा करने के लिए मेरे कोड में डेल्टा को क्विल से पकड़ना, इसे स्ट्रिंग करना, फिर इसे यूआरआई के रूप में एन्कोड करना शामिल है। यह वही है जो मेरे डीबी में संग्रहीत है। ये क्रियाएं मेरे पोस्ट बटन पर क्लिक करने पर होती हैं लेकिन फॉर्म जमा करने से पहले। मैं अन्य उद्देश्यों के लिए सादा पाठ भी संग्रहीत कर रहा हूं।

function parseQuill(){
document.getElementById("body").value = encodeURIComponent(JSON.stringify(quill.getContents()));
document.getElementById("bodyText").value = quill.getText();
document.getElementById("compose-form").submit();

}

ब्लॉग पोस्ट तक पहुँचने पर, डेल्टा को डीबी से पुनः प्राप्त किया जाता है और देखने के लिए वापस html में परिवर्तित किया जाता है। यह बैकएंड पर होता है। डीकोडेड एचटीएमएल मेरे पोस्ट पेज पर भेजा जाता है और ईजे के साथ प्रस्तुत किया जाता है।

app.get("/posts/:postID", function(req, res){
User.findOne({name: "user1"}, function(err, foundUser){
let posts = foundUser.posts;
posts.forEach(function(post){
if (post._id == req.params.postID){
    const decoded = JSON.parse(decodeURIComponent(post.content));
    const converter = new QuillDeltaToHtmlConverter(decoded.ops);
    const decodedHTML = converter.convert();
    console.log(decodedHTML);
    post.decoded_HTML = decodedHTML;
    res.render("post", {post: post});
  }
 }
 );
 });
 });

यह क्विल ऑफ़र करने वाले सभी डिफ़ॉल्ट प्रारूपों के लिए काम करता है।

मैं क्विल गाइड "चर्मपत्र के साथ क्लोनिंग माध्यम" और कस्टम डिवाइडर ब्लॉट को लागू करने का प्रयास किया है। मेरा कोड वहां जो कुछ हो रहा है उसके समान है jQuery से कम। मेरा क्षैतिज नियम पाठ संपादक में प्रकट होता है और अपेक्षानुसार व्यवहार करता है।

डेल्टा को सहेजते समय और इसे वापस html में बदलने का प्रयास करते समय मेरी समस्या उत्पन्न होती है। एक क्षैतिज नियम वाली पोस्ट के लिए delta.ops कुछ इस तरह दिखता है।

 {"ops":[
 {"insert":"Some text followed by a horizontal rule.\n"},
 {"insert":{"divider":true}},
 {"insert":"Some more text.\n"}]}"

क्षैतिज नियम का प्रतिनिधित्व करने वाली रेखा "विभक्त" का दूसरा सम्मिलन कथन है: सत्य। इसे एक यूआरआई घटक के रूप में संग्रहीत करने और इसे वापस एचटीएमएल में डीकोड करने के बाद, एचटीएमएल इस तरह दिखता है:

<p>Some text followed by a horizontal rule.<br/>Some more text.</p>

क्षैतिज नियम टैग कहीं नहीं पाया जाता है। मैं इसे सही ढंग से व्याख्या करने और दिखाने के लिए कैसे प्राप्त कर सकता हूं?

अगर मैं अपने पोस्ट पेज पर एक छिपे हुए क्विल संपादक कंटेनर का उत्पादन करता हूं, तो मैं शुद्ध डेल्टा में लोड कर सकता हूं और एचटीएमएल को quill.root.innerHTML से निकाल सकता हूं। यह एचटीएमएल उत्पन्न करता है जिसमें एचआर होता है। मैं उम्मीद कर रहा था कि यदि संभव हो तो छिपे हुए क्विल कंटेनर को डालने से बचें।

1
ralpers 29 अप्रैल 2021, 17:10
कृपया यहां देखें: github.com/quilljs/quill/issues/1866
 – 
Alamin
29 अप्रैल 2021, 17:23
आपको क्या लगता है कि उस कड़ी में क्या प्रासंगिक है? यह चर्चा उन लोगों के बारे में है जो एक अवधि प्राप्त करने का प्रयास कर रहे हैं जो इनलाइन वर्ग को संपादक में भी दिखाने के लिए विस्तारित करता है। मैं BlockEmbed वर्ग का विस्तार कर रहा हूं और मेरा क्षैतिज नियम ठीक वैसा ही व्यवहार करता है जैसा संपादक में अपेक्षित है। डेल्टा को वापस HTML में कनवर्ट करते समय समस्या उत्पन्न होती है। मैंने डिवाइडरब्लॉट.टैगनाम को वापस करने के लिए प्रारूप() को बदलने की कोशिश की, लेकिन यह अभी भी डेल्टा में "विभक्त: सत्य" के रूप में दिखाई देता है।
 – 
ralpers
30 अप्रैल 2021, 14:24

1 उत्तर

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

मैं एक बेवकूफ था और html डिकोडिंग प्रक्रिया में एक महत्वपूर्ण कदम से चूक गया। इस प्रश्न को इस उत्तर के साथ छोड़ दें (जो समस्या का समाधान करता है) यदि कोई अन्य व्यक्ति मानसिक अयोग्यता के क्षण में ठोकर खाता है।

मैं अपने डेल्टा को बदलने के लिए पैकेज quill-delta-to-html का उपयोग कर रहा था प्रयोग करने योग्य html पर वापस। बेशक यह पैकेज कस्टम ब्लॉट्स को पंजीकृत करना नहीं जानता है। कनवर्ट करने से पहले आपको इसे मैन्युअल रूप से करना होगा।

const dividerOp = {
      insert: {
        type: "divider",
        value: true
      },
      attributes: {
        renderAsBlock: true
      }
    }
    converter.renderCustomWith(function(dividerOp){
      if (dividerOp.insert.type === "divider"){
        return "<hr>"
      } else {
        console.log("custom blot convert error");
      }
    });
    const decodedHTML = converter.convert();

क्विल अंत में सब कुछ ठीक कर रहा था। मेरे पास स्मृति में चूक थी और मैं भूल गया था कि मैं अपने डेल्टा को एचटीएमएल रूपांतरणों को संभालने के लिए बाहरी पैकेज पर निर्भर था। इस कस्टमब्लॉट रेंडर को जोड़ने से समस्या हल हो जाती है।

0
ralpers 1 मई 2021, 14:41