返回列表 發帖

[TinyMCE] 關於 TinyMCE 顯示 Html 標籤錯誤的問題

你好,我的網頁有崁入 TinyMCE 這個 HTML 富文本編輯器。
TinyMCE 版本是 2,1

我有一個 HTML 檔案的原始碼如下
<p><span style="color: #ff0000;"><strong><span style="font-size: xx-large;">Hello</span></strong></span> <span style="color: #ff6600;"><em><span style="font-size: x-large;">TinyMCE</span></em></span> <span style="text-decoration: underline; color: #3366ff;"><span style="font-size: large;">Test</span></span> 01</p>
我如果從 javascript 程式中從 Server 中讀取檔案再用 TinyMCE顯示,
就無法顯示有關字體的顏色與大小。

但是我如果先在 TinyMCE 中按下 "Html" 的按鍵,也就是用 html 原始碼編輯;
然後把這一段 HTML 的原始碼貼上去,就一切正常。

我的 TinyMCE 在 javascript 中的初始化程式碼如下:
tinyMCE.init({
            language: "zh-tw",

            theme: "advanced",
            */
            mode: "textareas",
            skins: "o2k7",

            elements: "txtContent",

            element_format: "html",
            schema: "html4",

            valid_elements: "*
  • ",             // Location of TinyMCE script             script_url: '/Resource/Package/TinyMCE/3x/jscripts/tiny_mce/tiny_mce.js',             // General options             theme: "advanced",             plugins: "autolink,lists,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,advlist",             // Theme options                          theme_advanced_buttons1: "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",             theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",             theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",             theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",             theme_advanced_toolbar_location: "top",             theme_advanced_toolbar_align: "left",             theme_advanced_statusbar_location: "bottom",             theme_advanced_resizing: true,             template_external_list_url: "/Resource/Package/TinyMCE/3x/jscripts/tiny_mce/plugins/lists/template_list.js",             external_link_list_url: "/Resource/Package/TinyMCE/3x/jscripts/tiny_mce/plugins/lists/link_list.js",             external_image_list_url: "/Resource/Package/TinyMCE/3x/jscripts/tiny_mce/plugins/lists/image_list.js",             media_external_list_url: "/Resource/Package/TinyMCE/3x/jscripts/tiny_mce/plugins/lists/media_list.js"                      });
  • 關於從伺服器端取回 html 的 javascript 程式碼 如下
    $.ajax({
                    type: "POST",
                    url: "http://網頁的網址",
                    data: "",
                    contentType: "application/json",
                    dataType: "text",
    
                    beforeSend: function (XHR) {
                    },
                    complete: function (XHR, TS) {
                    },
                    success: function (data) {
                        var rs = JSON.parse(data);
                        window.alert(rs.d);
                        tinyMCE.activeEditor.setContent(rs.d);
                        window.alert("Success Ajax");
                    },
                    error: function (data) {
                        alert("error :" + data);
                    }
                });
    在 上面這一段程式碼中的 success 返回處裡函式中, window.alert(rs.d) 都還是和原始來源的 html 一樣,有包含字體顏色和大小的 html 標籤。
    但是再透過 tinyMCE.activeEditor.setContent(rs.d) 這一行程式碼之後,在 TinyMCE 顯示出來的就自動把字體的大小和顏色都去除了。
    但是奇怪的是,還是有包含粗體字的 <strong> 標籤。
    我把 TinyMCE 顯示的 html 碼貼在下面,你會發現 TinyMCE 自動把 <span style=""> 這樣的標籤去除了。
    <p>"</p>
    <p><span ff0000=""><strong><span xx-large="">Hello</span></strong></span> <span ff6600=""><em><span x-large="">Justin</span></em></span> <span underline="" color:="" 3366ff=""><span large="">Test</span></span> 01</p>
    <p>"</p>
    更怪的是還自動的在整段的 html 碼籤後自動加上 " 的雙引號。
    有人知道該如何解決這個問題,讓帶有 css 屬性的標籤恢復正常顯示嗎?
    感謝幫忙。

    返回列表 回復 發帖