أدخل HTML في nosedit wysiwyg

Question

كيف يمكنني إدراج نص/رمز في مكان المؤشرات في Div التي تم إنشاؤها بواسطة NocedIt؟

لقد حاولت قراءة الوثائق وإنشاء المكون الإضافي الخاص بي ، لكنني أريده أن يعمل بدون شريط الأدوات (نافذة مشروط)

Answer 1

هذا هو الحل السريع واختباره في Firefox فقط. لكنه يعمل ويجب أن يكون قابلاً للتكيف مع IE والمتصفحات الأخرى.

function insertAtCursor(editor, value){
    var editor = nicEditors.findEditor(editor);
    var range = editor.getRng();                    
    var editorField = editor.selElm();
    editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
                            value +
                            editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
}

Answer 2

كانت الطريقة التي حللت بها هذا لجعل مثيل noscedit div قابلاً للتسرب ، باستخدام jQuery UI ؛ ولكن لجعل جميع العناصر داخل DIV قابلة للتجول.

$('div.nicEdit-main').droppable({
    activeClass: 'dropReady',
    hoverClass: 'dropPending',
    drop: function(event,ui) {
    $(this).find('.cursor').removeClass('cursor');
  },
  over: function(event, ui) {
    if($(this).find('.cursor').length == 0) {
      var insertEl = $('<span class="cursor"/>').append($(ui.draggable).attr('value'));
      $(this).append(insertEl);
    }
  },
  out: function(event, ui) {
    $(this).find('.cursor').remove();
  },
  greedy: true
});

$('div.nicEdit-main').find('*').droppable({
  activeClass: 'dropReady',
  hoverClass: 'dropPending',
  drop: function(event,ui) {
    $(this).find('.cursor').removeClass('cursor');
  },
  over: function(event, ui) {
    var insertEl = $('<span class="cursor"/>').append($(ui.draggable).attr('value'));
    $(this).append(insertEl);
  },
  out: function(event, ui) {
    $(this).find('.cursor').remove();
  },
  greedy: true
});

ثم اجعل الكود أو النص القابل للسحب:

$('.field').draggable({
                appendTo: '.content', //This is just a higher level DOM element
                revert: true,
                cursor: 'pointer',
                zIndex: 1500, // Make sure draggable drags above everything else
                containment: 'DOM',
                helper: 'clone' //Clone it while dragging (keep original intact)
            });            

ثم تأكد أخيرًا من تعيين قيمة العنصر القابل للسحب على ما تريد إدراجه ، و/أو تعديل الكود أدناه لإدراج العنصر (span) من اختيارك.

        $sHTML .= "<div class='field' value='{{".$config[0]."}}'>".$config[1]."</div>";

Answer 3

أدخل البرنامج المساعد HTML

لا أعرف ما إذا كان هذا سيساعد أم لا ، ولكن هذا هو البرنامج المساعد الذي أنشأته لإدخال HTML في موضع المؤشر. يفتح الزر جزء محتوى وأنا فقط لصق في HTML الذي أريده وأرسله. يعمل لدي!

var nicMyhtmlOptions = {
    buttons : {
      'html' : {name : 'Insert Html', type : 'nicMyhtmlButton'}
    },iconFiles : {'html' : '/nicedit/html_add.gif'}

};

var nicMyhtmlButton=nicEditorAdvancedButton.extend({
      addPane: function () {
      this.addForm({
        '': { type: 'title', txt: 'Insert Html' },
        'code' : {type : 'content', 'value' : '', style : {width: '340px', height : '200px'}}
      });
    },

    submit : function(e) {
      var mycode = this.inputs['code'].value;
      this.removePane();
      this.ne.nicCommand('insertHTML', mycode );
    }

});
nicEditors.registerPlugin(nicPlugin,nicMyhtmlOptions);

لقد استخدمت أيقونة HTML_ADD من أيقونات الحرير, ، تم لصقها على 18 × 18 شفافة وحفظها GIF في نفس المجلد مثل niceditoricons.gif.

Answer 4

يعمل بالنسبة لي عندما أستخدم:

function neInsertHTML(value){
    $('.nicEdit-main').focus(); // Without focus it wont work!
    // Inserts into first instance, you can replace it by nicEditors.findEditor('ID');
    myNicEditor.nicInstances[0].nicCommand('InsertHTML', value); 
}

Answer 5

استجابة لـ RETO: يعمل هذا الرمز ، كنت بحاجة فقط لإضافة بعض الإصلاح لأنه لا يدرج أي شيء إذا كانت منطقة النص فارغة. كما أنه يضيف نصًا عاديًا فقط. هنا هو الرمز إذا احتاجه أي شخص:

if(editorField.nodeValue==null){
  editor.setContent('<strong>Your content</strong>');
}else{        
  editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) +
                          '<strong>Your content</strong>' +
                          editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
  editor.setContent(editorField.nodeValue);
}

Answer 6

تغيير follwoing في ملف nicedit.js

تم تحديثه من Reto Aebersold ANS سوف يتعامل مع استثناء العقدة الفارغة ، إذا كانت منطقة النص فارغة

update: function (A) {
    (this.options.command);
        if (this.options.command == 'InsertBookmark') {
            var editor = nicEditors.findEditor("cpMain_area2");
            var range = editor.getRng();
            var editorField = editor.selElm();
            //  alert(editorField.content);
            if (editorField.nodeValue == null) {
                //  editorField.setContent('"' + A + '"')
                var oldStr = A.replace("<<", "").replace(">>", "");
                editorField.setContent("&lt;&lt;" + oldStr + "&gt;&gt;");
            }
            else {
                // alert('Not Null');
                // alert(editorField.nodeValue + '  ' + A);
                editorField.nodeValue = editorField.nodeValue.substring(0, range.startOffset) + A + editorField.nodeValue.substring(range.endOffset, editorField.nodeValue.length);
            }
        }
        else {
            // alert(A);  
            /* END HERE */
            this.ne.nicCommand(this.options.command, A);
        }

Answer 7

تعمل هذه الوظيفة عندما تكون notedit textarea فارغة أو المؤشر في الخط الفارغ أو الجديد.

function addToCursorPosition(textareaId,value) {
            var editor = nicEditors.findEditor(textareaId);
            var range = editor.getRng();
            var editorField = editor.selElm();
            var start = range.startOffset;
            var end = range.endOffset;
            if (editorField.nodeValue != null) {
                editorField.nodeValue = editorField.nodeValue.substring(0, start) +
                            value +
                            editorField.nodeValue.substring(end, editorField.nodeValue.length);
            }
            else {
                var content = nicEditors.findEditor(textareaId).getContent().split("<br>");
                var linesCount = 0;
                var before = "";
                var after = "";
                for (var i = 0; i < content.length; i++) {
                    if (linesCount < start) {
                        before += content[i] + "<br>";
                    }
                    else {
                        after += content[i] + "<br>";
                    }
                    linesCount++;
                    if (content[i]!="") {
                        linesCount++;
                    }
                }
                nicEditors.findEditor(textareaId).setContent(before + value + after);
            }

        }