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


7

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 bên trái hoặc thực hiện các thay đổi tương tự khác ...?

Cảm ơn!

Câu trả lời:


6

Ckeditor sử dụng ckeditor.styles.jstệ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.jstập tin có thể được sao chép vào một thư mục có thể truy cập bởi Drupal và 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 hiện hành.


1

Thay vì nối vào ckeditor.styles.js, chúng ta 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)

    nhập mô tả hình ảnh ở đây

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

    nhập mô tả hình ảnh ở đây

  • Mở bộ CSS .

    nhập mô tả hình ảnh ở đây

  • Trong lớp CSS 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ểuTiêu đề trang tĩnh , khi được áp dụng sẽ bao 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. nhập mô tả hình ảnh ở đây
  • Đơ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

Khi sử dụng trang web của chúng tôi, bạn xác nhận rằng bạn đã đọc và hiểu Chính sách cookieChính sách bảo mật của chúng tôi.
Licensed under cc by-sa 3.0 with attribution required.