TinyMCE 4：將一個塊格式自動應用到新塊中

在TinyMCE 4中，我使用標準formatselect控件來格式化內容中的塊元素。它的配置通常看起來是這樣的：TinyMCE 4：將一個塊格式自動應用到新塊中

block_formats: 'Paragraph=p;Header 1=h1;Header 2=h2'

我對那些塊自定義樣式，而我需要的樣式，其中由編輯器生成的HTML最終仍然沒有問題。主題中的content.min.css可以控制塊在編輯器內部的顯示方式，但不在其他位置，所以我不能依賴它。所以我使用自定義格式而不是標準塊格式。我的配置看起來像這樣：

block_formats: 'Normal=normal;Header 1=header1;Header 2=header2', 
formats: { 
    normal: {block: 'p', styles: { 
     'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif', 
     'font-weight': 'normal', 
     'font-size': '13px', 
     'line-height': '20px', 
     'color': '#333'}}, 
    header1: {block: 'h1', styles: { 
     'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif', 
     'font-weight': 'normal', 
     'font-size': '30px', 
     'line-height': '40px', 
     'color': '#333'}}, 
    header2: {block: 'h2', styles: { 
     'font-family': '"Helvetica Neue",Helvetica,Arial,sans-serif', 
     'font-weight': 'normal', 
     'font-size': '20px', 
     'line-height': '30px', 
     'color': '#333'}} 
},

這實現了我想通過嵌入樣式生成的HTML元素。但是在使用我不明白的自定義格式時，行爲會發生一些變化。

使用默認塊格式時，默認情況下會在內容爲空時以及每創建一個新塊時選擇段落。使用自定義格式時，它不會選擇默認塊格式，所以默認情況下沒有我的自定義樣式。我想normal是默認的。我怎樣才能做到這一點？

來源

2016-01-24 Sam Kauffman

這可能非常晚，但我認爲我能夠以適合您的方式來解決這個問題。希望有人認爲這有用。

（將TinyMCE：4.3.13）

在我的情況，我顯示在一個模式TinyMCE的實例。該模式可用於創建或編輯文本，然後將其作爲html保存到數據庫中。我遇到的問題是在創建新的文本實例時，默認情況下，p標籤被放入（假設您添加了一些內容），並不反映它們正在查看的當前樣式。後來，我需要將這個html渲染成一個圖像，所以當我渲染它時，樣式必須出現在標籤上，'格式'對象不會影響它，因爲用戶沒有通過UI選擇它。然後，用戶可以創建在圖像中以不同方式顯示的結果html，因爲呈現的Web-Kit沒有正確的CSS，因此只呈現其默認值。

因此，強制它顯示初始樣式（字體大小和字體系列是我的顧慮），您可以簡單地設置編輯器的初始內容。如果沒有可用的HTML進行編輯，我會在模式顯示給用戶之前執行此操作。

tinymce.activeEditor.setContent('<p><span style="font-family: arial; font-size: 8pt;">&nbsp;</span></p>');

當然，可以先檢查瀏覽器版本，以確保您設置的是可接受的值。

希望這會有所幫助。

[UPDATE] *這是失敗！編輯器將呈現默認字符並將光標置於焦點之後。這會造成設計上的錯誤修改。（想象一下，我在文本上施加了一個默認的'下劃線'樣式）

因爲我製作了一個空格，那麼下劃線空格現在會出現在編輯器中。如果用戶點擊退格刪除該空間，則表示沒問題。但是，如果用戶再次擊退退格，它將刪除格式。這不是一個修復。

要解決這個問題，您需要將tiny設置爲不驗證html。不幸的是，它不會呈現出色的html。您無法切換驗證。我認爲這應該改變。我們需要能夠僅以風格注入內容。我會買票。

https://github.com/tinymce/tinymce/issues/3126

來源

2016-07-20 16:19:45 Stickman

TinyMCE 4：將一個塊格式自動應用到新塊中

回答

相關問題