تعرض خطوط الخطوط في محرر Tinymce خطًا إضافيًا على المعاينة ، وليس في التعليمات البرمجية

StackOverflow https://stackoverflow.com/questions/1969335

  •  21-09-2019
  •  | 
  •  

سؤال

أنا أستخدم المكون الإضافي لـ BBCode مع Tinymce وأرى أن فواصل الخط لا تظهر نفس الشيء بين المعاينة ورمز HTML.

لدي الأسطر التالية في نافذة المحرر:

This is line one

This is line three

السطر الثاني فارغ. عندما أشاهد هذا في HTML أحصل على ما يلي.

This is line one
This is line three

بدون خط فارغ إضافي.

tinyMCE.init({
    mode : "textareas",
    theme : "advanced",
    plugins : "bbcode",
    entity_encoding : "raw",
    remove_linebreaks : false,
    force_p_newlines : false,
    force_br_newlines : true,
    forced_root_block : ''
});

ماذا ينقصني؟

هل كانت مفيدة؟

المحلول

لقد اختبرته على صفحة الاختبار الخاصة بي مع Firefox 3.5.7 و Google Chrome 4.0.223.11.

لغة البرمجة:

tinyMCE.init({
  theme : "advanced",
  mode : "textareas",
  plugins : "bbcode",
  content_css : "bbcode.css",
  entity_encoding : "raw",
  add_unload_trigger : false,
  remove_linebreaks : false,
  apply_source_formatting : false
});

يمكن إزالة المسافة بين الفقرات باستخدام CSS بسيط ("BBCode.css") مثل هذا:

p {margin:0; padding: 0;}

نصائح أخرى

ربما تحتاج إلى استخدم ال nl2br() وظيفة لإخراج رمز HTML الخاص بك:

NL2BR - إدراج انقطاع خط HTML أمام جميع الخطوط الجديدة في سلسلة

بدلاً من ذلك ، يمكنك تعيين ملف force_p_newlines خيار ل true.

لقد اختبرته وأنت على حق ولكن السلوك يحدث فقط مع المكون الإضافي لـ BBCode. أعتقد ذلك باستخدام preformatted : true الخيار في tinyMCE.init يجب أن تكون قادرًا على حل مشكلتك.

إليك طريقة أخرى للقيام بذلك. ما عليك سوى تغيير سلوك Enter and Shift+Enter.

ed.onKeyPress.add(
    function (ed, evt) {
            if(evt.shiftKey && evt.keyCode == 13) {
                tinyMCE.execCommand('mceInsertContent', false, '<br><br>');
                tinymce.dom.Event.cancel(evt);
                //alert('shift enter key');
                return;
            } 
            if(evt.keyCode == 13 && !evt.shiftKey) {
                tinyMCE.execCommand('mceInsertContent', false, '<br>');
                tinymce.dom.Event.cancel(evt);
                //alert('enter key');
                return;             
            }                
        });

من تكوين Tinymce ، يمكنك اختيار Beavhior من الخطوط الجديدة

http://www.tinymce.com/wiki.php/configuration3x:force_br_newlines

ستجبر Tinymce عناصر BR على الخطوط الجديدة بدلاً من إدراج الفقرات

tinyMCE.init({
    ...
    force_br_newlines : true,
    force_p_newlines : false,
    forced_root_block : '' // Needed for 3.x
});

لمعلوماتك - على الرغم من الدراما السياسية من حولها كونها "الشيء الصحيح الذي يجب القيام به" للاستخدام <p> العلامات ولا تستخدم <br> العلامات ، كانت المشكلة بالنسبة لي أنني كنت أرسل محتوى في رسائل البريد الإلكتروني - وفي رسائل البريد الإلكتروني ، ليس لدي سيطرة على CSS على <p> العلامات (ما لم أرغب في إضافة CSS inline إلى كل علامة). لذلك <p> كانت العلامات تضيف ما ظهر مثل تباعد الخط المزدوج للمستخدمين النهائيين. لقد أضفت CSS على موقعي لإزالة التباعد وبدا المحتوى جيدًا هناك.

لذلك بعد استخدام <br> العلامات ، ثم الذهاب إلى "الطريق الصحيح" مع <p>, ، سأعود إلى الاستخدام <br> العلامات مرة أخرى ...

حاول إضافة كائن التكوين

valid_elements: 'br'  //and any others that you want

لدي نفس المشكلة. هذا هو الحل لمكوّن الإضافات BBCode:

forced_root_block : false,
remove_redundant_brs : false,
valid_elements: "br",
verify_html : false,

مع Tinymce 4 لدي نفس المشكلة ولكن بالنسبة لي أعمل هذا التكوين

mode: 'exact',
inline: true, 
add_unload_trigger: false, 
schema:"html5", 
invalid_elements: "span", 
extended_valid_elements : "span[!class]", 
paste_remove_styles: true,
forced_root_block : false, 
verify_html : false,
cleanup : true
مرخصة بموجب: CC-BY-SA مع الإسناد
لا تنتمي إلى StackOverflow
scroll top