I have a tinymce editor in which I want to extend it to add accordion. Is there an easy way to do this?
The file is way too big to add it though what I am basically trying to do is add a new button on the editor as shown below;
tinymce.init the toolbar has a new button called acccordionInsert
tinymce.init({
...
toolbar1: 'undo redo | link customImage media snippetInsert template formInsert acccordionInsert | bold italic forecolor backcolor',
...
accordionInser function;
function accordionInsert(editor) {
editor.focus();
var highlightedContent = $(tinyMCE.activeEditor.selection.getContent());
$('#accordionFormPopup').remove();
$('body').append('<div id="accordionFormPopup" class="popup accordionFormPopupBackground"><div id="addAccordionFormPopup"></div></div>');
$('#addAccordionFormPopup').load('/test/widgets/accordionForm.php');
$('#accordionFormPopup').fadeIn(500, 'linear');
}
add button fuction inside editor setup, this basically triggers the fuction above when clicking the button in the editor
editor.addButton('accordionInsert', {
icon: 'arrowdown',
title: 'Insert accordion',
onclick: function() {
accordionInsert(editor);
}
});
Everything mentioned above works fine, the probalem is in the accordionForm.php file
the file has a dropdown option which you can select which accordion you want to add on the editor, this queries a database and upon inserting it it will use the following function to display it
function insertSnippet(){
if(!$('#insertSnippet').hasClass('disabled')){
id = $('#snippetSelect').val();
tinyMCE.activeEditor.execCommand('mceInsertContent',false,"<div class='snippetWrapper' contenteditable=false><div class='snipCode'>[accord,id="+id+"]</div>Please save the page for the accordion to display.</div>");
$('#accordionFormPopup').fadeOut(function(){
$('#accordionFormPopup').remove();
});
}
};
I haven't figured out a way to style the tinyMCE.activeEditor.execCommand mentioned above or make it display an accordion somehow, as of now it just diplays the selected id but I want to be able to display the name and content from the database and then use css to display them as an accordion.
I actually figured out the issues.
I just had to echo the content which is probably not the best idea but works for now.
if(stristr($content,"[accord"))
{
$accordionCount = substr_count($content, '[accord');
if(!$db) {
$db = new DB;
}
for($i=0; $i < $accordionCount; $i++)
{
$pos = strpos($content,"[accord");
$endpos = strpos($content,"]");
$incData = trim(substr($content,$pos+1,$endpos-$pos-1));
$accordionId = afterlast('id=', $incData);
//finding accordion content
$db->query("SELECT aName, aContent FROM ls_accord WHERE aId='$accordionId'");
$db->next_record();
list($aName, $aContent) = $db->Record;
//wrapping content in accordion indicator
echo "</br><div class='myAccordion'><button class='menu'>$aName<span class='arrow rarrow'>+</span><span class='arrow darrow'>-</span></button><div class='panel close'><div style='padding:10px'>$aContent</div></div></div>";
$content = str_replace("[accord,id=$accordionId]", $displayContent, $content);
}
$content = str_replace("|{|processedAccordion", "[accord", $content);
$content = str_replace("|}|", "]", $content);
}
Related
I'm learning how PHP works, but at the same time I have to redesign an custom CMS.
CMS is written in PHP, I have restyled the default menu using CSS and added a side slide effect. But now, I need to keep this side panel opened, when I click on a link from the menu. I think, the easiest way is prevent page reload = to make menu links open in a page content section (<div id="content"></div>). But because in a source code, there are lots of functions, variables etc., I really need your help, how to proceed.
/Admin/index.php - content from menu sections (placed in separate files) is called here using a function
AdminLib/CSS/style.css - contains also styles for side menu
AdminLib/Include/menu.php - here is defined a side menu (ul, li)
/Admin/index.php
...
...
...
<body>
<?php if ($page != 'login') {
$menu_obj = new AdminMenu(dirname(__FILE__).'/Tabdefs/');
echo $menu_obj->GetHtml();
?>
<div class="site-wrap">
<?php
}
ContContent();
?>
</div>
...
...
...
AdminLib/Include/menu.php
...
...
...
//vrati html pro svoje menu
public function GetHtml() {
$html = '<ul class="navigation">';
$html .= $this->GetHtmlRecursive($this->menu_def);
$html .= '</ul>';
$html .= '<input type="checkbox" id="nav-trigger" class="nav-trigger" /><label for="nav-trigger"></label>';
return $html;
}
/********** PRIVATE ***********/
//vrati html pro vsechny polozky menu v poli $arr; Pokud tam nejaka ma sub, tak se vola rekurzivne
private function GetHtmlRecursive($arr) {
$html = '';
foreach ($arr AS $item) {
//neukazovane polozky rovnou preskakuju
if ($item['show'] != 'Y')
continue;
//ted jestli mam podpolozky, tak rekurzujeme
if (isset($item['sub'])) {
$html .= '<li class="nav-item">'.$item['nazev'].''.
'<ul class="nav-item">';
$html .= $this->GetHtmlRecursive($item['sub']);
$html .= '</ul></li>';
}
else {
//pokud podpolozky nemam, tak vypisu normalni polozku
$html .= '<li class="nav-item">'.$item['nazev'].'</li>';
}
} //foreach pres polozky $arr
return $html;
}
...
...
...
I trying to integrate something like this - using jQuery script (How to target the href to div - 2nd and 3rd link on JsFiddle) into my source code, but I need help with realisation - I wasn't able to make it working.
Instead of getting the links to target specific divs, you could always use anchor tags. They use the a tag to go to the relevant point on a page.
An anchor tag would be created like the following:
<a name="location1"></a>
To link to that with your a tag, you can then do:
Link Text
That link will then take you to the anchor location on the page.
If you really want to do it by div ID and use jQuery (which will enable you to scroll to it rather than a straight jump), then if you create your link to something like the following :
Link Text
If the page then has the div:
<div id="location1">Contrent of the div</div>
and your page has the function (either on page or in an external file) :
function scrollToLocation(location_id) {
$('body').animate({
scrollTop: $('#' + location_id).offset().top
}, 500);
}
There's more information on Stack Overflow in the following questions:
jQuery .scrollTop(); + animation
jQuery jump or scroll to certain position, div or target on the page from button onclick
I wrote a code so as in manual with treeview.
div id="treview-back">
<?php
$treeview = new \Kendo\UI\TreeView('treeview');
// helper function that creates TreeViewItem with imageUrl
function ImageTreeViewItem($text) {
$item = new \Kendo\UI\TreeViewItem($text);
return $item;
}
$msg = ImageTreeViewItem('Message');
$msg->addItem(
ImageTreeViewItem('New Message'),
ImageTreeViewItem('Replay')
);
$msg->expanded(true);
$inbox = ImageTreeViewItem('Home');
$inbox->expanded(TRUE);
$inbox->addItem($msg);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
// add root-level nodes as datasource data
$dataSource->data(array($inbox));
$treeview->dataSource($dataSource);
echo $treeview->render();
?></div>
I need to add a Splitter widget, how do I have to do it? I didn't find it at manual.
Why, if I add this code
<script type="text/javascript">$("#treeview").kendoTreeView({
checkboxes: true
});</script>
The TreeView disappears.
The structure of the code is pretty much the same that you were doing for a tree.
<div id="outer-splitter">
<?php
$treeview = new \Kendo\UI\TreeView('treeview');
// helper function that creates TreeViewItem with imageUrl
function ImageTreeViewItem($text) {
$item = new \Kendo\UI\TreeViewItem($text);
return $item;
}
$msg = ImageTreeViewItem('Message');
$msg->addItem(ImageTreeViewItem('New Message'), ImageTreeViewItem('Replay'));
$msg->expanded(true);
$inbox = ImageTreeViewItem('Home');
$inbox->expanded(TRUE);
$inbox->addItem($msg);
$dataSource = new \Kendo\Data\HierarchicalDataSource();
// add root-level nodes as datasource data
$dataSource->data(array($inbox));
$treeview->dataSource($dataSource);
// Create Left Pane
$leftPane = new \Kendo\UI\SplitterPane();
$leftPane->attr("id", "left-pane")->collapsible(true)->size(220)->content($treeview->render());
// Create Right Pane
$rightPane = new \Kendo\UI\SplitterPane();
$rightPane->attr("id", "right-pane")->collapsible(true)->size(220)->startContent();
?>
<div>
Right pane
</div>
<?php
$rightPane->endContent();
// create outer splitter
$splitter = new \Kendo\UI\Splitter('splitter');
$splitter->orientation("horizontal");
$splitter->addPane($leftPane);
$splitter->addPane($rightPane);
echo $splitter->render();
?>
</div>
You need to use \Kendo\UI\Splitter for configuring the Splitter, setting itscontent`. Here I used:
orientation for setting the orientation of the pane. horizontal means that they are tiled horizontally.
addPane Allows you to add \Kendo\Ui\SplitterPane.
In \Kendo\Ui\SplitterPane, I've used content for adding the another widget definition inside and startContent and endContent for delimiting the begin and end of an HTML block.
You can find very good information in here.
Your code makes the splitter disappear since that's a different way of using Kendo UI widgets (pure-JavaScript, not using PHP wrappers) and in that piece of code you are not defining the content of the new TreeView.
I have a form for user input in which users can add images hosted elsewhere using a form. The images are displayed as a small icon which is both a link and which will load an image into a div with stacking order +1 on hover. The image source address is stored in the link tag only.
I am using a <div /> with contenteditable=true for the user input. The icon is appended when the form is used. The code for this part works fine. What I would like to do is check the source of all image tags to make sure that users are not adding their own html to display full size images in their post.
I am using php on the backend to remove all tags except links and images, but would like to use jQuery to check the src of the image tags before posting.
<img src="my_icon" /> //this is what my form will input
<img src="anything_else"> //this is what I want to prevent
Update: I apologize if this is not clear. Essentially, I don't want the user to be able to input any html of their own. If they want to add an image, they have to use my built in form which inserts something like above.
You could loop over the images and then check the src attribute.
$("img").each(function(index) {
if ($(this).attr("src") == ...) {
// do something
}
}
See http://api.jquery.com/each/ and http://api.jquery.com/attr/ for more information.
Say we have the <div id="editor" /> the jQuery script would look something like this:
var srcs = [];
jQuery ('div#editor img').each (function () {
srcs.push (jQuery (this).attr ('src'));
});
srcs will now hold all the src-attributes from the <img />-tags provided in the <div id="editor" /> tag.
Especially for your site following code alerts the links for all images:
$('.postimage').each(function(){
alert($(this).attr('href'));
});
I have an answer. When users input a < or > in a contenteditable="true" div, the browser replaces them with the html notation < and >. The good news is the images would have never displayed when outputting the user comment. The bad news is that the jQuery based solutions given above will not work to remove the ugly coding. I ended up using php to do it with
$post = $_POST['comment'];
$imgcheck = true;
$stringstart = 0;
while($imgcheck == 'true'){
if($stringstart = strpos($post,'<img',$stringstart)){
if ($stringend = strpos($post,'>',$stringstart)){
$strlength = $stringend - $stringstart +4;
$substring = substr($post,$stringstart,$strlength);
if (!preg_match('~src="\/images\/ImageLink.jpg"~',$substring)){
$post = str_replace($substring, "", $post);
}
else{
$stringstart = $stringend;
}
}
else{
$imgcheck = 'false';
}
}
else{
$imgcheck = 'false';
}
}
Is there a way to add TinyMCE into my own WordPress plugin?
I have a textarea in my back end script and want to make this area into a TinyMCE WYSIWYG editable field. Is there a way to do that?
This code does not work for me:
<?php
wp_tiny_mce(false,array("editor_selector" => "test"));
?>
<textarea class="test" id="test" name="test"></textarea>
It shows the javascript error
f is undefined
Firebug screenshot:
This didn't work either:
<textarea class="theEditor" id="videogalerie-add_description" name="videogalerie-add_description"></textarea>
This is much easier to do in WordPress 3.3 using the wp_editor() function.
I'm working on a plugin that will add a TinyMCE instance to a theme options page. Here's what it looks like:
// Add TinyMCE visual editor
wp_editor( $content, $id );
Where $content is the stored content and $id is the name of the field. Options can also be passed to customize the TinyMCE functionality, check out the WordPress Codex for more details.
Camden already answered this, but in case somebody needs the full code... Be sure to hook in admin_head, hooking into admin_enqueue_scripts will cause it to load before other scripts, such as jQuery, so it will not work.
add_action("admin_head","load_custom_wp_tiny_mce");
function load_custom_wp_tiny_mce() {
if (function_exists('wp_tiny_mce')) {
add_filter('teeny_mce_before_init', create_function('$a', '
$a["theme"] = "advanced";
$a["skin"] = "wp_theme";
$a["height"] = "200";
$a["width"] = "800";
$a["onpageload"] = "";
$a["mode"] = "exact";
$a["elements"] = "intro";
$a["editor_selector"] = "mceEditor";
$a["plugins"] = "safari,inlinepopups,spellchecker";
$a["forced_root_block"] = false;
$a["force_br_newlines"] = true;
$a["force_p_newlines"] = false;
$a["convert_newlines_to_brs"] = true;
return $a;'));
wp_tiny_mce(true);
}
}
Then somewhere in your template insert a regular textarea:
<textarea id="intro"></textarea>
The following example works for me. Just make sure to use the id of the textarea you want to select in the $a["elements"] variable.
Assuming you have a textarea with the id of 'intro':
// attach the tiny mce editor to this textarea
if (function_exists('wp_tiny_mce')) {
add_filter('teeny_mce_before_init', create_function('$a', '
$a["theme"] = "advanced";
$a["skin"] = "wp_theme";
$a["height"] = "200";
$a["width"] = "800";
$a["onpageload"] = "";
$a["mode"] = "exact";
$a["elements"] = "intro";
$a["editor_selector"] = "mceEditor";
$a["plugins"] = "safari,inlinepopups,spellchecker";
$a["forced_root_block"] = false;
$a["force_br_newlines"] = true;
$a["force_p_newlines"] = false;
$a["convert_newlines_to_brs"] = true;
return $a;'));
wp_tiny_mce(true);
}
?>
The tiny mce function wp_tiny_mce is now depricated. For Latest wordpress you want to use wp_editor
$initial_data='What you want to appear in the text box initially';
$settings = array(
'quicktags' => array('buttons' => 'em,strong,link',),
'text_area_name'=>'extra_content',//name you want for the textarea
'quicktags' => true,
'tinymce' => true
);
$id = 'editor-test';//has to be lower case
wp_editor($initial_data,$id,$settings);
for more instructions just go through the documentation in wordpress
http://codex.wordpress.org/Function_Reference/wp_editor
Following guides from here and there (found thanks to this), here's how I've managed to make something work on wordpress 3.0.5 :
<?php
add_action("admin_print_scripts", "js_libs");
function js_libs() {
wp_enqueue_script('tiny_mce');
}
wp_tiny_mce( false , // true makes the editor "teeny"
array(
"editor_selector" => "tinymce_data"
)
);
?>
<script type="text/javascript">
jQuery(document).ready(function($) {
$('a.toggleVisual').click(function() {
console.log(tinyMCE.execCommand('mceAddControl', false, 'tinymce_data'));
});
$('a.toggleHTML').click(function() {
console.log(tinyMCE.execCommand('mceRemoveControl', false, 'tinymce_data'));
});
});
</script>
<form method="post" action="">
<ul>
<li>
<span id="submit"><input class="button" type="submit"></span>
<p id="toggle" align="right"><a class="button toggleVisual">Visual</a><a class="button toggleHTML">HTML</a></p>
</li>
<li><textarea style="width:100%;" class="tinymce_data" id="tinymce_data" name="tinymce_data"></textarea></li>
</ul>
</form>
I had a similar problem, and class="theEditor" didn't help me either (at first). I was using a custom post type which didn't include the default editor (ie the supports argument didn't include 'editor').
That meant WordPress didn't include the TinyMCE code. Once I added
add_action( 'admin_print_footer_scripts', 'wp_tiny_mce', 25 );
to my functions.php (based on the code in the the_editor function in general-template.php) it worked fine (with class="theEditor").
Tested and working on wordpress 3.3.1
add to functions or plugin file.
<?php
add_filter('admin_head','ShowTinyMCE');
function ShowTinyMCE() {
// conditions here
wp_enqueue_script( 'common' );
wp_enqueue_script( 'jquery-color' );
wp_print_scripts('editor');
if (function_exists('add_thickbox')) add_thickbox();
wp_print_scripts('media-upload');
if (function_exists('wp_tiny_mce')) wp_tiny_mce();
wp_admin_css();
wp_enqueue_script('utils');
do_action("admin_print_styles-post-php");
do_action('admin_print_styles');
}
?>
for Adding new content..
<?php the_editor($id='content');?>
for editing my content
<?php the_editor($mySavedContent); ?>
this will include the entire rage of scripts / css and code needed to produce a tinyMCE textarea within either your plugin or template files..
hope this helps..
M
I had quite a bit of trouble with this. After searching all day and trying dozens of code examples, I couldn't get Wordpress theme options to save MCE values to database. I tried everything, the jQuery answers, the hidden fields, etc etc. None of that would work for me, probably because I was missing a step somewhere.
Finally I found this page: http://wptheming.com/options-framework-theme/
Download from Github & install as directed (easy). Once installed, the last tab in your theme options has an MCE editor. Enter some test paragraphs. Now open the index.php file in the download to see the examples of how to include each thingy in your page. For example, I open footer.php and add a bit of code.
The only edit I needed to make was:
<?php
$ft = of_get_option('example_editor', 'no entry');
$format_ft = wpautop( $ft, false );
echo ($format_ft);
?>
The function wpautop() from Wordpress adds in paragraph tags, since they aren't ever saved in the wp database. I put that code in my footer to display the contents of the MCE.
I need some help with removing some elements from my page with jQuery, currently I have PHP loop that builds links,
<?php
$findMore = array();
$i = 0;
foreach ($backgrounds as $row) :
?>
<a id="<?=$i;?>" class="findOutMore" href="<?=$row['backgroundAddress']; ?>">Find Out More</a>
<?php
$i++;
endforeach;
?>
This creates links that have display none, on then each time the rel of link chages some where else in the HTML then a new link is displayed using this code,
function setCurrent(i){
i = parseInt(i)+1;
$("li", "#" + options.numericId).removeClass("current");
$("li#" + options.numericId + i).addClass("current");
var rel = $('ol#controls li.current a').attr('rel');
if($('a#'+rel).hasClass('findOutMore')) {
$('a#'+rel).css({
display:'block',
})
}
};
So everytime the rel changes I get a new link on the page but i need the previous link to dissapear? Is this possible and how?
I'm not quite sure I understood your question, but if you want only one link with the 'findOutMore' class shown at a time, I would do the following (just at the end of your code):
var rel = $('ol#controls li.current a').attr('rel');
if($('a#'+rel).hasClass('findOutMore')) {
$('a.findOutMore:visible').hide();
$('a#'+rel).show();
}
You can call
$(".findOutMore").hide();
before showing the new link. The idea is that all links of interest have the same class, so that can be easily hidden.