Skip to content

Instantly share code, notes, and snippets.

@mrme44

mrme44/Alternate Example.php

Created July 30, 2024 14:08
Show Gist options
  • Save mrme44/2c23c3ec8308695993771f4feb2297e8 to your computer and use it in GitHub Desktop.
Save mrme44/2c23c3ec8308695993771f4feb2297e8 to your computer and use it in GitHub Desktop.
Download ZIP
TinyMCE in WordPress
Raw
Alternate Example.php
$profileUrl = get_author_posts_url(get_current_user_id());
$postID = get_the_ID();
$author = get_the_author();
$includes_url = includes_url( 'js/tinymce/tinymce.min.js' );
if(is_user_logged_in()){
global $post;
$userData = get_userdata(get_current_user_id());
$displayName = $userData->display_name;
$formTarget = home_url("/wp-comments-post.php");
$comment = get_label("comment");
$comment_cap = get_label("comment", "capital");
$comment_verb = get_label("comment", "verb");
global $ow_my_settings;
if ($ow_my_settings['editor'] === 'inline'){
$theme = 'inlite';
$inline = 'true';
} else {
$theme = 'modern';
$inline = 'false';
}
if ($post && $post->post_type === 'status-update'){
$header = 'Reply';
$headerSubText = '';
$placeholder = "$comment_cap to $author...";
} else{
$header = 'Leave Feedback';
$headerSubText = "<p class='logged-in-as'> Hi <a href='$profileUrl' aria-label='Logged in as $displayName. View your profile.'>$displayName</a>. Feel free to leave a $comment that follows our <a href='/members/critiquing/'>$comment_verb guidelines</a>.</p>";
$placeholder = "My personal thoughts on what $author has written...";
}
echo <<<EOD
<section id="comment-wrap">
<div id="comment-section" class="nocomments">
<!-- If comments are open, but there are no comments. -->
</div>
<div id="respond" class="comment-respond">
<h3 id="reply-title" class="comment-reply-title">
<span>$header</span>
<small><a rel="nofollow" id="cancel-comment-reply-link" href="/#respond" style="display:none;">cancel reply</a></small>
</h3>
<form action="$formTarget" method="post" id="commentform" class="comment-form">
$headerSubText
<p class="comment-form-comment">
<label for="comment" style="display: none;">My personal thoughts on what $author has written...</label>
<div id="comment" name="comment" cols="45" rows="32" maxlength="65525" aria-required="true" required="required">
<p data-placeholder="$placeholder" data-placeholder-replies="Leave a reply..." id="comment-box" class="show-placeholder"></p>
</div>
</p>
<script type="text/javascript" src="$includes_url"></script>
<script type="text/javascript">
tinyMCE.init({
selector: "#comment",
theme : "$theme",
mode: "specific_textareas",
menubar: false,
elementpath: false,
skin: "lightgray",
selection_toolbar: 'bold italic underline | h2 h4 | bullist numlist | quicklink pastetext',
selection_toolbar2: 'link unlink | blockquote strikethrough | indent outdent ',
elements: 'comment',
inline: $inline,
//insert_toolbar: 'quickimage | indent outdent',
insert_toolbar: '',
min_height: 100,
invalid_elements : "script",
setup: function (editor) {
editor.on('init', function(){
//show placeholder once the editor loads
if (tinyMCE.activeEditor.getContent() == ''){
jQuery(tinyMCE.activeEditor.bodyElement).find("#comment-box").addClass("show-placeholder")
//jQuery(tinyMCE.activeEditor.bodyElement).find("#comment-box").attr("data-placeholder", "My personal thoughts on what $author has written...")
//tinyMCE.activeEditor.setContent("<p id='imThePlaceholder' data-placeholder='></p>");
}
});
//maybe show placeholder when we loose focus
editor.on('blur',function(){
if (tinyMCE.activeEditor.getContent().replace(/\s/g,'') == ''){
jQuery(tinyMCE.activeEditor.bodyElement).find("#comment-box").addClass("show-placeholder")
}
});
//remove placeholder on focus
editor.on('focus',function(){
jQuery(tinyMCE.activeEditor.bodyElement).find("#comment-box").removeClass("show-placeholder");
});
//or remove placeholder on click, to make it easier to resolve a problematic state that can occur
//if the comment box gains focuses before these JS event are registered
editor.on('click',function(){
jQuery(tinyMCE.activeEditor.bodyElement).find("#comment-box").removeClass("show-placeholder");
});
}
});
</script>
<p class="form-submit">
<span class="et_pb_button submit-text critiques">Submit $comment_cap</span>
<span class="et_pb_button submit-text replies">Reply</span>
<input name="submit" type="submit" id="submit" class="submit et_pb_button hide" value="Submit $comment_cap">
<input type="hidden" name="comment_post_ID" value="$postID" id="comment_post_ID">
<input type="hidden" name="comment_parent" id="comment_parent" value="0">
</p>
<input type="hidden" id="_wp_unfiltered_html_comment_disabled" name="_wp_unfiltered_html_comment" value="e8ea64f33c">
<script>(function(){if(window===window.parent){document.getElementById('_wp_unfiltered_html_comment_disabled').name='_wp_unfiltered_html_comment';}})();</script>
</form>
</div><!-- #respond -->
</section>
<!--<script>jQuery("#left-area > #comment-wrap #submit").val("Submit $comment_cap")</script>-->
<!-- transfer clicking on the button to the submit input -->
<script>jQuery("#commentform .submit-text").click(function(){return jQuery(this).parent().find("input[type=submit]").click()})</script>
EOD;
}
Raw
disable-emojis.php
/**
* Disable emojis
*/
public function disable_emojis() {
remove_action( 'wp_head', 'print_emoji_detection_script', 7 );
remove_action( 'admin_print_scripts', 'print_emoji_detection_script' );
remove_action( 'wp_print_styles', 'print_emoji_styles' );
remove_action( 'admin_print_styles', 'print_emoji_styles' );
remove_filter( 'the_content_feed', 'wp_staticize_emoji' );
remove_filter( 'comment_text_rss', 'wp_staticize_emoji' );
remove_filter( 'wp_mail', 'wp_staticize_emoji_for_email' );
}
public function disable_emojis_tinymce($plugins){
if (is_array($plugins)) {
return array_diff($plugins, array('wpemoji'));
} else {
return array();
}
}
public function disable_emojis_remove_dns_prefetch($urls, $relation_type) {
if ('dns-prefetch' == $relation_type) {
/** This filter is documented in wp-includes/formatting.php */
$emoji_svg_url = apply_filters('emoji_svg_url', 'https://s.w.org/images/core/emoji/2/svg/');
$urls = array_diff($urls, array($emoji_svg_url));
}
return $urls;
}
Raw
Example usage
Grabbing content from tinyMCE
"content": $($("#writingpiece_ifr")[0].contentWindow.document).find("#tinymce").html()
Raw
mini-editor.php
<?php
/* Creates a mini editor for the user to post new items.
If the user is not logged in, than this will not render anything. */
if (is_user_logged_in()):
global $ow_my_settings;
$tabs = 'both';
if (get_post_type() == "groups"){
$tabs = get_field('tabs', $post->ID);
}
$default_tab = 'status-update';
$non_default_tab = 'add-piece';
$non_default_tab_acf = 'writing_piece';
/* There is also stuff that needs to change in scripts.js when changing the default tab */
?>
<div class="forum-archive-editor <?php echo ($ow_my_settings['editor'] === 'inline') ? '' : 'always-expanded' ?>" data-action="<?php echo $tabs == $non_default_tab_acf ? $non_default_tab : $default_tab;?>">
<!-- This form gets intercepted by the JS before it is submitted -->
<form action="/pro/?add=true" method="post">
<div class="tabs">
<?php if ($tabs != 'writing_piece'): ?>
<div class="tab active" data-tab="status_update" tabindex=5><div class="slant"><?php echo get_label("status update", "capitalize"); ?></div></div>
<?php endif; ?>
<?php if ($tabs != 'status_update'): ?>
<div class="tab <?php if ($tabs == 'writing_piece'){ echo 'active';} ?>" data-tab="writing_piece" tabindex=4><div class="slant">Add Writing Piece</div></div>
<?php endif; ?>
</div>
<input name=title tabindex=6 placeholder="Enter a title" class="writing-piece-title" value="" maxlength=100 />
<input type=hidden name=content id="mini-editor-form-content" value="" required />
<div id="mini-editor" name="mini-editor" tabindex=7 cols="45" rows="32" maxlength="65525" aria-required="true" required="required" class="show-placeholder">
<p class="mini-editor-p" data-status-update-placeholder="What's going on with your writing?" data-writing-piece-placeholder="Type or copy and paste your writing piece here."></p>
</div>
<div class='controls'>
<?php
if (get_post_type() == "groups"):
global $post;
$groupId = $post->ID;
$groupTitle = get_the_title($groupId);
?>
<input type=hidden class="group-select" value="<?php echo $groupId ?>"></input>
<script>
// Redefining global variables created in script.js to change the placeholders.
window.writerForum_miniEditor_addPiecePlaceholder = 'Type or copy and paste your writing piece for the <?php echo $groupTitle ?> group...';
window.writerForum_miniEditor_statusUpdatePlaceholder = 'Let the <?php echo $groupTitle ?> group know what\'s going on with your writing.';
</script>
<?php
else: ?>
<p class="group-select-label">Post to group</p>
<select class="group-select">
<?php
$groups = Groups::getUserGroups();
foreach ($groups as $groupId) {
?> <option data-tabs="<?php echo get_field('tabs', $groupId); ?>" value="<?php echo $groupId ?>"><?php echo get_the_title($groupId); ?></option> <?php
}
?>
</select>
<?php endif; ?>
<input type=submit class="submit" value="Submit"></input>
<input type=hidden name="add" value="true" >
</div>
</form>
</div>
<?php
$includes_url = includes_url( 'js/tinymce/tinymce.min.js' );
if ($ow_my_settings['editor'] === 'inline'){
$inline = 'true';
$theme = 'inlite';
$min_height = 100;
} else{
$inline = 'false';
$theme = 'modern';
$min_height = 10;
}
echo <<<EOD
<script type="text/javascript" src="$includes_url"></script>
<script type="text/javascript">
tinyMCE.init({
selector: "#mini-editor",
theme : "$theme",
mode: "specific_textareas",
menubar: false,
elementpath: false,
skin: "lightgray",
selection_toolbar: 'bold italic underline | h2 h4 | bullist numlist | quicklink quickimage pastetext',
selection_toolbar2: 'link unlink | blockquote strikethrough | indent outdent ',
elements: 'mini-editor',
plugins: 'paste',
inline: $inline,
//insert_toolbar: 'quickimage | indent outdent',
insert_toolbar: '',
min_height: $min_height,
invalid_elements : "script",
setup: function (editor) {
editor.on('init', function(){
//show placeholder once the editor loads
if (tinyMCE.activeEditor.getContent() == ''){
jQuery(tinyMCE.activeEditor.bodyElement).addClass("show-placeholder")
//jQuery(tinyMCE.activeEditor.bodyElement).attr("data-placeholder", "My personal thoughts on what \$author has written...")
//tinyMCE.activeEditor.setContent("<p id='imThePlaceholder' data-placeholder='></p>");
}
});
//maybe show placeholder when we loose focus
editor.on('blur',function(){
if (tinyMCE.activeEditor.getContent().replace(/\s/g,'') == ''){
jQuery(tinyMCE.activeEditor.bodyElement).addClass("show-placeholder")
}
});
//remove placeholder on focus
editor.on('focus',function(){
jQuery(tinyMCE.activeEditor.bodyElement).removeClass("show-placeholder");
});
//or remove placeholder on click, to make it easier to resolve a problematic state that can occur
//if the mini-editor box gains focuses before these JS event are registered
editor.on('click',function(){
jQuery(tinyMCE.activeEditor.bodyElement).removeClass("show-placeholder");
});
}
});
</script>
<script>jQuery(".forum-archive-editor form .submit").click(function(){jQuery("#mini-editor-form-content").val( jQuery("#mini-editor").html() )})</script>
EOD;
?>
<?php endif; ?>
Raw
styles.scss
.forum-archive-editor{
background: $editor-bckrd;
position: relative;
height: 175px;
transition: height .6s;
margin-bottom: 55px;
&.expanded,
&.always-expanded {
height: 540px !important;
}
.status-update .tabs {
background: #d5d5d5;
}
.tabs {
font-family: Avenir, Helvetica;
font-size: 15px;
font-weight: bold;
color: #666666;
height: $tab-height;
display: flex;
justify-content: center;
align-items: center;
.tab {
display: inline-block;
padding-left: 20px;
padding-right: 20px;
background: darken($editor-bckrd, 8%);
cursor: pointer;
width: 50%;
text-align: center;
&:hover:not(.active) {
background: darken($editor-bckrd, 15%);
box-shadow: inset 4px -1px 3px -2px #c2c2c2, inset -4px 0px 3px -2px #c2c2c2;
}
&.active {
background: $editor-bckrd;
color: #41abf3;
}
/*&:first-of-type{
transform: skew(-5deg) translateX(5px);
.slant{
transform: skew(5deg);
}
}*/
}
}
form {
height: 100%;
border: 1px solid #eaeaea;
&:focus{
border: 1px solid #999;
}
}
$title-box-height: 36px; // This is just an observation of what the title box's height really is. It isn't used to set a height.
.writing-piece-title,
textarea,
.mce-tinymce,
#mini-editor {
overflow-y: auto;
margin-top: 4px;
padding-top: 4px;
margin-bottom: 8px;
padding-left: 10px;
padding-right: 5px;
margin-left: 2px;
background: #efefef;
width: calc(100% - #{$controls-width} - 7px - 1px - 3px); //container - length of controls area - distance to submit button - margin-left - a little extra space
border: 1px solid #eee;
&:hover{
background: #f2f2f2;
box-shadow: inset 0 0 10px 3px #f2f2f2, 0 0 10px 3px #eee;
}
}
.mce-tinymce{
width: 550px !important;
box-shadow: none;
&:hover{
background: #efefef;
box-shadow: none;
}
}
.mini-editor-p,
.mini-editor-p span{
font-size: 14px !important;
}
#mini-editor_ifr{
height: 363px !important;
}
.writing-piece-title{
font-weight: bold;
font-size: 18px;
}
.writing-piece-title:focus{
background: #fbfbfb;
box-shadow: inset -1px -1px 5px 0px rgba(238,238,238,0.5);
}
@media(max-width: 450px){
.writing-piece-title{
width: calc(100% - 3px);
margin-top: 20px;
}
.writing-piece-title:hover{
box-shadow: none;
}
}
.writing-piece-title{
transition: height .6s;
}
textarea,
.mce-tinymce,
#mini-editor {
transition: top .6s, height .6s;
position: relative;
top: -36px - 17px; // -36px - a number that seems to be determined by the font size
display: block;
height: calc(100% - #{$tab-height} - 2*8px + 4px); //container height - tabs bar - margins (top and bottom) + a little extra room
resize: none;
}
textarea:focus,
#mini-editor:focus,
.tabs:active + textarea,
.tabs:active + #mini-editor{
background: #fdfdfd;
box-shadow: inset -1px -1px 5px 0px rgba(238, 238, 238, .5);
}
.mce-tinymce:focus,
&.expanded textarea,
&.expanded #mini-editor,
&.expanded .mce-tinymce {
top: 0;
height: calc(100% - #{$tab-height} - 2*8px - #{$title-box-height} + 4px - 17px); //container height - tabs bar - margins (top and bottom) - height of title box + a little extra room - some extra room (same as when its not expanded)
}
&.always-expanded .mce-tinymce,
&.expanded .mce-tinymce{
top: 0;
height: calc(100% - #{$tab-height} - 2*8px - #{$title-box-height} + 4px - 24px);
}
.controls {
position: absolute;
bottom: 7px;
right: 7px;
width: $controls-width;
font-size: 1.2em;
}
.group-select-label {
font-family: Avenir, Helvetica;
}
.group-select {
display: block;
width: 100%;
margin-bottom: 8px;
background: #f9f9f9;
border: 2px solid black;
}
.submit {
width: 100%;
font-family: Avenir, Helvetica;
border: 1px solid #d4d4d4;
padding: 5px 10px;
background: #f9f9f9;
// color: #39A8F3;
color: #FF6633;
box-shadow: inset 1px 1px 3px -1px #bfbfbf, inset 0px 10px 13px -3px #f9f9f9;
cursor: pointer;
letter-spacing: 0.09px;
text-transform: lowercase;
/*change the button to be more like the other buttons on the site*/
box-shadow: none;
font-size: 1.2em;
border: 2px solid #FF6633;
border-radius: 3px;
&:hover {
background: #fff;
color: #2ea3f2;
color: darken(#FF6633, 10%);
}
&:disabled {
color: #a2a2a2;
border-color: #b3b3b3;
background: #EBEBE4 ;
}
}
&[data-action="status-update"] .writing-piece-title{
visibility: hidden;
}
@media(max-width: 785px){
.group-select-label{
margin: 0 !important;
}
}
@media(max-width: 450px){
height: 192px;
#mini-editor,
textarea,
.mce-tinymce{
width: 100%;
}
.expanded textarea,
.expanded #mini-editor,
.expanded .mce-tinymce,
.always-expanded .mce-tinymce{
height: calc(100% - 32px - 2*8px + 7px - 105px);
}
.controls{
width: calc(100% - 14px);
}
}
@media(max-width: 355px){
.tabs .tab{
line-height: 1.15rem;
padding-top: .25rem;
padding-bottom: .25rem;
}
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment