應用自定義樣式時拆分HTML標記

Question

當您使用所見即所得編輯器，並且選擇文本並應用（例如對其加粗）時，瀏覽器將使用<span style="font-weight:bold">標記（假設您已調用document.execCommand("useCSS", false)和/或document.execCommand("styleWithCSS", true)）。現在，如果你選擇的是一個子集，並重新申請大膽，將原來的大膽標籤拆分成類似下面的

<span style="font-weight:bold">Something</span> 
Not selected 
<span style="font-weight:bold">Selected</span> 

在產品我的工作，我們支持一系列的所見即所得功能，包括一些不直接受execCommand支持的方法（例如添加文本的級別（類）以應用font-family和font-size），並且我們遇到嵌套標記的問題。有沒有辦法告訴瀏覽器從樣式中移除當前範圍，並且基本上關閉之前的標籤並在內容之後打開新的標籤？

我不會立即在execCommand reference中看到一些東西。

我們使用rangy 1.2.3取得了一些成功，但我不知道是否有一些命令我錯過了。

由於添加了多個樣式，因爲在上面的示例中添加了粗體和斜體，然後在中間刪除粗體會生成三個跨度，兩個粗體和斜體文本，中間只有斜體。

目前，我們限制使用我們的編輯器到Chrome。

Answer 1

如果您擔心的是輸出錯亂，渲染正確，您應該從編輯器無關的角度來處理它，因爲這會影響所有HTML butes，特別是rangy和其他所見即所得編輯器/用戶格式的代碼。

，以減少混亂的最快方法是限制提供給用戶的標記選項：

• 限制（如果不是禁用）字樣或用大量的代碼
• 考慮解決方案等風格/元素正是專爲這種困境，如BB代碼或降價語法

如果你不能交換的編輯，因爲客戶需要從MS Word中的紅色/藍色文本，PHP Tidy應該是足夠的，因爲它甚至可以處理微軟Office的HTML導出！使用merge-spans配置的以下功能應該有效。對於選擇

function tidyHTML($input){ 
    $tidy = new tidy(); 
    $config = array(
     'ascii-chars' => true, 
     'bare' => true, 
     'clean' => true, 
     'drop-empty-paras' => true, 
     'drop-proprietary-attributes' => true, 
     'hide-endtags' => true, 
     'indent' => true, 
     'logical-emphasis' => true, 
     'merge-spans' => true, 
     'show-body-only' => true, 
     'word-2000' => true, 
     'wrap' => false 
    ); 
    return $tidy->repairString($input, $config); 
} 
echo tidyHTML($wysiwyg_output); 

文檔可以發現here。