1. घर
  2. सवाल और जवाब
  3. tinymce "codeample" प्लगइन एचटीएमएल टैग निष्पादित करता है

tinymce "codeample" प्लगइन एचटीएमएल टैग निष्पादित करता है

2016-08-09 6 views
16

मैं अपने कस्टम पोर्टल में https://www.tinymce.com/docs/plugins/codesample/ का उल्लेख किया गया है जो tinymce के कोड नमूना प्लगइन का उपयोग कर रहा हूं।tinymce "codeample" प्लगइन एचटीएमएल टैग निष्पादित करता है

सब ठीक काम करता है, जब तक, मुझे डेटाबेस में संग्रहीत डेटा को "पुनः संपादित" करना होगा।

जब मैं संपादित करने के लिए जाना है, के भीतर

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

डेटाबेस में संग्रहीत सभी डेटा छीन और केवल

<pre><code>Text </code></pre>

जब से "उपकरण> स्रोत"

मैं कर रहा हूँ देखी के रूप में दिखाया गया है पहले से ही मेरे textarea में "htmlentities" का उपयोग कर: -

<textarea><?php echo htmlentities($content); ?></textarea>

यह अभी भी codesample प्लगइन द्वारा बनाए गए टैग के अंदर उपयोग किए गए सभी HTML टैग को स्ट्रिप्स करता है।

अक्सर पूछे जाने वाले प्रश्न: 1. पहली बार डेटा जोड़ने पर सब कुछ ठीक काम करता है। 2. समस्या तब होती है जब मैं पृष्ठ संपादित करने के लिए जाता हूं। टिनिमसे codesample प्लगइन से केवल HTML कोड स्ट्रिप्स करता है। "Css, python, php" आदि जैसे कोड नमूने का उपयोग करके जोड़े गए सभी कोड को संपादक में प्रदर्शित किया गया है।

स्रोत

2016-08-09 John Cargo

+1

है 'htmlentities' पाठ जो पहले से ही एचटीएमएल संस्थाओं के लिए बदल दिया गया है पर कोई प्रभाव नहीं पड़ेगा। आपकी समस्या शायद कहीं और है। – apokryfos

+1

डेटाबेस में कच्चा डेटा कैसा दिखता है? यह निर्धारित करने के लिए कि क्या यह HTML परिवर्तन परिवर्तन डेटा के सहेजने या पीछे हटने पर होता है। – Martin

+0

यह ठीक है, यह tinymce के "उपकरण> स्रोत कोड" में क्या है। –

उत्तर

3

ठीक है, अनुसंधान के बहुत सारे के बाद, मैंने पाया कि यह एक एन्कोडिंग मुद्दा है। प्रत्येक इकाई को प्रत्येक एन्कोड करने की आवश्यकता है: - <, > से &lt;, &gt;।

और &amp; करने के लिए & चरित्र <code> टैग के अंदर, इसका मतलब है &lt;<code></code> भीतर टैग &amp;lt; हो जाता है।

इस प्रकार, कोड नीचे की तरह: -

<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>

तरह

&lt;pre&gt;&lt;code&gt;&amp;lt;html&amp;gt; &amp;lt;p&amp;gt;Text&amp;lt;/p&amp;gt; &amp;lt;/html&amp;gt; &lt;/code&gt;&lt;/pre&gt;

तो सभी उपयोगकर्ताओं को समाधान पा रहे हैं के लिए होना चाहिए,। यह समाधान है।

याद रखें, &<code> &amp;lt; </code> टैग के अंदर केवल &amp; में परिवर्तित किया जाना चाहिए। सूचना&lt;<code> अंदर टैग &amp;lt;

चीयर्स

स्रोत

2016-08-19 14:17:36

5

टिनिमस में डेटा डालने का सही तरीका इसे प्रिंट करना या htmlentities का उपयोग करना भी नहीं होगा। बस html सामग्री init_instance_callback पर

<?php 
    $content = ''; // Fetch from database 
    print $content; 
?>

नोटिस समारोह प्रिंट जब मैं TinyMCE प्रारंभ करना चाहिए निम्नलिखित कोड

<div class="editor" id="editor"> 
</div> 
<script> 
    tinymce.init({ 
     selector: 'div.editor', 
     theme: 'inlite', 
     plugins: 'image table link paste contextmenu textpattern autolink', 
     insert_toolbar: 'quickimage quicktable', 
     selection_toolbar: 'bold italic | quicklink h1 h2 h3 blockquote', 
     inline: true, 
     paste_data_images: true, 
     automatic_uploads: true, 
     init_instance_callback : function(ed) { 
     // ed.setContent("<h1>Title</h1><p>Content...</p>"); 
     var xhttp = new XMLHttpRequest(); 
     xhttp.onreadystatechange = function() { 
      if (xhttp.readyState == 4 && xhttp.status == 200) { 
       ed.setContent(xhttp.responseText); 
      } 
     }; 
     xhttp.open("GET", "content.php", true); 
     xhttp.send(); 
     }, 
     content_css: [ 
     '//www.tinymce.com/css/codepen.min.css' 
     ] 
    }); 
</script>

और फ़ाइल content.php पर विचार करें। टिनिमस शुरू होने के बाद कहा जाता है कि यह कार्य है। अब संपादक के अंदर सीधे print का उपयोग करके, init_instance_callback के अंदर एक अजाक्स कॉल करें और इसे वहां प्रस्तुत करें। मैंने एक नमूना टिप्पणी लाइन में डाल दिया है ताकि आप इसके साथ मदद कर सकें। यह सुरक्षा सत्यापन का भी ख्याल रखेगा (यदि कोई हो तो कोई स्क्रिप्ट टैग निष्पादन नहीं)।

इसके अलावा एक ही समय डेटाबेस के लिए यह बचत करते हुए संपादक की सामग्री को प्राप्त करने के लिए

var content = tinyMCE.get('editor').getContent();

है और फिर आप डेटाबेस के लिए डेटा को बचाने के लिए एक ajax पोस्ट अनुरोध कर सकते हैं।

अब मैं AJAX का उपयोग क्यों कर रहा हूं महत्वपूर्ण है। मैंने कई अन्य तरीकों की कोशिश की जहां मैं इसे सीधे प्रिंट करने से दूर हो सकता था। लेकिन इससे सुरक्षा त्रुटियों का कारण बनता है क्योंकि संपादक प्रारंभ होने से पहले स्क्रिप्ट टैग चला सकते हैं।

मैंने इस उदाहरण में div का उपयोग किया लेकिन यह टेक्स्ट क्षेत्र के लिए भी वही होगा। इसके अलावा htmlentities का उपयोग न करें क्योंकि यह HTML सामग्री से बच जाएगा और आप tinymce में प्रस्तुत सामग्री देखना चाहते हैं, न कि बच निकले संस्करण।

स्रोत

2016-08-14 04:55:54 georoot

+0

मैंने पहले कोशिश की है, उदाहरण कॉलबैक, लेकिन मैं AJAX मोड में डेटा को सहेजने के बाद इसे आजमाएं। –

+0

यह कई पंक्तियों में होने वाली सामग्री के कारण 'अमान्य या अप्रत्याशित टोकन त्रुटि 'देता है - इससे कैसे बचें? –

+0

@ जॉन कार्गो आप कुछ स्निपेट पोस्ट कर सकते हैं ताकि मैं बेहतर मदद कर सकूं :) – georoot

0

उपयोग setContent समारोह सामग्री एक बार TinyMCE लोड किया जाता है जोड़ने के लिए:

setup: function (editor) { 
    editor.on('init', function() { 
    var theContent = '<pre><code>&lt;html&gt; &lt;p&gt;Text&lt;/p&gt; &lt;/html&gt; </code></pre>'; 
    this.setContent(theContent); 
    }); 
}

स्रोत: Tags Get Removed When Using Codesample Plugin with TinyMCE

स्रोत

2016-08-18 10:39:23

+0

सुनिश्चित नहीं है कि यह क्यों चिह्नित किया गया था, यह एक वैध दृष्टिकोण है :) – georoot

संबंधित मुद्दे

 संबंधित मुद्दे