it-swarm-vi.com

Thêm các lớp CSS vào wysiwyg

Tôi sử dụng wysiwyg với ckeditor và tôi đã tự hỏi làm thế nào tôi có thể thêm các kiểu css để người dùng có thể, ví dụ, nổi hình ảnh sang trái hoặc thực hiện các thay đổi tương tự khác ...?

Cảm ơn!

7
Jane

Ckeditor sử dụng ckeditor.styles.js tệp để xác định kiểu có sẵn trong trình đơn Kiểu thả xuống. Tài liệu trong tập tin đó nêu rõ:

'Styles' button is not enabled by default in DrupalFull and DrupalFiltered toolbars.

Nếu bạn nhìn vào tệp, nó sẽ khá đơn giản để sửa đổi nó bằng các ví dụ đã cho.

Các ckeditor.styles.js tập tin có thể được sao chép vào một thư mục có thể truy cập bằng Drupal và được sửa đổi để bao gồm các kiểu của bạn. Sau đó, bạn phải định cấu hình cấu hình CKeditor của mình để trỏ đến tệp mới, bao gồm mọi CSS có thể áp dụng.

6
nmc

Thay vì móc vào ckeditor.styles.js, chúng tôi có thể trực tiếp làm điều đó trên trang cấu hình của Định dạng.

Định dạng WYSIWYG cung cấp cho bạn một tùy chọn cho các kiểu của riêng bạn và chúng tôi có thể viết css đơn giản trên cơ sở các định dạng đó.

Các bước để thêm Kiểu

  • Đăng nhập vào trang web với tư cách là Quản trị viên.
  • Điều hướng đến trang Cấu hình của các định dạng. (Cấu hình "Tác giả nội dung" Hồ sơ Wysiwyg)

    enter image description here

  • Chỉnh sửa bất kỳ định dạng.

    enter image description here

  • Mở bộ trường CSS .

    enter image description here

  • Trong textarea textarea, tạo kiểu bạn muốn tạo. Định dạng của nó phải là

Tên kiểu = html_element. Class_name

Ví dụ giống nhau là

Tiêu đề trang tĩnh = div.static_page_title (Vì vậy, tên của kiểu Tiêu đề trang tĩnh , khi được áp dụng sẽ bọc văn bản trong div thêm static_page_title làm lớp của phần tử div .)

Các bước để sử dụng nó

  • Hãy thử tạo một nội dung và sử dụng Định dạng mà bạn đã thêm Kiểu.
  • Trong Kiểu bạn sẽ thấy cài đặt Kiểu mà bạn đã tạo. enter image description here
  • Đơn giản chỉ cần viết bài kiểm tra và chọn phong cách. Sau khi bạn làm điều đó, đánh dấu sẽ trông giống như

    <div class="static_page_title">Testing</div>

  • Vì vậy, chúng ta chỉ cần viết css cho lớp static_page_title và mọi thứ sẽ hoạt động như mong đợi.

Hy vọng rằng câu trả lời của tôi sẽ hữu ích

1
Nitesh Sethia