use codemirror for plugin editor

This commit is contained in:
Lee Lawlor
2014-10-10 11:26:42 -04:00
parent 8e96629609
commit 6ad74cee5b
10 changed files with 70 additions and 8 deletions

View File

@ -116,6 +116,7 @@
<h3>Twitter</h3>
<ul>
<li><a title="Send Twitter Status Updates using the ThingTweet App, Twitter Proxy from ThingSpeak" href="http://community.thingspeak.com/twitter/send-status-updates-using-the-thingtweet-app/">Send Status Updates using the ThingTweet App</a></li>
<li><a href="http://community.thingspeak.com/2014/10/official-tutorial-sending-tweets-automatically-every-morning-with-timecontrol/">Sending Tweets Automatically Every Morning With TimeControl</a></li>
</ul>
<h3>WordPress</h3>
<ul>

View File

@ -1,8 +1,24 @@
<link href="//thingspeak.com/codemirror/codemirror.css" rel="stylesheet" />
<link href="//thingspeak.com/codemirror/neat.css" rel="stylesheet" />
<script type="text/javascript" src="//thingspeak.com/codemirror/codemirror.js"></script>
<script type="text/javascript" src="//thingspeak.com/codemirror/xml.js"></script>
<script type="text/javascript" src="//thingspeak.com/codemirror/javascript.js"></script>
<script type="text/javascript" src="//thingspeak.com/codemirror/css.js"></script>
<script type="text/javascript" src="//thingspeak.com/codemirror/htmlmixed.js"></script>
<style type="text/css">
/* codemirror overrides */
pre { overflow: inherit !important; }
.activeline { background: #e8f2ff !important; }
.CodeMirror { border: 1px solid #ccc; }
.CodeMirror-scroll { height: 300px; }
</style>
<div class="col-sm-8 col-xs-8">
<ol class="breadcrumb" data-no-turbolink>
<li><%= link_to t(:plugins), plugins_path %></li>
<li><%= link_to plugin_path(@plugin.id) do %> <%= t(:plugin) %> <%= @plugin.id %><% end %></li>
<li><%= link_to plugin_path(@plugin.id) do %><%= t(:plugin) %> <%= @plugin.id %><% end %></li>
<li class="active"><%= t(:edit) %></li>
</ol>
@ -56,11 +72,54 @@
</div>
<script type="text/javascript">
// when document is ready
$(document).on('page:load ready', function() {
// allow tabs to work in textareas
$("textarea").tabby();
// set html codemirror
var html_line = '';
var html_editor = CodeMirror.fromTextArea(document.getElementById("plugin_html"), {
lineNumbers: true,
indentUnit: 2,
extraKeys: {Tab: function(cm) { cm.replaceSelection(" ", "end"); }},
matchBrackets: true,
mode: "text/html",
height: '300px',
onCursorActivity: function() {
html_editor.setLineClass(html_line, null, null);
html_line = html_editor.setLineClass(html_editor.getCursor().line, null, "activeline");
}
});
// set css codemirror
var css_line = '';
var css_editor = CodeMirror.fromTextArea(document.getElementById("plugin_css"), {
lineNumbers: true,
indentUnit: 2,
extraKeys: {Tab: function(cm) { cm.replaceSelection(" ", "end"); }},
matchBrackets: true,
mode: "text/html",
height: '300px',
onCursorActivity: function() {
css_editor.setLineClass(css_line, null, null);
css_line = css_editor.setLineClass(css_editor.getCursor().line, null, "activeline");
}
});
// set js codemirror
var js_line = '';
var js_editor = CodeMirror.fromTextArea(document.getElementById("plugin_js"), {
lineNumbers: true,
indentUnit: 2,
extraKeys: {Tab: function(cm) { cm.replaceSelection(" ", "end"); }},
matchBrackets: true,
mode: "text/html",
height: '300px',
onCursorActivity: function() {
js_editor.setLineClass(js_line, null, null);
js_line = js_editor.setLineClass(js_editor.getCursor().line, null, "activeline");
}
});
// clears status message
function clearStatus() {

View File

@ -29,7 +29,7 @@
</h4>
<div class="btn-group btn-group-sm">
<%= link_to T(:view), plugin_path(p.id), :target => '_blank', class: 'btn btn-default' %>
<%= link_to T(:edit), edit_plugin_path(p.id), class: 'btn btn-default' %>
<%= link_to T(:edit), edit_plugin_path(p.id), class: 'btn btn-default', 'data-no-turbolink' => 'true' %>
</div>
</td>
<td><%= p.created_at.strftime("%Y-%m-%d") %></td>