I tried to integrate ck editor for my project. But it show some error massages.
I can't config those errors.
Controller public function ckeditor()
$this->load->helper('ckeditor_helper');
//print_r($this->load->helper('ckeditor_helper'));
//Ckeditor's configuration
$data['ckeditor'] = array(
//ID of the textarea that will be replaced
'id' => 'content',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'toolbar' => "Full", //Using the Full toolbar
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 1' => array (
'name' => 'Blue Title',
'element' => 'h2',
'styles' => array(
'color' => 'Blue',
'font-weight' => 'bold'
)
),
//Creating a new style named "style 2"
'style 2' => array (
'name' => 'Red Title',
'element' => 'h2',
'styles' => array(
'color' => 'Red',
'font-weight' => 'bold',
'text-decoration' => 'underline'
)
)
)
);
$data['ckeditor_2'] = array(
//ID of the textarea that will be replaced
'id' => 'content_2',
'path' => './assets/js/ckeditor',
//Optionnal values
'config' => array(
'width' => "550px", //Setting a custom width
'height' => '100px', //Setting a custom height
'toolbar' => array( //Setting a custom toolbar
array('Bold', 'Italic'),
array('Underline', 'Strike', 'FontSize'),
array('Smiley'),
'/'
)
),
//Replacing styles from the "Styles tool"
'styles' => array(
//Creating a new style named "style 1"
'style 3' => array (
'name' => 'Green Title',
'element' => 'h3',
'styles' => array(
'color' => 'Green',
'font-weight' => 'bold'
)
)
)
);
// Template::set('toolbar_title', 'Create New Event');
Template::set_view('sport_events/ckeditor');
Template::set('ckeditor',$data);
Template::render();
}
Views ckeditor.php(This is my view page.just i call ckeditor.js and pass controller function array to views)
<script type="text/javascript" src="/asset/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="/asset/ckfinder/ckfinder.js"></script>
<?php
echo '<pre>';
print_r($ckeditor);
echo '</pre>';
?>
<textarea name="content" id="contents" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor); ?>
<textarea name="content_2" id="content_2" ><p>Example data</p></textarea>
<?php echo display_ckeditor($ckeditor_2); ?>
The error was I didn't load correct place to ckeditor folder.
path should be public folder
Related
I want to make cards list like the 'Goal' picture. If you look at first picture, last card has only difference at price and last part. But I don't know how to make difference when I use array and map function. Should I resolve it by using conditional rendering? If I could, please let me know how to make it. I'd appreciate it if you let me know thank you.
Goal
Mine
this is Section5Bottom.jsx file. There are array and map function in this file. I erased 'people' element in last array but css still remains so it still shows little pink background-color like 'Mine' picture above
import React from 'react';
import "../section5.css";
import Section5Card from './Section5Card';
const array = [
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/324119/course_cover/07c45106-3cfa-4dd6-93ed-a6449591831c/%E1%84%80%E1%85%B3%E1%84%85%E1%85%AE%E1%86%B8%205%20%E1%84%87%E1%85%A9%E1%86%A8%E1%84%89%E1%85%A1%204.png",
'title' : '실전! 스프링 부트와 JPA 활용1 - 웹 애플리케이션 개발',
'name' : '김영한',
'star' : '5',
'comment' : '(1473)',
'price' : '₩88,000',
'people' : '+12400명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/324671/course_cover/638eee1a-6381-402d-a17b-3724751414f1/frontend-env-eng.png",
'title' : '프론트엔드 개발환경의 이해와 실습 (webpack, babel, eslint..)',
'name' : '김정환',
'star' : '5',
'comment' : '(169)',
'price' : '₩69,300',
'people' : '+2000명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
'title' : '애플 웹사이트 인터랙션 클론!',
'name' : '1분코딩',
'star' : '5',
'comment' : '(187)',
'price' : '₩77,000',
'people' : '+3200명',
},
{
'id' : '1',
'img' : "https://cdn.inflearn.com/public/courses/327193/cover/010c8faf-bfc5-4c6a-9623-a68dc3b38697/327193-eng.png",
'title' : 'Slack 클론 코딩[백엔드 with NestJS + TypeORM]',
'name' : '조현영',
'star' : '4.5',
'comment' : '(58)',
'price' : '₩44,000',
'people' : '+1100명',
},
{
'id' : '5',
'img' : "https://cdn.inflearn.com/public/courses/329477/cover/80fb90fb-0212-4eec-8fb0-7875622b198e/329477-eng.png",
'title' : '모바일 웹 퍼블리싱 포트폴리오 with Figma',
'name' : '코딩웍스(Coding Works)',
'star' : '0',
'comment' : '(0)',
'discount' : '₩132,000',
'price' : '₩92,400',
'new' : '새강의',
'sale' : '할인중'
}
]
function Section5Bottom() {
return (
<div id='Section5Bottom'>
{
array.map((a, i) => {
return (
<Section5Card products={a} key={i} />
)
})
}
</div>
)
}
export default Section5Bottom;
and this is Section5Card.jsx file. This file is imported to Section5Bottom.jsx file
import React from 'react';
import '../section5.css';
function Section5Card(props) {
return (
<div id='Section5Card'>
<img src={props.products.img} id="Section5CardImg" />
<div id='Section5CardTitle'>
{props.products.title}
</div>
<div id='Section5CardName'>
{props.products.name}
</div>
<div id='Section5CardComment'>
{props.products.comment}
</div>
<div id='Section5CardPrice'>
{props.products.price}
</div>
<div id='Section5CardPeople'>
{props.products.people}
</div>
{
props.products.new && (
<div id='Section5CardNew'>
{props.products.new}
</div>
)
}
{
props.products.sale && (
<div id='Section5CardSale'>
{props.products.sale}
</div>
)
}
</div>
)
}
export default Section5Card;
function:
const ConditionalWrapper = ({ children, condition }) => {
return condition ? (
<div>{discount price}</div>
) : (
<>{price}</>
)
}
how to use above function
<ConditionalWrapper condition={condition}>children</ConditionalWrapper>
According to the above problem. you should apply condition if discount price avaliable. if true change css for price. I mean text to gray & strike decoration. Add discount price afterward. if false return price with no additional css. like it is in the picture. I'm not fluent in English. I hope you understood. Still facing problem comment
I have written a plugin that provides a custom "Server Side Block" that uses a callback defined in PHP that is supposed to render some HTML.
The right markup renders in certain case, but in others I just get the comment <!-- wp:nai/serverside /-->.
It happens mainly when I put other blocks in the page, or I put my custom block inside another.
What is wrong? Why can't I put the block wherever I want without breaking it?
Here is the code:
plugin.php:
<?php
/**
* #package MyPlugin
*/
/*
Plugin Name: My Plugin
Version: 1.7.2
*/
function gutenberg_examples_01_register_block() {
// automatically load dependencies and version
$asset_file = include( plugin_dir_path( __FILE__ ) . 'build/index.asset.php');
wp_register_script(
'serverside',
plugins_url( 'build/index.js', __FILE__ ),
$asset_file['dependencies'],
$asset_file['version']
);
wp_register_style(
'herverside',
plugins_url( 'style.css', __FILE__ ),
array( ),
filemtime( plugin_dir_path( __FILE__ ) . 'style.css' )
);
register_block_type('nai/serverside', array(
'editor_script' => 'serverside',
'render_callback' => 'render_callback',
'attributes' => array(
'images' => array(
'type' => 'array'
)
)
)
);
function render_callback( $attributes ){
//$images = $attributes[ 'images' ];
return '<div>Test</div>';
}
}
add_action( 'init', 'gutenberg_examples_01_register_block' );
src/index.tsx:
declare var wp;
const { __ } = wp.i18n;
const { registerBlockType } = wp.blocks;
const el = wp.element.createElement;
const blockStyle = {
backgroundColor: '#900',
color: '#fff',
padding: '20px',
};
registerBlockType( 'nai/serverside', {
title: __( 'Server Side Block', 'text-domain' ),
icon: 'networking',
category: 'common',
attributes: {
images : {
default: [],
type: 'array',
}
},
edit({attributes, setAttributes, className, focus, id}) {
return (
<div style={ blockStyle }>
Not visible in editor mode.
</div>
);
},
save({attributes, className}) {
/*return (
<div style={ blockStyle }>
Hello World, step 1 (from the frontend).
</div>
);*/
return null;
},
} );
I am displaying my categories on a page. Now, when I have more than x posts, I want to show a pagination to navigate to the next page with the posts.
This is my code:
<?php
$cat_id = get_query_var('cat');
$paged = ( get_query_var('page') ) ? get_query_var('page') : 1;
$args = array(
'cat' => $cat_id,
'posts_per_page' => 5,
'paged' => $paged
);
$query = new WP_Query( $args );
while ( $query->have_posts() ) : $query->the_post();
//Post data
echo get_the_post_thumbnail(get_the_ID());
?>
<li>With some posts</li>
<?php
endwhile;
?>
And then I try to spit out my navigation like this:
<?php
function pagination_nav() {
global $wp_query;
if ( $wp_query->max_num_pages > 1 ) { ?>
<nav class="pagination" role="navigation">
<div class="nav-previous"><?php next_posts_link( '← Older posts' ); ?></div>
<div class="nav-next"><?php previous_posts_link( 'Newer posts →' ); ?></div>
</nav>
<?php }
}
?>
<?php echo pagination_nav();
?>
But whatever I do, I can't return it. How exactly should I do this? $paged should work, right? I have more than 20 posts, but I can't see my navigation/paging button anywhere.
Lastly, I tried the code below, yet this does not go to the second page of my query. The URL says /category/categoryname/page/2, but it just sends me to a blank page...
<div class="pagination">
<?php
echo paginate_links( array(
'base' => str_replace( 999999999, '%#%', esc_url( get_pagenum_link( 999999999 ) ) ),
'total' => $query->max_num_pages,
'current' => max( 1, get_query_var( 'paged' ) ),
'format' => '?paged=%#%',
'show_all' => false,
'type' => 'plain',
'end_size' => 2,
'mid_size' => 1,
'prev_next' => true,
'prev_text' => sprintf( '<i></i> %1$s', __( 'Newer Posts', 'text-domain' ) ),
'next_text' => sprintf( '%1$s <i></i>', __( 'Older Posts', 'text-domain' ) ),
'add_args' => false,
'add_fragment' => '',
) );
?>
</div>
Alright, so let me answer my own question. I solved it by using the same code, but changing the settings (!) in my Wordpress page. When enabling the pagination setting, try to change the default "paginate by 50 posts" to something like "10" or so. That triggers the code to work.
I'm having an issue with WP_Customize_Cropped_Image_Control in the Customizer. The default image that I have set doesn't show up in the side pane of Customizer where you upload and when I upload a new image, it just outputs a number, presumingly the image ID. The moment I change WP_Customize_Cropped_Image_Control to WP_Customize_Image_Control, everything works. The default image and uploaded images both display in the customizer and preview window.
Is there a different way of setting/displaying the default image for a default cropped image in the customizer?
This is the code I have in my customizer.php:
$wp_customize->add_setting( 'bio_image', array(
'default' => get_template_directory_uri() . '/images/default.jpg',
'transport' => 'postMessage'
) );
$wp_customize->add_control( new WP_Customize_Cropped_Image_Control( $wp_customize, 'bio_image', array(
'label' => __( 'Image', 'myTheme' ),
'flex_width' => false,
'flex_height' => false,
'width' => 330,
'height' => 330,
'settings' => 'bio_image'
) ) );
This is the code I have in my customizer.js:
wp.customize( 'bio_image', function( value ) {
value.bind( function( newval ) {
$('#bio-image').attr( 'src', newval );
} );
} );
This is the code I have in my template file:
<img id="bio-image" src="<?php echo get_theme_mod( 'bio_image' , get_template_directory_uri().'/images/default.jpg' ); ?>">
Currently, when using new WP_Customize_Cropped_Image_Control
$wp_customize -> add_setting ( 'Your_option_name', array( 'default' => 'this_has_to_be_a_number_that_matches_an_ID_for_to_work', 'sanitize_callback' => 'absint', ) );
I just haven't figured out how to set the images as ID's yet... instead of URLs
I have this code for sidebar in Wordpress :-
register_sidebar(array(
'name' => 'Main sidebar',
'description' => 'main sidebar.',
'before_widget' => '<div id="blocks" class="siderbar box_outer %2$s" style="visibility: hidden;"><div class="widget">',
'after_widget' => '</div></div>',
'before_title' => '<h3 class="widget_title">',
'after_title' => '</h3><div class="wid_border"></div>'
));
In this cod will add every widget attribute style="visibility: hidden;", but i need to add this attribute for all widget else first widget.
How can do that by php or JQuery.