TinyMCE gulp कॉन्फ़िगरेशन

Question

मैं एक वेब एप्लिकेशन बना रहा हूं और मैं TinyMCE का उपयोग करना चाहता हूं। मैं गल्प और ब्राउज़र का उपयोग कर रहा हूँ। मैंने एनपीएम के माध्यम से TinyMCE डाउनलोड किया है और मुझे इसकी ऐप.जेएस फ़ाइल में इसकी आवश्यकता है और gulp कमांड चलाएं लेकिन मुझे यह त्रुटि Failed to load: root/js/themes/modern/theme.js मिली है। मुझे लगता है कि ऐसा इसलिए है क्योंकि TinyMCE को इसके फ़ोल्डर से अतिरिक्त फाइलों की आवश्यकता है। मेरा सवाल है कि उन फ़ाइलों को node_modules/tinymce फ़ोल्डर में खोजने के लिए TinyMCE को कॉन्फ़िगर कैसे करें।

Answer 1

यहां उत्तर इस बात पर निर्भर करता है कि आप अपने गुलप बिल्ड में फ़ाइलों को कैसे पैकेज कर रहे हैं। मैं अभी भी एक ही समस्या के माध्यम से अभी भी काम कर रहा हूं, लेकिन यहां एक युक्ति है जो मदद कर सकती है।

मेरे मामले में, मैं अपने बॉवर कॉन्फ़िगरेशन को पढ़ने के लिए main-bower-files प्लगइन का उपयोग कर रहा हूं और फिर बैवर के साथ स्थापित सभी मेरी निर्भरताओं से सभी मुख्य जेएस फ़ाइलों की एक स्ट्रीम वापस कर रहा हूं। यह इस तरह दिखता है:

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(mainBowerFiles('**/*.js') 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
}); 

दुर्भाग्य से, यह ऊपर TinyMCE फ़ाइलें, जो मेरे bower_components निर्देशिका में स्थापित कर रहे हैं के किसी भी लेने नहीं करता, क्योंकि 'TinyMCE' बोवर के माध्यम से स्थापित एक package.json फ़ाइल के साथ नहीं आता । मुझे लगता है कि ऐसा इसलिए है क्योंकि आपके पास TinyMCE के नियमित और jQuery संस्करणों का उपयोग करने के बीच विकल्प है, जो पैकेज में दोनों हैं।

मुझे ऊपर से अपना गुलप कार्य बदलना था ताकि वह TinyMCE स्रोत कोड को चुन सकें जो मैं चाहता हूं (jQuery संस्करण)। यही कारण है कि संस्करण इस तरह दिखता है:

var mainBowerFiles = require('main-bower-files'); 

gulp.task('vendor-src', function() { 
    return gulp.src(
    mainBowerFiles('**/*.js', { 
     "overrides": { 
      "tinymce": { 
      "main": ["tinymce.jquery.js", "plugins/**/*.js", "themes/**/*.js"] 
      } 
     }) 
    .pipe(uglify()) 
    .pipe(concat('main.min.js')) 
    .pipe(gulp.dest('dist/')) 
});  

कि TinyMCE के साथ जुड़े जे एस फ़ाइलों के सभी शामिल हैं और उन्हें "मुख्य बोवर फ़ाइलें" सूची में जोड़ देगा।

यह केवल आंशिक समाधान है क्योंकि आपको TinyMCE सीएसएस और फ़ॉन्ट फ़ाइलों को भी चुनना है। और फिर यदि आप निर्माण कर रहे हैं तो पूरी तरह से अलग है या आप मुख्य-बॉवर-फाइल प्लगइन का उपयोग नहीं कर रहे हैं, तो यह या तो मदद नहीं कर सकता है।

Answer 2

मेरे पास main-bower-files लेखक के साथ एक खुली समस्या थी, जिसने इसे TinyMCE के साथ एक साथ उपयोग को हतोत्साहित किया, शायद बड़ी संख्या में अतिरिक्त फ़ाइलों को शामिल किया जाना चाहिए (?)। गीथूब पर निम्नलिखित issue देखें।

मैं एक साधारण गल्प कार्य के माध्यम से tinymce फ़ोल्डर को अपने dist/ पर कॉपी कर रहा हूं। मैं शायद बोवर और विभिन्न पथों का उपयोग करता हूं, लेकिन आपको

gulp.task('bower-tinymce', function() { 

    //Copy resources from tinymce-dist that didn't make it in the bower-files 
    return gulp.src('src/main/resources/static/bower_components/tinymce-dist/**/*').pipe(gulp.dest('src/main/resources/static/dist/tinymce')); 

});