JasmanXcrew

<p><strong>Creating a web page you like professionals</strong></p>
<p>GUI-VisualEditor (VE) is a project to provide a “visual” or “WYSIWYG” like online rich-text editor, It was developed by Ihsana’s lab. GUI-VisualEditor gives you the ability to edit without needing to learn HTML markup, and front-end framework code like as Bootstrap, Foundation, FontAwesome, Animate.CSS and other. GUI-Visual Editor has given the easy of visual editing because it has been equipped with various plugins.<br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/5nFfZj0GFrs?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/riPdRg5Jrps?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span><br />
<span class="embed-youtube" style="text-align:center; display: block;"><iframe loading="lazy" class="youtube-player" width="750" height="422" src="https://www.youtube.com/embed/Vnj_MUkdhag?version=3&rel=1&showsearch=0&showinfo=1&iv_load_policy=1&fs=1&hl=en-US&autohide=2&wmode=transparent" allowfullscreen="true" style="border:0;" sandbox="allow-scripts allow-same-origin allow-popups allow-presentation allow-popups-to-escape-sandbox"></iframe></span></p>
<h4>Features</h4>
<ul>
<li><a href="http://visual-editor.com/#many-framework" rel="nofollow ugc">Supports Many Frameworks</a></li>
<li><a href="http://visual-editor.com/#native-and-dialog-mode" rel="nofollow ugc">Support Native or Dialog Mode</a></li>
<li>Support Inline/Live Editing</li>
<li>Support Content Delivery Network or Built-in CSS</li>
<li>Support Undo Redo</li>
<li>Toolbar Fonts Automatic </li>
<li>Filebrowser Automatic</li>
<li>Support Textdomain</li>
</ul>
<h4>Addons</h4>
<p>Addons are created TinyMCE plugin is suitable for this plugin, available in more than 35 addons on this plugin. However, you can still add it to purchase services from us.</p>
<h4>Premium Addons</h4>
<blockquote>
<p>You can add more features to the editor using our premium add ons, is charged.</p>
</blockquote>
<p>Here are a few add ons that we offer premium:</p>
<ul>
<li>GUI-Animate CSS is addons for adapter Animate.CSS into GUI-VisualEditor. By using this, you do not need to memorize or write code to create animations on your web content, such as animated bounce, flash, pulse, rubberBand, shake, swing, tada, and others</li>
<li>GUI-Bootstrap Alert is addons that allow create and edit Alert Component that use bootstrap framework.</li>
<li>GUI-Bootstrap Buttons is addons that allow create and edit Button Component that use bootstrap framework, such as color, size, attributes or others, either using classic or inline editor.</li>
<li>GUI-Bootstrap Carousel is addons that allow create and edit Carousel Component that use bootstrap framework</li>
<li>GUI-Bootstrap Glyphicons is addons that allow create icons that use bootstrap framework, includes 200 glyphs in font format from the Glyphicon Halflings set.</li>
<li>GUI-Bootstrap Images is addons that allow create and edit image element that use bootstrap framework, such as: thumbnail, rounded and circle</li>
<li>GUI-Bootstrap Label is addons that allow create and edit label component that use bootstrap framework</li>
<li>GUI-Bootstrap Navigator is addons that allow create and edit nav, pills, stacked, pagination, breadcrumbs or pager component that use bootstrap framework</li>
<li>GUI-Bootstrap Panel is addons that allow create and edit panels that use bootstrap framework</li>
<li>GUI-Bootstrap Quicktags is addons that allow create and edit container, row, column, well, jumbotron and shortcut that use bootstrap framework</li>
<li>GUI-Bootstrap Table is addons that allow create and edit table element that use bootstrap framework</li>
<li>GUI-Bootstrap Visualblocks is addons for display grid bootstrap</li>
<li>GUI-Dashicons is addons that allow create icons that use WordPress Dashboard</li>
<li>GUI-editArea is addons to view or edit the source code. EditArea has several features such as syntax highlighting, Word-wrap, Search and replace and others.</li>
<li>GUI-Foundation Buttons is addons that allow create and edit buttons Component that use foundation framework, either using classic or inline editor.</li>
<li>GUI-Foundation Icons is addons that allow create icons that use Foundation Icons v3.</li>
<li>GUI-Foundation Images is addons that allow create and edit image element that use foundation framework.</li>
<li>GUI-Foundation Label is addons that allow create and edit label component that use Foundation framework</li>
<li>GUI-Foundation Quicktags is addons that allow create and edit container, row, column and shortcut that use foundation framework</li>
<li>GUI-Foundation Table is addons that allow create and edit table that use Foundation framework</li>
<li>GUI-Foundation Visualblocks is addons for display grid foundation framework</li>
<li>GUI-File Browser is addons use for file browser</li>
<li>GUI-FontAwesome is addons that allow create and edit icon that use FontAwesome</li>
<li>GUI-KCFinder, that allow integrated KCFinder File Browser</li>
</ul>
<p>You can get <a href="http://codecanyon.net/item/gui-visual-editor-package-for-tinymce/14858024" rel="nofollow ugc">here</a></p>
<h3>Credits</h3>
<ol>
<li>http://tinymce.com</li>
<li>http://getbootstrap.com</li>
<li>http://fontawesome.io</li>
<li>http://daneden.me/animate</li>
<li>http://foundation.zurb.com/</li>
<li>http://zurb.com/playground/foundation-icon-fonts-3</li>
<li>http://kcfinder.sunhater.com/</li>
<li>http://www.cdolivet.com/editarea/</li>
<li>http://www.lampungcyber.co.id/</li>
</ol>


GUI – Visual Editor

directly integrates with the theme. if the editor trouble with your theme, please contact our support.



Integrates with the theme

This plugin for edit your posts on the front-end of your site without going to wp-admin edit page, this work using tinymce inline technology.

mdjekic

<p>This simple plugin will enable you to embed tweets into your posts, pages and text widgets and apply YOUR CUSTOM STYLES. It comes down to adding a simple snippet into your post, page or text widget content. Here’s an example:</p>
<pre><code>[tweet]latest|user=WordPress,count=5[/tweet]
</code></pre>
<p>This snippet will display five last tweets made by @WordPress with an intuitive HTML markup to which you can easily apply your custom CSS:</p>
<pre><code>.inline_tweet { background-color: whitesmoke; border: 2px solid black; }
</code></pre>
<p>Fetching tweets will be done in the background and will not slow down the displaying of your website or blog. You will see an unobtrusive transition placeholder before the tweets are loaded.</p>
<p>You like that? Take a look at the <a href="https://wordpress.org/plugins/inline-tweets/other_notes/#How-to-use" rel="ugc">How to use</a> and <a href="https://wordpress.org/plugins/inline-tweets/other_notes/#Markup-and-Styling" rel="ugc">Markup and Styling</a> to learn what you can do.</p>
<h4>Caching</h4>
<p>Caching will improve performance when fetching tweets and ensure that the plugin operates within Twitter API limits. To enable caching, please install <a href="https://wordpress.org/extend/plugins/w3-total-cache/" rel="ugc">W3 Total Cache</a> and enable ‘Object Cache’ in plugin settings.</p>
<h4>Configuration</h4>
<p>SinceTwitter introduced it’s API version 1.1 you need to create a Twitter application to be able to use it and thus to use this plugin. It’s not hard, you will spend a couple of minutes to create an app and obtain tokens and keys you will use for configuring Inline Tweets. You will have to do that only once, so no problem.</p>
<h4>Author</h4>
<p><a href="http://milos.djekic.net" rel="nofollow ugc">Miloš Đekić</a> is a software solutions architect from Belgrade, Serbia. He loves to create useful software.</p>
<h4>Credits</h4>
<p>Credits should be given when credits are due. Inline tweets use a great Twitter API wrapper library created by <a href="https://abrah.am/" rel="nofollow ugc">Abraham Williams</a> to communicate with Twitter. You can find it <a href="https://github.com/abraham/twitteroauth" rel="nofollow ugc">here</a></p>
<h3>How to use</h3>
<p>The usage depends on what you want to display. Only a couple of ways of displaying tweets exists but the list of applications will be expanded in the future. Make sure you take a look at the “Snippet Options” and learn how to take control over what is displayed and how.</p>
<h4>Single Tweet</h4>
<p>This is useful when you want to embed a tweet in your blog article or page.  Just use this snippet:</p>
<pre><code>[tweet]single|id=tweet_id[/tweet]
</code></pre>
<p>Replace “tweet_id” with the ID of the Twitter status you want to display. That’s it.</p>
<h4>Latest Tweets</h4>
<p>This will probably be the most common application of the plugin. If you want to display a list of your (or someone elses) latest tweets in your sidebar and/or pages/articles, use this snippet</p>
<pre><code>[tweet]latest|user=twitter_user[/tweet]
</code></pre>
<p>Replace “twitter_user” with the username of the account whose tweets you want to display. You can limit the number of tweets that will be fetched and displayed by adding a “count” param. Take a look at the following example:</p>
<pre><code>[tweet]latest|user=twitter_user,count=10[/tweet]
</code></pre>
<p>Note: Default number of tweets that will be fetched is 5 and the maximum you can set is 25. If you set more that the maximum you will get the default 5 tweets.</p>
<h4>Display Options</h4>
<p>There are various options to help you customise what will be displayed by the plugin for a particular snippet. You can include a custom option by adding the option string after a comma sign.</p>
<p>Here’s a list of all options with examples:</p>
<p><strong>time_format</strong></p>
<p>You can select the time format inline. Have in mind that if the format you set is not supported the time will be displayed in default format Here’s an example:</p>
<pre><code>[tweet]latest|user=twitter_user,time_format=M Y[/tweet]
</code></pre>
<p><strong>hide_author</strong></p>
<p>You can easily remove the author from display by simply adding the option:</p>
<pre><code>[tweet]single|id=tweet_id,hide_author[/tweet]
</code></pre>
<p><strong>hide_avatar</strong></p>
<p>You can easily remove the avatar from display by simply adding the option:</p>
<pre><code>[tweet]single|id=tweet_id,hide_avatar[/tweet]
</code></pre>
<p><strong>hide_timestamp</strong></p>
<p>You can easily remove the timestamp from display by simply adding the option:</p>
<pre><code>[tweet]single|id=tweet_id,hide_timestamp[/tweet]
</code></pre>
<p><strong>full_names</strong></p>
<p>By default tweets are displayed with their authors Twitter names. If “full_names” param is set they will be displayed with their full names:</p>
<pre><code>[tweet]latest|user=twitter_user,count=15,full_names[/tweet]<h3>Markup and Styling</h3>
</code></pre>
<p>Inline tweets are rendered with a recognizable HTML markup that you can use to display them in virtually every way possible using CSS. For starters, every tweet is wrapped in an element with class “inline_tweet”. Then every displayed element has it’s own class and rules.</p>
<h4>Tweet Content</h4>
<p><strong>Author</strong></p>
<p>Author’s Twitter name or full name is displayed as a link to his/her Twitter page:</p>
<pre><code><a class="inline_tweets_author" href="http://twitter.com/author" target="_blank">@author</a>
</code></pre>
<p>You can style the link by referencing the “inline_tweets_author” class (e.g. different color for plugin author than other users mentions).</p>
<p><strong>Avatar</strong></p>
<p>If displayed, the avatar is rendered as a link to author’s Twitter page also, with the addition of an image element:</p>
<pre><code><a class="inline_tweets_avatar" href="http://twitter.com/author" target="_blank">
    <img src="http://pbs.twimg.com/profile_images/author_image.jpeg">
</a>
</code></pre>
<p>You can style the link in terms of positioning and the image display by referencing the “inline_tweets_avatar” class.</p>
<p><strong>Mentions</strong></p>
<p>Mentions are also displayed as link to author Twitter pages and you cal easily style them by referencing the “inline_tweets_mention” class:</p>
<pre><code><a class="inline_tweets_mention" href="http://twitter.com/mention" target="_blank">@mention</a
</code></pre>
<p><strong>Hashtags</strong></p>
<p>Hashtags are wrapped in span elements enabling you to apply your custom styles (e.g. display in bold or italic) by referencing the “inline_tweets_tag” class:</p>
<pre><code><span class="inline_tweets_tag">#tag</span>
</code></pre>
<p><strong>Timestamp</strong></p>
<p>If you decide to display the timestamp, you can easily style it – in terms of positioning for starters – by referencing the “inline_tweets_timestamp” class. Here’s how the timestamp is rendered:</p>
<pre><code><span class="inline_tweets_timestamp">Jan 2014</span>
</code></pre>
<h4>Single Tweet</h4>
<p>Here’s an example of how a single tweet is displayed:</p>
<pre><code><div class="inline_tweet">
    <a class="inline_tweets_author" href="http://twitter.com/ArchdukeM" target="_blank">@ArchdukeM</a>
    <a class="inline_tweets_avatar" href="http://twitter.com/ArchdukeM" target="_blank">
        <img src="http://pbs.twimg.com/profile_images/image.jpeg">
    </a>
    "She represented everything I loved about the English. She was totally deranged."
    <span class="inline_tweets_timestamp">Jan 2014</span>
</div>
</code></pre>
<h4>Multiple Tweets</h4>
<p>When more that one tweet is displayed it is rendered as a list. To cut it short, here’s an example markup:</p>
<pre><code><ul class="inline_tweets_ul">
    <li class="inline_tweet">
        CONTENT
    </li>
</ul>
</code></pre>
<p>Let’s analyse the differences and the advantages. You have a ul element with a class “inline_tweets_ul” that you can use if you want to position the entire list, enable scrolling or whatever you want. Instead of a div element, there’s a li element with the “inline_tweet” class for wrapping the tweet. Tweet content is rendered in the same way as single tweets.</p>


Inline Tweets

Embed latest tweet(s) or a specific tweet in any page, post or text widget and apply your custom styles.

GUI – Visual Editor vs Inline Tweets