I'm currently building a Django Forums web application and I'm using CKEditor to allow users post rich text content on my website.
I have a Topic model and a Django custom TopicForm that looks like this:
class TopicForm(ModelForm):
class Meta:
model = Topic
exclude = ['creator', 'category', 'pinned']
widgets = {
'title': TextInput(attrs={
'class': "form-control",
'style': 'max-width: 300px;',
'placeholder': 'Name'
}),
}
labels = {
'title': 'Title',
# 'content': 'Content',
}
On the website, my form looks like this:
I saw that I'm able to stylize my inputs very easy (not as easy as in HTML raw forms but still works). The problem is, I'm not able to properly stylize my CKEditor.
I'm using two Bootstrap css files: one for the dark theme and one for the light theme. They are imported based on a session variable (the user chooses the preferred theme).
What I want to do is to assign the Bootstrap class form-control to the CKEditor, so it can be either dark/light, depending on the user's active theme.
Unfortunately, I didn't find any ways to do this, neither on Stack or on other sources.
Do you have any idea on how I can implement this?
Related
I'm developing a Wordpress Headless website using NextJS.
In the blog section, I'm using Gutemberg to render text, buttons and links.
I would like to be able to assign each of these elements its own color and style using the Gutemberg color palette.
So far, I was able to get the "general style" of those elements by using this package: https://www.npmjs.com/package/#aamodtgroup/gutenberg-styles but I couldn't get the style of classes such as "has-purple-color", "has-orange-text" etc..
I'm getting the content of each post through the dangerouslySetInnerHTML method
<div dangerouslySetInnerHTML={{ __html: post.content.rendered }} />
HTML wise everything is working correctly: I can see every elements that has been added to the post content, except the custom CSS style.
I was wondering if there's a way of doing this! The idea is to allow my client to be able to customize the content of blog posts through WP Backend using the Gutemberg interface and then see the output on the NextJs frontend.
Thank you!
Recently, as of version 5.9, a new Global Settings and Styles API was added to enable access to global settings and styles. This may be used to get the style of classes like "has-purple-color". The wp_get_global_stylesheet() merges core, theme and user data like the color presets edited via the Editor:
<?php
wp_get_global_stylesheet( $types = array() ); // Supports 'variables', 'styles', 'presets'
Ref: https://developer.wordpress.org/reference/functions/wp_get_global_stylesheet/
The styles color palette also exists in the database, as a wp_global_styles custom post type if you wish to see all the actual values:
SELECT * from <database_name>.wp_posts
WHERE post_type = 'wp_global_styles'
AND post_name = 'wp-global-styles-<theme-slug>'; # eg: wp-global-styles-twentytwentythree
I have been asked to build a custom landing page / section of an existing Drupal 7 site via a custom module but the section needs to have a design that is completely different than that of the parent site. It's just a full size background image, no navigation, no footer, no header, and a new form.
Can you remove all the base site theme from a 'page' via custom module so you can create a custom design?
Short answer: Yes you can! It would require a lot of work, but you can.
Long answer: If the requirement about the solution coming from a custom module is strict, then skip to the last part of this answer. Otherwise you're welcome to fully read it.
What I would do
If the requirement about custom module is not strict, you can just create a page and add a custom template for it. Take a look at Template (theme hook) suggestions
i.e. Create a page called My custom page and let's say the Node id is 23, so you can create a file called page--node--23.tpl.php inside the current theme.
In that page you can modify all the html you need (even the header, footer, etc.)
Custom module
If the solution above does not work for you, you'll have to:
Create a custom module
Create a custom theme
In the custom module you can add a new path like this:
<?php
function mymodule_menu() {
$items['my-page-path'] = array(
'page callback' => 'mymodule_render_page',
);
return $items;
}
function mymodule_render_page() {
// Render your content
}
Later use the hook_custom_theme, in the module, to load your custom theme when certain criteria is met.
Something like:
<?php
function mymodule_custom_theme() {
if ($criteria_is_true) {
// Use the machine name of your custom theme
return 'my_custom_theme';
}
}
In my app, admins can change form template and users should fill in the blanks in this form using CK Editor or other editors. But when I show form to user, they can remove some fields. I dont wanna this. How can I create "uneditable" fields on CK Editor or can you suggest another editors for that?
Thanks in advance..
Summary TL;DR
You can use the "widget" plugin system, it is designed for this sort of usage where parts of a template are editable, but others are not. It is simply a plugin that extends the widget system to create a non-editable block with editable fields inside (you get drag'n'drop support for free too).
The example simple-box widget is located here and is very informative of the general flow for widgets, you can see the sample here:
https://sdk.ckeditor.com/samples/simplebox.html
The Tutorial
The tutorial for creating that widget is here:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html
The important part for users being able to edit certain fields is in the section Adding Editable Parts:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#adding-editable-parts
You can add editables by normal selectors, which makes it easy to have multiple editable fields.
editor.widgets.add( 'simplebox', { // Code defined before...
editables: {
title: {
selector: '.simplebox-title'
},
content: {
selector: '.simplebox-content'
}
} } );
Explanation and Another Example
And the explanation of widgets is here with another example, which is a captioned image:
https://docs.ckeditor.com/ckeditor4/latest/guide/dev_widgets.html
Commentary
The widget uses an "upcast" function to determine whether an element should be a widget in the current CKEditor instance. If you are creating separate systems for admin & users, both using CKEditor, you can have separate upcasts for admin vs user so that you can enter templates as an admin, then upcast it to a widget when a user is editing it so that they can only edit the "editables". If you enter them directly as HTML templates in a database or whatnot, then it is even easier since you can just always upcast in the widget plugin.
The relevant section about upcasting is here:
https://docs.ckeditor.com/ckeditor4/latest/guide/widget_sdk_tutorial_1.html#how-does-a-widget-become-a-widget
And it has a very simple syntax as well:
editor.widgets.add( 'simplebox', {
// Code defined above...
upcast: function( element ) {
return element.name == 'div' && element.hasClass( 'simplebox' );
}
} );
#Baki, editor content area is an open space where you can type and remove anything what makes deletion preventing pretty hard if not impossible. There is a large amount of cases to handle.
If you have form fields that you wish some to be editable and some not, please "go around". instead of trying to do this inside the editor, use the editor only for edible fields. Your form can be a standard non-editable HTML page where you have editable parts on which you can create the editor. Example of such a page could look like so:
<div class="container">
<h1><p>Hello </p><p contenteditable="true">[NAME]</p>,</h1>
<div class="text">
<p>I'm pleased to inform you the total sales has reached<p>
<p contenteditable="true">[AMMOUNT]</p>
<p>units...</p>
</div>
</div>
Working code would look like:https://jsfiddle.net/zqmLLjfh/3/
I'm creating a Wordpress App. It consists on using custom fields on custom type, for managing personal projects.
My issue: I want to add the admin editor (tinyMCE) on frontend. Considering that I can have many textareas that will begin TinyMCE editors. So, I used this code:
PHP (on theme functions.php):
// TINY-MCE EDITOR ON FRONTEND
add_filter('wp_head','add_tinymce_editor');
function add_tinymce_editor(){
wp_admin_css('thickbox');
wp_enqueue_script('wp-tinymce');
wp_enqueue_script('tinymce');
wp_enqueue_script('editor');
add_thickbox();
}
JS (on theme single-projects.php):
jQuery(document).ready(function(){
// EDITORS
tinyMCE.init({
mode : "specific_textareas",
theme : "simple",
editor_selector :"tinymce_enabled"
});
});
On JS I set the "editor_selector" with a Class for all textareas that will begin tinyMCE editors. I cannot assign a single ID for each textareas because these can be 4 or 5 or 6, or more!!!
HTML: (on theme single-projects.php):
<textarea name="new-task-description" id="new-task-description"
class="tinymce_enabled required"></textarea>
Each textarea is present on Jquery UI Accordions.
Now, my problem is, on Firebug (or browser console) I get this error:
tinyMCE is not defined
What's wrong?
thanks in advance!!!
With Wordpress 3.3 you can use wp_editor() which is a lot easier.
http://codex.wordpress.org/Function_Reference/wp_editor
The right way to include scripts is add_action('wp_enqueue_scripts', 'tinymce_editor');
If tinymce is not defined the file tiny_mce.js has not been loaded on the page. Make sure the file gets loaded eigther directly or with the means wordpress offers.
I'm intrigued by the idea in this article: "Mad Libs" Style Form Increases Conversion 25-40%. I'd like to test such a form in place of the registration form on a couple of Drupal sites; however, I'm not sure how to approach such an unorthodox form using Drupal's Form API.
Would it be practical to alter the existing user_register form using hook_form_alter? Is there a better way?
Ideally, I'd like to be able to token-ize each form field on an arbitrary form, then enter the "story" text with token IDs where the fields should appear. I'm not sure where in the form rendering process to do that though?
Interesting. You should build the form as one would normally build a drupal form, only with the fields in it. Your narrative would go in the template file that should be used to theme the form. Using template to theme forms is extremely easy. For example in your _theme hook, bind the form with a template file,
testmodule_theme()
{
return array(
"user_aboutme_form" => array(
"arguments" => array( "form" => NULL ),
'path' => $path_to_template_folder,
"template" => "user-aboutme-form",
)
);
}
Make sure you clear your theme cache in between. In your template file, you'll get the entire form array, and you can render individual elements using drupal_render function. With custom styling you can get the same look and feel as on the above website. The only catch here is to make sure you render the root form element i.e. drupal_render($form) after you are done with rendering individual form elements, that would put in form token values in the form, otherwise the form won't work.