The functions below I'm using to add my custom buttons to the TinyMCE. The buttons are displaying fine while in the "Visual" mode. However, when I switch over to the "Text" mode, I'm not seeing them.
In the script below, I've commented out the lines that filter for rich_editing mode. What am I missing?
function addbuttons() {
global $page_handle;
// Don't bother doing this stuff if the current user lacks permissions
if ( !current_user_can('edit_posts') && !current_user_can('edit_pages') )
return;
// Add only in Rich Editor mode
//if ( get_user_option('rich_editing') == 'true') {
$svr_uri = $_SERVER['REQUEST_URI'];
if ( strstr($svr_uri, 'post.php') || strstr($svr_uri, 'post-new.php') || strstr($svr_uri, 'page.php') || strstr($svr_uri, 'page-new.php') || strstr($svr_uri, $page_handle) ) {
add_filter("mce_external_plugins", array (&$this, 'add_tinymce_plugin' ), 5);
add_filter('mce_buttons', array (&$this, 'register_button' ), 5);
add_filter('mce_external_languages', array (&$this, 'add_tinymce_langs_path'));
}
//}
}
function register_button($buttons) {
array_push($buttons, 'separator', 'nextpage' , 'CustomCodes' );
return $buttons;
}
function add_tinymce_plugin($plugin_array) {
$plugin_array['CustomCodes'] = $this->path . 'plugins/custom/editor_plugin_src.js';
return $plugin_array;
}
function add_tinymce_langs_path($plugin_array) {
// Load the TinyMCE language file
$plugin_array[$this->pluginname] = CB_ADMIN . '/tinymce/langs.php';
return $plugin_array;
}
Related
When my text has center or right aligment and press enter key no problem. But when typing shift+enter or alt+enter or ctrl+enter, the aligmnet is not working.
Image capture
Anyone can help ?
Thanks.
you can use handleReturn to solve this,just like
<DraftEditor handleReturn={handleReturn} />;
function isSoftNewlineEvent(e: React.KeyboardEvent<HTMLInputElement>) {
return (
e.which === 13 &&
(e.getModifierState('Shift') || e.getModifierState('Alt') || e.getModifierState('Control'))
);
}
// handleReturn
const handleReturn = (event: SyntheticKeyboardEvent) => {
if (isSoftNewlineEvent(event)) {
setEditorState(RichUtils.insertSoftNewline(editorState));
return 'handled';
}
return 'not-handled';
};
I believe my if/else statements are not running and end up not making the changes to the elements I target. When I run it, I believe the parent element is not being called correctly for the first function. For the second function, it is stating that it's not a node?
Function expandArticleBody()
Find the article in which the button that was clicked belongs.
If the text on the button that was clicked is a V, then set the display property of the article's body to none. Also set the text on the button to >.
If the text on the button that was clicked is not a V, then set the display property of the article's body to block. Also set the text on the button to V.
function highlightArticle()
Find the article in which the button that was clicked belongs.
If the text on the button is +, then add the .highlight class to the article and set the text on the button to -.
If the text on the button is not +, then remove the .highlight class from the article and set the text on the button to +.
function expandArticleBody() {
const allBtns = document.querySelectorAll(".expand_button");
allBtns.forEach((btn) => {
btn.addEventListener("click", (event) => {
let parent = event.target.parentElement;
let text = event.target.innerHTML;
if(text !== "V"){
parent.style.display = "block";
event.target.innerHTML = "V";
} else if(text == "V"){
parent.style.display = "none";
event.target.innerHTML = ">";
}
});
});
}
function highlightArticle() {
const highlight = document.querySelectorAll(".highlightBtn");
highlight.forEach((btn) => {
btn.addEventListener("click", (event) => {
let text = event.target.innerHTML;
if(text == "+"){
event.target.classList.add(".highlight");
event.target.innerHTML = "-";
} else if(text !== "+"){
event.target.classList.remove(".highlight");
event.target.innerHTML = "+";
}
});
});
}
I have an app with tabs, where the first tab I show the latest post and an input search where a user can filter the results.
When user makes a search, I want to switch to the second tab, which will manage the search and display the results. I want to keep the first tab showing the latest post.
The code for switching to the second tab is:
$scope.search_posts = function() {
if ( !angular.isUndefined($scope.searchText) && $scope.searchText.length > 2 ) {
$scope.searchText = '';
$scope.show_search_box = false;
$ionicTabsDelegate.select($ionicTabsDelegate.selectedIndex() + 1);
} else {
$ionicLoading.show({ template: 'You must write at least 3 characters long.', noBackdrop: false, duration: 2000 });
}
}
...but I do not know how to send the 'searchText' as a parameter when switching.
How can I accomplish this?
you could use $rootScope to store shared data:
$scope.search_posts = function() {
if ( !angular.isUndefined($scope.searchText) && $scope.searchText.length > 2 ) {
$rootScope.searchTextFromTabOne = $scope.searchText;
$scope.searchText = '';
$scope.show_search_box = false;
$ionicTabsDelegate.select($ionicTabsDelegate.selectedIndex() + 1);
} else {
$ionicLoading.show({ template: 'You must write at least 3 characters long.', noBackdrop: false, duration: 2000 });
}
}
//in tab two's controller
$scope.searchText = $rootScope.searchTextFromTabOne;
I'm trying to write my own CodeMirror mode as documented here.
My objective is to change the color of specific keywords. For example, any "aaa" word needs to be red and any "bbb" word needs to be blue. Any other words need to have the default color.
This is my unsuccessful attempt (see jsfiddle). How to make this work?
HTML:
<textarea rows="4" cols="30" id="cm" name="cm">aaa bbb ccc</textarea>
CSS:
.style1 { color: red; }
.style2 { color: blue; }
Javascript:
CodeMirror.defineMode("mymode", function() {
return {
token: function(stream,state) {
if (stream.match("aaa") ) {
console.log("aaa found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style1";
}
else if (stream.match("bbb") ) {
console.log("bbb found");
while ((ch = stream.next()) != null)
if (ch == " " && stream.next() == " ") break;
return "style2";
}
else
return null;
}
};
});
var editor = CodeMirror.fromTextArea(document.getElementById('cm'), {
mode: "mymode",
lineNumbers: true
});
You had two problems.
CodeMirror prefixed cm- to classes used to style tokens. The styles in your CSS have to account for that.
You were skipping the rest of the line after finding "aaa" or "bbb", althrough your description of your goal sounds like you didn't want to do that.
I've fixed both in the jsfiddle. You may also want to only match full words (currently fooaaabar also has aaa highlighted). To do that, first have your tokenizer read a whole word (stream.eatWhile(/\w/)), and then see if the resulting word is one of the words you are looking for (stream.current() == "aaa").
I wanted to implement crrm.move.check_move with the functionality that I can check whether the node is moved or copied and whether the user has the rights to do that. My code looks like this:
var _isUserHasRightToMoveNodes = false; // set depending on user rights
var _isUserHasRightToCopyNodes = true; // set depending on user rights
var _jsTreePlugins = ["themes", "html_data", "ui"];
if ((_isUserHasRightToMoveNodes) || (_isUserHasRightToCopyNodes)) {
_jsTreePlugins.push("dnd");
_jsTreePlugins.push("crrm");
}
$( this ).jstree({
plugins: _jsTreePlugins,
...,
crrm : {
"move" : {
"check_move" : function( m ) {
// wenn der Knoten verschoben wird
if ((!_isUserHasRightToMoveNodes) && ((m.cy == null) || (!m.cy)))
return false;
// wenn der Knoten kopiert wird
if ((!_isUserHasRightToCopyNodes) && (m.cy != null) && (m.cy))
return false;
return true;
}
}
}
});
When I copy a node it appears not to be possible (red cross icon) but it's still being copied (as it should).
I have debugged with firebug and found out, that m.cy is only defined as soon as the node is dropped, but not on mouseover over other nodes, thus the red cross icon. But of course as soon as it is dropped, m.cy is defined and the node is copied, as it's supposed to be.
Am I doing something wrong or is this a bug? Is there any workaround for that?
Thanks for any help!
Tanja
Your return is not as expected - Sample code below should help you:
"crrm": {
"move" : {
"check_move" :
function(tree)
{
//check the condition to enable the drag
if(tree.r.attr("id") != ...){
return {
after : true,
before : false,
inside : false
}
}else{
return false;
}
}
}
}