Zmiana domyślnej rodziny czcionek w TinyMCE

Question

Udało mi się zmienić domyślną czcionkę wewnątrz edytora, korzystając z dokumentacji here, ale to pozostawia mnie z problemem. Oryginalna domyślna czcionka nie działa już na liście rozwijanej czcionek.

Original domyślnie: Verdana
New default: MyCustomFont

Po wpisaniu w edytorze widzę moją czcionki MyCustomFont domyślnie. Jeśli spróbuję to zmienić na Verdana (pierwotne ustawienie domyślne) nic się nie dzieje. Mogę go zmienić na dowolną rodzinę czcionek oprócz Verdany. Zauważyłem również, że po wybraniu MyCustomFont na liście rozwijanej zawartość zostanie otoczona rozpiętością ze stylami wbudowanymi. Nie dzieje się to z oryginalną domyślną czcionką (dlatego nic się nie dzieje).

Wydaje mi się, że brakuje kluczowego dokumentu - jak powiedzieć edytorowi (w szczególności o funkcji czcionki), że czcionka, którą zdefiniowałem domyślnie w css jest domyślną czcionką.

Zrobiłem trochę google, ale nie przyniosłem żadnych rezultatów. Wygląda na to, że wszyscy inni decydują się na wspomnianą powyżej dokumentację. Czy tylko ja mam ten problem? Jeśli nie, proszę o pomoc! :)

Proszę zauważyć, że odpowiedzi na pytanie this nie odpowiadają na moje pytanie.

Answer 1

może zbyt późno, ale ...

$('.tinymce').tinymce({ 
    setup : function(ed) { 
     ed.onInit.add(function(ed) { 
      ed.execCommand("fontName", false, "Arial"); 
      ed.execCommand("fontSize", false, "2"); 
     }); 
    } 
}); 

EDIT

Dla TinyMCE 4, jak @ jason-Tolliverem i stanów @georg, składnia jest:

ed.on('init', function (ed) { 
    ed.target.editorCommands.execCommand("fontName", false, "Arial"); 
}); 

Answer 2

// Init TinyMCE 
$('#content').tinymce({ 
    setup : function(ed) 
    { 
     ed.on('init', function() 
     { 
      this.getDoc().body.style.fontSize = '12px'; 
      this.getDoc().body.style.fontFamily = 'serif'; 
     }); 
    } 
}); 

Answer 3

Niektórzy z was będą pracować w ramach TinyMCE EditorManager, który oferuje dwa zdarzenia: AddEditor i RemoveEditor. Po uruchomieniu nowej instancji TinyMCE i uruchomieniu AddEditor edytor nie zostanie zainicjowany, a zatem wywołanie getDoc() zwróci wartość null.

Co musisz zrobić, to utworzyć wewnątrz obiektu słuchacza init.

tinyMCE.EditorManager.on('AddEditor', function (event) { 
    ... other code ... 

    event.editor.on('init', function() { 
     this.activeEditor.getDoc().body.style.fontSize = '12px'; 
     this.activeEditor.getDoc().body.style.fontFamily = 'Times New Roman'; 
    }); 

    ... other code ... 
    } 
}); 

Jest to co najmniej prawdziwe od wersji 4.3.8

Answer 4

miałem trudności ze wszystkich rozwiązań tu w TinyMCE 4.x nie może zmienić ani fontSize ani fontName. Po wielu próbach znalazłem rozwiązanie. Przede wszystkim mogę potwierdzić odpowiedź Jareda, dziękuję za to! Te dwie komendy nie będą działać domyślnie:

tinymce.EditorManager.execCommand("fontName", false, "12px"); 
tinymce.EditorManager.execCommand("fonSize", false, "Arial"); 

Domyślnym rozmiarem czcionki jest "pt", a nie "px". Więc albo zdefiniuj wyświetlany fontSize jako "px" przez [fontsize_formats] [1] lub po prostu przekaż żądany rozmiar za pomocą "pt". Z tinymce.EditorManager.execCommand tinymce również nie jest szczęśliwy. Musisz przekazać całą rodzinę czcionek jak "arial, helvetica, sans-serif".Polecenia te pracował na moim miejscu:

tinymce.EditorManager.execCommand("fontName", false, "12pt"); 
tinymce.EditorManager.execCommand("fonSize", false, "arial, helvetica, sans-serif"); 

Answer 5

Dla tych, którzy init, timymce z tinymce.init({ i nie może realizować Promień Kuntoro odpowiedź bezpośrednio.

Moja startowych wygląda

tinymce.init({ 
      selector: '#editor', 
      menubar: false, 
      plugins: ['bbcode'], 
      toolbar: 'undo redo | bold italic underline',  
      setup : function(ed) 
      { 
       ed.on('init', function() 
       { 
        this.getDoc().body.style.fontSize = '12'; 
        this.getDoc().body.style.fontFamily = 'Arial'; 
       }); 
      }, 
     });  

Answer 6

Dla TinyMCE 4.6.3 to wydaje się być droga:

tinymce.init({ 
    setup: function (ed) { 
     ed.on('init', function (e) { 
      ed.execCommand("fontName", false, "Verdana"); 
     }); 
    } 
}); 

Answer 7

Jak powołać się na serwis TinyMCE można osadzić arkusz stylów wewnątrz swojej funkcji init tak:

tinymce.init({ 
    content_css : 'path/to/style/sheet', 
    body_class: 'define-class-name-without-dot-at-the-first' 
}); 

Działa i nie trzeba niczego konfigurować. check it out on tinyMCE webpage