Làm cách nào để bạn đặt tiêu điểm của phần tử văn bản TinyMCE?

Question

Tôi đang sử dụng TinyMCE cho văn bản trên một trang nhưng nó không hoạt động tốt theo thứ tự tabbing của các phần tử khác.

tôi có thể sử dụng đoạn mã sau để chụp khi tôi tab ra khỏi các yếu tố đầu tiên:

$('#title').live('keypress', function (e) { 
    if(e.keyCode == 9) { 
     alert('tabbed out'); 
    } 
}); 

Làm thế nào tôi có thể thiết lập focus cho một trình soạn thảo TinyMCE?

Answer 1

Cuối cùng tìm thấy một câu trả lời ... sử dụng lệnh:

tinymce.execCommand('mceFocus',false,'id_of_textarea'); 

Đối với mục đích của tôi, 'id_of_texterea' là "mô tả", tức là

<textarea id="description" ... ></textarea> 

Trong phần tử biểu mẫu trước văn bản của tôi, tôi đã thêm execCommand ở trên vào eleme Hành động "onblur" của nt.

Answer 2

này phải vượt qua tập trung vào textarea TinyMCE:

$("#id_of_tinyMCE_area").focus(); 

Answer 3

Tập trung cũng làm việc như thế này:

tinyMCE.get('id_of_textarea').focus() 

Kiểm tra các plugin tabfocus, đó là làm chính xác những gì bạn muốn:

http://tinymce.moxiecode.com/tryit/tab_focus.php

Answer 4

Nếu bạn đang sử dụng TinyMCE với JQuery. Sau đây sẽ hoạt động

$("#id_of_textarea").tinymce().focus(); 

Bạn chỉ có thể thực hiện việc này sau khi trình chỉnh sửa đã khởi tạo và bạn có thể cần phải chờ một trong các sự kiện khởi tạo của nó.

Answer 5

Điều gì thực sự hoạt động là đặt tùy chọn trong configfile (hoặc tệp jquery) Tùy chọn này cho phép bạn tự động lấy nét một bản sao trình chỉnh sửa. Giá trị của tùy chọn này phải là một id trình soạn thảo. Id mẫu trình chỉnh sửa là id cho văn bản gốc hoặc <div> phần tử đã được thay thế.

Ví dụ về việc sử dụng các tùy chọn auto_focus:

tinyMCE.init({ 
    //... 
    auto_focus : "elm1" 
}); 

Answer 6

Tôi biết đây là một bài cũ, nhưng chỉ để thêm đầu vào của tôi về việc có trình biên tập mở và tập trung không làm việc. Những gì tôi thấy rằng làm việc cho tôi là thế này:

tinyMCE.activeEditor.focus(); 

tôi phải thiết lập này trong một sự kiện window.setTimeout vì làm thế nào tôi đã sử dụng đối tượng JS và như vậy. Hi vọng điêu nay co ich.

Answer 7

Dường như đối với TinyMCE 4, một vài trong số các giải pháp này không còn hoạt động nữa.

// Không có vẻ để làm việc trên TinyMCE 4

tinymce.execCommand('mceFocus',false,'id_of_textarea'); 

// Không làm việc

$("id_of_textarea").tinymce().focus(); 

tinyMCE.activeEditor.focus(); 

gì làm việc cho tôi

// Các công trình lớn trong Chrome, nhưng hoàn toàn không có trong Firefox

tinyMCE.init({ 
    //... 
    auto_focus : "id_of_textarea" 
}); 

// Thêm này để Firefox cũng làm việc

init_instance_callback : "customInitInstanceForTinyMce", // property to add into tinyMCE.init() 

function customInitInstanceForTinyMce() { 
    setTimeout(function() {       // you may not need the timeout 
     tinyMCE.get('Description').focus(); 
    }, 500); 
} 

Answer 8

tinyMCE.get('Description').getBody().focus();

Các công trình trên trong Firefox, Chrome và IE là tốt. Tôi chưa thử nghiệm trên các trình duyệt khác.

Answer 9

Tôi đã có nó để làm việc với TinyMCE 4.x bằng cách sử dụng như sau:

tinymce.EditorManager.get('id_of_editor_instance').focus();

Answer 10

tôi sử dụng các chức năng sau đây để tập trung các biên tập viên với thinyMCE này được sử dụng jQuery, nhưng sẽ là dễ dàng loại bỏ điều này và sử dụng document.querySelectorAll(). Sử dụng babel nếu bạn cần điều này trong es5.

let focusEditor = function(editorContainer) { 
    let tinymce; 
    if (/iPad|iPhone|iPod/.test(navigator.platform)) { return; } 
    let id = $('.text-editor', editorContainer.innerHTML).first().attr('id'); 
    if (tinymce = window.tinyMCE.get(id)) { 
    try { 
     return tinymce.focus(); 
    } catch (error) { 
     return tinymce.on('init', function() { return this.focus(); }); 
    } 
    } else { 
    return $(`#${id}`, editorContainer).focus(); 
    } 
} 

Trình chỉnh sửaContainer là bất kỳ phần tử nào xung quanh textarea nhỏMCE, ví dụ: một div với id 'text-container' bạn có thể gọi focusEditor($('#text-container')) hoặc trong Phản ứng focusEditor(React.findDOMNode(this))

Answer 11

Đối với Tự động lấy nét trong TinyMCE tài liệu ví dụ đầu tiên nói rằng - https://www.tinymce.com/docs/configure/integration-and-setup/#auto_focus

tinymce.init({ 
     selector: '#textarea_id', 
     auto_focus: '#textarea_id' 
}); 

này làm việc cho tôi trong Version TinyMCE4.7.6

Answer 12

này làm việc cho tôi (TinyMCE phiên bản 4.7.6):

tinymce.activeEditor.fire("focus")