2009-01-28 17 views
10

Tôi đang ở trong một tình huống tò mò mà trước đây tôi không gặp vấn đề gì khi đạt được những gì tôi đang tìm kiếm. Các mã sau đây là một phần của một trang HTML mà là để lưu trữ một textbox giàu TinyMCE:Làm thế nào để thiết lập văn bản ban đầu trong một văn bản TinyMCE?

... 
<textarea id="editing_field">This text is supposed to appear in the rich textbox</textarea> 
... 

Lúc đầu này làm việc như dự định, tạo ra một textbox phong phú với các văn bản kèm theo trong nó. Tuy nhiên, tại một số thời điểm, mã TinyMCE đã quyết định rằng HTML văn bản phải được chuyển đổi thành:

<textarea id="editing_field" style="display: none;"/> 
This text is supposed to appear in the rich textbox 

Điều này làm cho văn bản bên dưới hộp văn bản không chính xác lý tưởng. Tôi không có một đầu mối những gì gây ra sự thay đổi hành vi này, mặc dù tôi cũng đang sử dụng jQuery cùng với nó nếu điều đó có thể có hiệu lực.

Tôi có thể giải quyết vấn đề bằng cách tải nội dung vào hộp văn bản bằng javascript sau khi trang đã tải, bằng cách sử dụng ajax hoặc bằng cách ẩn văn bản trong HTML và chỉ di chuyển văn bản đó. Tuy nhiên, tôi muốn phát ra văn bản vào hộp văn bản trực tiếp từ PHP nếu có thể. Bất cứ ai cũng biết những gì đang xảy ra ở đây và làm thế nào để sửa chữa nó?

Cập nhật 2: Tôi đã sao chép thành công hiện tượng gây ra thay đổi hành vi: Lúc đầu, tôi chỉ có văn bản thuần túy trong vùng văn bản như trong đoạn mã đầu tiên. Tuy nhiên, sau khi lưu nội dung văn bản sẽ trông như thế này:

<p>This text is supposed to appear in the rich textbox</p> 

Sự hiện diện của thẻ p gây TinyMCE để kích hoạt việc chuyển đổi giữa một textarea kèm theo một textarea mà chỉ là một thẻ duy nhất (như minh họa ở trên) .

Cập nhật 1: thêm TinyMCE tập tin cấu hình:

tinyMCE.init({ 
     // General options 
     mode : "exact", 
     elements : "editing_field", 
     theme : "advanced", 
     skin : "o2k7", 
     skin_variant : "black", 
     plugins : "safari,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", 
     save_onsavecallback : "saveContent", 

     // Theme options 
     theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull", 
     theme_advanced_buttons2 : "search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,forecolor,backcolor", 
     theme_advanced_buttons3 : "hr,removeformat,|,sub,sup,|,charmap,emotions,|,print,|,fullscreen,code", 
     theme_advanced_buttons4 : "styleselect,formatselect,fontselect,fontsizeselect", 
     theme_advanced_toolbar_location : "top", 
     theme_advanced_toolbar_align : "left", 
     theme_advanced_statusbar_location : "bottom", 
     theme_advanced_resizing : false, 

     // Drop lists for link/image/media/template dialogs 
     template_external_list_url : "lists/template_list.js", 
     external_link_list_url : "lists/link_list.js", 
     external_image_list_url : "lists/image_list.js", 
     media_external_list_url : "lists/media_list.js", 

     // Replace values for the template plugin 
     template_replace_values : { 
      username : "Some User", 
      staffid : "991234" 
     }, 

     width : "450", 
     height : "500" 
    }); 
+0

Textarea của bạn có nằm trong thành phần

không? –

Trả lời

0

Dường như tôi đã giải quyết được sự cố, trừ khi có bất kỳ trường hợp cạnh nào làm hỏng giải pháp. Tôi sử dụng mã PHP sau trên nội dung trang trước khi tôi lưu nó vào cơ sở dữ liệu:

$content = str_replace(chr(10), "", $content); 
$content = str_replace(chr(13), "", $content); 
$content = str_ireplace('<','&#x200B;<',$content); 

Những gì nó là nó loại bỏ bất kỳ dòng mới và sau đó thêm vào trước một nhân vật vô hình zero-chiều rộng trước khi bất kỳ thẻ bắt đầu. Văn bản này sau đó được chèn vào giữa các thẻ textarea trước khi TinyMCE thực hiện phép thuật của nó. Tôi không biết tại sao nhưng điều này không kích hoạt vấn đề và các ký tự nối thêm không được hiển thị trong html cuối cùng hoặc trong chế độ xem html của TinyMCE, do đó, vấn đề duy nhất tôi có thể thấy với giải pháp này là hiệu suất đạt được. Một chi tiết là nó chỉ xuất hiện các thẻ bắt đầu cần phải được prepended theo cách này, nhưng tôi đã không đưa điều này vào xem xét ở đây, cho đơn giản.

1

Đó thứ hai dụ < textarea ... /> là ký hiệu thẻ trống. Nếu bạn muốn văn bản ở bên trong tage, bạn cần phải làm như cách đầu tiên < teatarea ....> foo </textarea>

Điều gì sẽ xuất ra các thẻ textarea? Bạn có thể gỡ lỗi đó để xem nếu nó đang làm ký hiệu thẻ trống không?

Eric

+0

Vấn đề là mã TinyMCE sửa đổi văn bản gốc thành một thẻ đã đóng. Đoạn mã đầu tiên là mã của tôi như tôi đã viết nó và đoạn thứ hai là sau khi TinyMCE đã sửa đổi nó. –

0

Gần đây, chúng tôi đang sử dụng TinyMCE tại đây. Tôi đặc biệt bối rối về sự thay đổi thuộc tính phong cách của vùng văn bản để ẩn phần tử. Rất kỳ quặc.

tôi tò mò những gì tập tin cấu hình của bạn trông giống như (một số tài liệu trên các tập tin cấu hình tại địa chỉ: django)


CẬP NHẬT

wow ... bạn đang sử dụng một LOT các plugin TinyMCE. Tôi sẽ cố gắng nghiên cứu thêm khi tôi có thời gian và xem liệu tôi có thể tìm ra một số nghi phạm có khả năng không.

+0

Tôi đã thêm tệp cấu hình vào câu hỏi. –

+0

Heh, tôi đã sửa đổi một tập tin init mặc định và tôi chắc chắn nó đi kèm với rất nhiều thứ tôi không cần, nhưng tôi đã không dành thời gian để nhìn gần hơn vào nó. Đây là lần đầu tiên tôi sử dụng TinyMCE, vì vậy tôi không quen thuộc lắm với nó. –

+0

Tôi đã tìm ra nguyên nhân của vấn đề, do đó bạn không phải làm nhiều nghiên cứu (đã chỉnh sửa câu hỏi). Tất nhiên nếu bạn tìm thấy một cách để tránh vấn đề tôi muốn được hạnh phúc để biết :) –

15

Nếu bạn không gọi hàm JavaScript của TinyMCE, bạn có thể phải giải quyết các vấn đề tương thích với trình duyệt.

Nếu bạn chỉ có một hộp TinyMCE trên trang web, bạn chỉ có thể làm điều này:

tinyMCE.activeEditor.setContent('<span>some</span>'); 

Bạn cũng có thể thiết lập một định dạng như BBCode. Xem tài liệu setContent.

tôi sẽ có mã PHP của bạn echo ra HTML vào một hàm JavaScript và có nó gọi với onload:

function loadTinyMCE($html) { 
    echo " 
     <script type="text/javascript">function loadDefaultTinyMCEContent(){ 
      tinyMCE.activeEditor.setContent('$html'); 
     }</script> 
    "; 
} 

sau đó

<body onload="loadDefaultTinyMCEContent()"> 

Nếu bạn không muốn sử dụng trang onload sự kiện, tinymce có tùy chọn init được gọi là oninit có chức năng tương tự.

Hoặc, setupcontent_callback cho phép bạn truy cập trực tiếp vào khung nội tuyến.

+0

Bạn có một số điểm tốt, nhưng tôi vẫn muốn tránh javascript hoàn toàn. Tôi nghĩ cách duy nhất có thể là nếu ai đó có thể tìm ra cách làm cho TinyMCE không hợp nhất hai thẻ textarea thành một. –

+0

công việc duy nhất của nó nếu tinyMce đã được khởi tạo. nhưng khi bạn khởi tạo tinyMce và sau đó trong dòng tiếp theo, bạn đặt giá trị, nó sẽ không hoạt động. bởi vì, nó cần một thời gian để bắt đầu các tinymce khoảng 0,5 giây (có thể). – muaaz

2

Cho rằng sự hiện diện của <p> thẻ gây ra sự biến đổi, tôi nghi ngờ rằng HTML của bạn sẽ trông giống như:

... 
<textarea id="editing_field"><p>This text is supposed to appear in the rich textbox</p></textarea> 
... 

Thật không may, các phần tử HTML được không về mặt kỹ thuật cho phép bên <textarea> thẻ, vì vậy một cái gì đó có thể được xem xét các thẻ <p> là sự khởi đầu của một phần tử khối mới, đóng hoàn toàn vùng văn bản của bạn. Để sửa lỗi này, bạn có thể mã hóa các dấu ngoặc nhọn:

... 
<textarea id="editing_field">&lt;p&gt;This text is supposed to appear in the rich textbox&lt;/p&gt;</textarea> 
... 

Sử dụng PHP, điều này có thể được thực hiện bằng cách gửi giá trị của bạn thông qua htmlspecialchars() trước khi lặp lại nó vào trang.

1

tinyMCE.activeEditor.setContent ('một số') làm việc cho me.Cheers

0

Để thay đổi một lĩnh vực cụ thể TinyMCE, bạn có thể làm điều này:

tinyMCE.get('editing_field').setContent('your default text'); 
0

Tôi đã đến cùng một vấn đề trong khi sử dụng React, có lẽ nó liên quan đến điều này. Giá trị ban đầu được chuyển đến thành phần là giá trị ban đầu. Sau khi nhận được, thành phần sẽ tiếp quản và xử lý nội dung, bất kể giá trị mới có được chuyển đến nó hay không. Vì vậy, nếu bạn đang đi qua một chuỗi, sau đó nó là một hằng số và nó tồn tại lúc render ban đầu của thành phần của bạn. Nhưng nếu bạn đang truyền một biến, có thể giá trị ban đầu của biến khác với giá trị bạn muốn hiển thị (như nó có thể là null hoặc không xác định cho đến khi bạn nhận được giá trị để hiển thị). Trong trường hợp của tôi, tôi nhận được một đối tượng có nội dung trang, một trong số đó là html để hiển thị dưới dạng nội dung ban đầu.Nhưng phương thức render đầu tiên được kích hoạt với một đối tượng rỗng, và sau đó với đối tượng thực tế với dữ liệu.