Giter Club home page Giter Club logo

wp-front-end-editor's Introduction

Front-end Editor for WordPress

Contributors:      iseulde, wordpressdotorg, siteground
Tags:              front-end editor, inline editing
Requires at least: 4.6
Tested up to:      4.7
Stable tag:        2.2.0
License:           GPL-2.0+
Donate link:       https://iseulde.com/donate

A simple way to write with WordPress.

Description

Features

  • Draft and edit posts.
  • Autosaves. Just publish when you’re done.
  • Contextual tools. Bold, italic, strikethrough, link, headings, lists and blockquote.
  • Add media with the WordPress media library.
  • Handy shortcuts for lists (*, - or 1.), blockquote (>) and horizontal rule (---).
  • Automatically embed media from this list. Just paste the URL.
  • You can also link text by just pasting the URL over it.
  • Add a featured image, if your theme supports it.

Configure and extend

This plugin is designed to be “plug and play”, but also configurable and extensible.

Toolbars and buttons

You can add more buttons to any of the toolbars with the following filters:

  • fee_toolbar_caret for the caret,
  • fee_toolbar_inline for normal selections,
  • fee_toolbar_block for block selections.

E.g.

add_filter('fee_toolbar_inline', function($buttons){
  return array_merge($buttons, array('subscript'));
});

You may need to provide extra CSS and JS. See the Codex page and TinyMCE docs for more information about adding toolbar buttons with TinyMCE.

Linking to the editor

You can link to the editor from anywhere on the website with the normal edit link to the admin, and it will be picked up by the plugin. Use edit_post_link or similar.

Custom Post Types Support

add_post_type_support( 'page', 'front-end-editor' );

Please make sure you also support the REST API.

Disable

If you’d like to disable the editor for certain posts, you can use the supports_fee filter.

// Disable for the post with ID 1.
add_filter('supports_fee', function($supports, $post) {
  return $post->ID !== 1;
}, 10, 2);

wp-front-end-editor's People

Contributors

avryl avatar christianwach avatar eliorivero avatar ellatrix avatar iseulde avatar rhurling avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

wp-front-end-editor's Issues

View & Open Drafts button

It would be handy to have a button on the bar to view and open drafts.

Is there a place here I can see what future changes are already in the pipleline so I am not bringing up things as feature requests that are already in the works?

Some issues/Some requests

First off, i think FEE is the future of wordpress editing and you guys doing a great job!!

In the wp-front-end-editor.js on line 251 you wrote eevent instead of event, so you can't add tags. -> 251. if ( eevent.which === 13 ) <- same issue in the last version 0.4.3.

I can not edit the page which is set as static frontpage. Every other page works, but in the frontpage case it says: it looks like nothing was found at this location. Maybe try one of the links below or a search?

If i open the insert Media panel with the button it logs a failure in the console:
-> ReferenceError: Can't find variable: wpActiveEditor
Tested in the latest chrome and safari browser!!

I made a few plugins for the wp-front-end-editor 0.3.2, to test if i could extend it to fit my needs. And yes it will!!
So it would be awesome if you could build a steady plugin/module system, even if wp-front-end-editor is in a very early state. Maybe this also would make it possible to take the Meta Modal back on track!! Or some sort of. And it would be easy to send you a plugin/module to include in builds.

And i would suggest to put the menu items on the wp-admin-bar away from the save, cancel button, i.e. pull them to the left side so you can easily different them visually.

Thank you!!

Question about Shortcodes

Hi Avryl,

The plugin is looking great so far, I've been testing in on my staging site and it's really awesome.

I have a question about shortcodes - do you plan on eventually making these process to display the content side the shortcode in the way the shortcode functions for the frontend?

Thanks,
Alex

Make sure everything works with FORCE_SSL_ADMIN

Hello,

I discovered an issue were if I force my web site to FORCE_SSL_ADMIN that I am unable to save web pages unless the editor opens in a SSL mode on the web site. I have a self-signed certificate with FORCE_SSL_ADMIN and LOGIN enabled which prevents the default editor in both the latest Git and plugin stable release not to work. I came up with some pseudo code to replace in the class file to allow for saving of work in SSL. The editor will open in SSL and then save properly.

Some modifications might have to be made, but this is a rough cut to get going.

[code]

public static function edit_link( $id ) {

    $post = get_post( $id );

    if ( ! $post )

        return;

    $edit_url = "";

    if ( $id == get_option( 'page_on_front' ) )
    {
        $edit_url = home_url( '?editing' );
        if (FORCE_SSL_ADMIN) $edit_url = str_ireplace("http://", "https://", $edit_url);
        return $edit_url;
    }

    $permalink = get_permalink( $post->ID );

    if ( strpos( $permalink, '?' ) !== false )
    {
        $edit_url = add_query_arg( 'edit', '', $permalink );
        if (FORCE_SSL_ADMIN) $edit_url = str_ireplace("http://", "https://", $edit_url);
        return $edit_url;
    }

    if ( trailingslashit( $permalink ) === $permalink )
    {
        $edit_url = trailingslashit( $permalink . 'edit' );
        if (FORCE_SSL_ADMIN) $edit_url = str_ireplace("http://", "https://", $edit_url);
        return $edit_url;
    }

    $edit_url = trailingslashit( $permalink ) . 'edit';
    if (FORCE_SSL_ADMIN) $edit_url = str_ireplace("http://", "https://", $edit_url);
    return $edit_url;


}

[/code]

Thanks,
Chris Zenzel

Issue with Permalinks %postname%

Issue:
When permalinks are set to %postname%, clicking the edit link takes you to a 404 page.

Expected:
Show show the Edit page.

Theme & WP Version
TwentyFourteen. WP 3.8.

HTML Comments and Autosaves

There is an issue with autosaving and html comments.
when there are html comments in the text and we autosave via the heartbeat api the comments don't get replaced, so that on a restore without saving after, the html comments end up visible in the post

Steps to reproduce:

  1. Open a post with the editor
  2. Add some html comment
  3. wait for heartbeat or do wp.heartbeat.connectNow() in console
  4. refresh page, ignoring warning
  5. exit editor

tried to fix it by adding the preg_replace to wp_autosave function (class-wp-front-end-editor.php:303) but that didn't work and i'm not sure why.

update:
added this
$post_data['content'] = preg_replace( esc_html( "/<!--(.*?)-->/s" ), "<!--$1-->", $post_data['content'] );

Can't cancel / Undo Feature Image removal

Steps to reproduce:

  1. create a post with a featured image
  2. edit that post on the front end with the plugin installed
  3. click the "X" to remove the featured image
  4. Ooops! that's not what I wanted to do.... but how to undo?
  5. Click the X in admin bar (or Esc) to cancel your edits. Feature image is still gone.

Now, in the back-end we can't undo a feature image removal either. However, it's pretty unlikely you will do it by accident because the link "Remove Feature Image" is pretty clear.

In this case it was the UI that was deceiving - the "X" could have meant any number of things. Since this was my first exposure to Front End Editor, I wasn't really sure what was going on when I hovered over the post and the Featured Image was the first thing to highlight. I thought maybe I was just cancelling the image edit.

Suggestion: make the UI more clear or add a confirmation - Do you want to remove the Feature Image from this post? Or use a different icon, like a trash icon or something.

Table / Cell / Row properties don't do anything

I'm trying out the WordPress Front-End Editor v. 0.8.5 plugin on WordPress 3.8.1. When I create a table, it works fine, and I can merge and split cells, add and remove rows and columns, and manipulate the text. However, when I click on Table Properties, Cell Properties, or Row Properties, nothing happens.

I just installed the plugin it on a clean installation of WordPress, to eliminate any plugin/theme conflicts. Even with no other plugins and Twenty Fourteen as the theme, the * Properties don't do anything.

Tested in:

  • Firefox 26.0 (on Ubuntu)
  • Chromium Version 32.0.1700.102 Ubuntu 12.10 (32.0.1700.102-0ubuntu0.12.10.1~20140128.878.1)

My co-worker saw the same issue in Firefox 27.0.1 on Windows 7.

Support post formats

Changing the post and body class is not enough, sometimes the changes in the php templates are too big. E.g. switch from a standard format to a link format with the Twenty Twelve theme.

Escaped Shortcodes Break

When using a site for documentation, it may be necessary to escape shortcodes by using double brackets. However, the editor renders double-bracketed shortcodes as single-bracketed, losing the double-brackets on save.

Thus,

[[gallery]]

becomes

[gallery]

after using the front-end-editor.

How to Implement in a Theme

Hi team,

I have been playing around with this amazing plugin and I would really like to get this amazing thing working on my test website.

Unfortunatly I've not been able to test it out, the fault is of my own theme code not the plugin. But I was just wondering, there is some documentation about which kind of hook you're using to implement this feature?

I am use to write tutorials and courses about WordPress (in Italian but as you can see I able to write something in English too ;) ) so if you need some help under this aspect I'll be more than happy to help you out. Just some advice to let me begin and I'll be on my own :)

Force_SSL_Admin - Link Variable Issue

Hi,

I don't mean to reopen a bug under a new report, but I can't reopen the previous issue. It looks like links are overwriting in the function. Please see the last comment in #48. It looks like I have fixed it by establishing an if condition of !$link.

Thanks,
Chris Zenzel

Text edits not saving when Jetpack connected to WordPress.com

By http://profiles.wordpress.org/globalsprawl
Original: https://plugins.trac.wordpress.org/ticket/2132

Hi,

Firstly, thank you for an excellent plugin, and aware this is still in development.

I cant seem to save the edits I make to my site e.g. editing the front page of www.globalsprawl.com with username: ***; password: ***, which has rights as an "editor", does not put the change through when pressing update.

Further, once edits have been made is there a way to see a log of edits in the front end or will this only be possible in the back end?

Thanks,
Joseph

i18n breakpoint

Hey there,

Do you plan to ship an i18ned version with the release?

It would be nice to have that translation files to take part of localization for further updates.

Thank you in advance!

_wp_post_thumbnail_html does not take size paramter

Right now you use _wp_post_thumbnail_html to generate the thumb html. and then filter the output. But sence _wp_post_thumbnail_html dose not take a size paramter we need to write our own.

I also added :

to the "post_thumbnail_html" function relay img size to the javascript.

Visualise nextpage and more tags

In Version 0.3.2, the more tag is invisible and I would suggest making it visible just as the backend editor does, separating the content before and after it.

Also, the nextpage tag is ignored, and should probably be treated the same way. Its disabled in wordpress by default, but it is in, and probably should be supported.

Use in multisite, how?

I have a wordpress multi-site setup and as the network admin I installed the wp-front-end-editor but I am not sure how to activate it for the other users or myself. Has anyone ever used this on the multi-site setup?

Insert from URL throws JS Error

If you try to add an image via "Insert from URL" the error Uncaught ReferenceError: QTags is not defined is thrown somewhere.

i would think it's just a script that needs to be included as well

Malformed Edit Link on Non-Post CTPs

I'm noticing a bug, where this plugins, along with Co-Authors-Plus (A VIP plugin), cause a malformed edit link url when using get_edit_post_link or edit_post_link inside the loop.

On a post with co-authors I have added to my adminbar an edit link for all guest authors attached to the post. that works fine, but when Im using Wp-Front-End Editor, trying to do the same inside the loop ends up with a malformed url, like so this:
WORDPRESSURL/?post_type=guest-author&p=107edit/

While the normal edit link outside of the loop, looks like this.
WORDPRESSURL/wp-admin/post.php?post=107&action=edit

Co-authors-plus CTP is currently set to public but have thought about making it private. Perhaps WP-Front-End-Editor can check the status and only change the edit links for public post types.

Update category and tag classes as they're changed

Any option that might affect the lay out and content of the page should trigger a refresh when it's updated.
Most important are post formats.

Comment:
I've been thinking about this and it might be better not to refresh. It would mean autosaving content with post_meta and taxonomies and refreshing the page every time the modal closes.
For post formats we can change the class, and maybe for categories and other taxonomies too.

Ported from: https://plugins.trac.wordpress.org/ticket/2116

Need custom Hooks to add custom Meta box library

Amazing plugin have been using it since the last few months. A few hooks needs to be added into the system so that it is easier to add custom libraries for postmeta handling.

In Short: I need a hook to add a custom meta modal section in the plugin.

Returning to back-end post editor returns wrong post

This issue has only occurred to me so far on post previews for unpublished posts, as I haven't yet tested this with published posts since I installed this on a live site. (Bad idea, I know, but it was a test.)
Hitting the "return to admin screen" button in the top right returns to the post editor. However, the post editor brings up the wrong post, complete with the wrong post_id in the URL. (I went from 706 to 259.)
Unable to determine why it brought up that specific post.

Originally posted by: https://profiles.wordpress.org/adrian.dakota
Ported from: https://plugins.trac.wordpress.org/ticket/2129

Consideration of structural elements

By @Idealien

What has been built thus far is a positively beautiful! Big props to all who have helped make it happen to date. I'm creating this ticket to prime (1) the conversation about being able to edit structural elements within a front-end editing environment.

Structural elements: rows, columns, grids, fluid containers, etc. I can't offer any meaningful suggestion on how they would be managed between editor and markup, but can offer a as-is and desired use case examples that might help?

Current Use Case Scenario

A nice combination for building templates with a Bootstrap based theme and some external tools:

  • Activate a child theme from wp-bootstrap - http://320press.com/wpbs/
  • Login to easel.io to drag & drop a mockup with static content
    *Use its' export to html/css feature
  • Paste CSS into child style.css
  • Paste html into page template
  • Use ACF to setup meta fields for admin data capture
  • Replace static elements with dynamic WP generated tags

I can define all the rows, columns, etc that I want from bootstrap CSS, but the markup is confined to pre-defined templates. Users have as much flexibility in creation of content as I have with this mix of tools.

Future Front-End Editor Scenario

  • Activate a child theme from wp-bootstrap
  • Go to front-end of site and create new page (or CPT)
  • Drag structural elements onto page
  • Add content blocks into defined areas
  • Press Gear off admin bar to get to meta data entry (if needed)

This probably brings up some related questions about whether/how short codes and widgets could be registered to the front-end editor that may be better suited for other feature plugins to solve. But, I think with the amount of editors which offer columns-via-short codes with a UI in the admin it would be well suited for consideration for front-end editor.

(1) Prime or continue the conversation:
http://torquemag.io/rethinking-the-wordpress-editor/

Left hand side edit buttons missing

Hi, The icons on the Right hand side are fine, but I can't see the icons on the Left hand side (the edit buttons eg. bold, italic, blockquote etc).

I see this error in the Javascript console:

Uncaught TypeError: Cannot call method 'getContent' of undefined wp-front-end-editor.js?ver=0.8.5:98
$.extend.post.content wp-front-end-editor.js?ver=0.8.5:98
getPostData autosave.js?ver=0.8.5:25
save autosave.js?ver=0.8.5:468
(anonymous function) autosave.js?ver=0.8.5:498
x.event.dispatch jquery.js?ver=1.10.2:4
v.handle jquery.js?ver=1.10.2:4
x.event.trigger jquery.js?ver=1.10.2:4
e.event.trigger jquery-migrate.min.js?ver=1.2.1:2
(anonymous function) jquery.js?ver=1.10.2:4
x.extend.each jquery.js?ver=1.10.2:3
x.fn.x.each jquery.js?ver=1.10.2:3
x.fn.extend.trigger jquery.js?ver=1.10.2:4
i heartbeat.min.js?ver=3.8.1:1
j heartbeat.min.js?ver=3.8.1:1
l heartbeat.min.js?ver=3.8.1:1
p heartbeat.min.js?ver=3.8.1:1
(anonymous function) heartbeat.min.js?ver=3.8.1:1
x.event.dispatch jquery.js?ver=1.10.2:4
v.handle jquery.js?ver=1.10.2:4

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.