2012-03-20 16 views
8

Mam pudełko, które ma dokładnie 425px x 100px i chcę, aby moi użytkownicy nadawali zawartość tego pola za pomocą edytora WYSIWYG. Powinni umieć używać prawie każdego HTMLa w tym polu.Najlepsze rozwiązanie WYSIWYG JavaScript dla stałego pudełka

Nie, szukam właściwego edytora WYSIWYG, używałem TinyMCE dla tego rodzaju problemów, ale myślę, że najlepiej dla długiego tekstu ciągłego, ale w tej chwili mam stałe pudełko.

Byłoby wspaniale, gdyby redaktor potrafił pozycjonować tekst i obrazy jako bezwzględne, aby użytkownik mógł umieścić swoją zawartość w dowolnym miejscu wewnątrz tego pola.

+0

Czy pytasz o aplikację internetową, która pozwala użytkownikom umieszczać elementy html całkowicie w stałym kontenerze? –

+0

tak, jakiś edytor WYSIWYG. to zoptymalizowane dla stałego pojemnika. –

Odpowiedz

6

http://ckeditor.com/

znalazłem CKEditor użyteczne, mają bogatą funkcjonalność w zakresie obrazu lub tekstu, pozwalają obie metody formatowania WYSIWYG i źródła html, a także ustalenie wielkości „płótno” użytkownik mógł dostosować w zależności od potrzeb,

print screen z mojego praktycznego wykorzystania nim enter image description here

i tu jest ekran źródło enter image description here i wreszcie używam 800x500 stały rozmiar płótna

enter image description here

+0

Robię coś podobnego również z Ckeditorem. Wszelkie "pozycjonowanie" elementów pożądanych przez OP, które nie są już obsługiwane przez edytor, można łatwo włączyć za pomocą niestandardowych funkcji okna dialogowego/wtyczki. –

0
+1

to wysiwyg wydaje się bardzo bliskie tinymce i nie mogę znaleźć opcji użycia "płótna" o rozmiarach, które użytkownik może dostosować. –

+0

Wysokość i szerokość kanwy można regulować w sposób przedstawiony przez tariq.Po prostu chcesz wyłączyć przycisk zamykający pasek narzędzi, ponieważ zamknięcie paska narzędzi przywraca część obszaru roboczego (iw ten sposób zmienia rozmiar płótna). –

4

Można to zrobić za pomocą TinyMCE. Aby ustalić położenie tekstu i obrazów, potrzebujesz własnej zawartości css (patrz: tinymce documentation for the configuration parameter content_css). Możesz nawet zdefiniować szerokość akapitów zawartości tinymce w tym css, rozwiązując swój problem z pudełkiem. Css (do umieszczenia w swoim własnym pliku CSS) do wydania pudełkowej będzie wyglądać następująco:

p { 
    width: 100px; 
} 

chodzi o długość (lub lepszego heigth) może trzeba zaimplementować własną wtyczkę i sprawdzić długości zawartości edytora. Jeśli ta długość została już osiągnięta, usuwasz literę/zawartość, którą użytkownik właśnie próbował wstawić.

+0

jeśli masz jakiekolwiek pytania dotyczące tego podejścia - nie wstydź się. – Thariama

+0

TinyMCE to najlepszy edytor WYSIWYG, z wieloma wtyczkami dostępnymi za darmo i czytelną dokumentacją. – Raptor

+0

Jak TinyMCE jest lepszy od Ckeditor? –

1

Proste, ale skuteczne rozwiązanie to PageDown. Używa Markdown, więc pozwala na formatowanie HTML. Jednak PageDown zawiera dwa skrypty do dezynfekcji treści. Przy odrobinie majsterkowania możesz zezwolić lub ograniczyć dodatkowe tagi.

Jeśli chodzi o pozycjonowanie, jak powiedział Thariama, jest to łatwo kontrolowane przez Twój CSS, więc nie jest to problem dla edytorów WYSIWYG.

0

w zależności od potrzeb i sugeruje dla nicedit. Możesz mieć go również w wersji lekkiej wraz ze stałą wysokością i szerokością.

Powiązane problemy