Добавить HTML-тег в Codemirror и расположить курсор по центру

Скрипт — http://liveweave.com/kzBlq3

Я пытаюсь добавить пользовательские теги html в CodeMirror и сфокусировать курсор в центре этих тегов.

Вот пример того, как это можно сделать для текстовой области.

// Mirror Codemirror Code to Textarea
$(".code").val( editor.getValue() ).on('keyup change', function() {
  editor.setValue( $(this).val() );
});

// Add center code
$(".bold").click(function() {
  // For a regular textarea & center cursor
    var start = $('.code').get(0).selectionStart;
    $('.code').val($('.code').val().substring(0, start) + "<strong></strong>" + $('.code').val().substring($('.code').get(0).selectionEnd));
    $('.code').get(0).selectionStart = $('.code').get(0).selectionEnd = start + 8;
    $('.code').focus();
    return false;
});

Линии и местоположения всегда будут разными, поэтому я должен сначала захватить его местоположение, прежде чем добавлять и перемещать его в сторону добавленных символов, как я сделал с демонстрацией текстового поля.

Однако я не хочу использовать пустое текстовое поле. Я хочу использовать Codemirror.

Я могу добавить тег html без проблем, но у меня возникают проблемы с получением местоположения курсора внутри добавленного тега.

editor.replaceRange("<strong></strong>", editor.getCursor());

javascript jquery codemirror cursor-position
person Michael Schwartz    schedule 17.09.2014    source источник

Ответы (1)


arrow_upward
4
arrow_downward

Добавьте следующий код, чтобы переместить курсор в центр тега. Также я обновил ваш код. Пожалуйста, используйте ссылку ниже для доступа к нему.

http://liveweave.com/LLq9GS

  $(".bold").click(function() {
    // For codemirror & center cursor
    editor.replaceRange("<strong></strong>", editor.getCursor());
   editor.focus();
    var str="</strong>";
    var mynum=str.length;
    var start_cursor = editor.getCursor();  //I need to get the cursor position
    console.log(start_cursor);  //Cursor position 
    var cursorLine = start_cursor.line;
    var cursorCh = start_cursor.ch;

    //Code to move cursor back [x] amount of spaces. [x] is the data-val value.
    editor.setCursor({line: cursorLine , ch : cursorCh -mynum });
person Praveen Kavuri    schedule 17.09.2014