Allow toolbar & statusbar text to be changed

README.md

@@ -169,6 +169,9 @@ var simplemde = new SimpleMDE({
 		}
 	}], // Another optional usage, with a custom status bar item that counts keystrokes
 	tabSize: 4,
+	text: {
+		'preview': 'Vorschau' // Deutsch
+	} // Allows text for the Toolbar tooltips and statusbar items to be changed - only items to be changed need be included - use the name of the item as the key
 	toolbar: false,
 	toolbarTips: false,
 });

src/css/simplemde.css

@@ -13,6 +13,11 @@
 	min-height: 300px
 }
 
+[dir='rtl'] .CodeMirror-scroll {
+	margin-right: 0;
+	margin-left: -30px;
+}
+
 .CodeMirror-fullscreen {
 	background: #fff;
 	position: fixed !important;
@@ -196,22 +201,23 @@
 	text-align: right;
 }
 
-.editor-statusbar span {
+[dir='rtl'] .editor-statusbar {
+	text-align: left;
+}
+
+.editor-statusbar .wrapper {
 	display: inline-block;
 	min-width: 4em;
 	margin-left: 1em;
 }
 
-.editor-statusbar .lines:before {
+[dir='rtl'] .editor-statusbar .wrapper {
-	content: 'lines: '
+	margin-left: 0;
-}
+	margin-right: 1em;
-
-.editor-statusbar .words:before {
-	content: 'words: '
 }
 
-.editor-statusbar .characters:before {
+.editor-statusbar .value:before {
-	content: 'characters: '
+	content: ': ';
 }
 
 .editor-preview {

src/js/simplemde.js

@@ -1663,6 +1663,10 @@ SimpleMDE.prototype.createToolbar = function(items) {
 			if(item === "|") {
 				el = createSep();
 			} else {
+				var icon = item.name;
+				if(self.options.text[icon] !== undefined) {
+					item.title = self.options.text[icon];
+				}
 				el = createIcon(item, self.options.toolbarTips, self.options.shortcuts);
 			}
 
@@ -1769,7 +1773,7 @@ SimpleMDE.prototype.createStatusbar = function(status) {
 			}
 
 			items.push({
-				className: name,
+				name: name,
 				defaultValue: defaultValue,
 				onUpdate: onUpdate
 			});
@@ -1790,8 +1794,7 @@ SimpleMDE.prototype.createStatusbar = function(status) {
 
 		// Create span element
 		var el = document.createElement("span");
-		el.className = item.className;
+		el.className = "value";
-
 
 		// Ensure the defaultValue is a function
 		if(typeof item.defaultValue === "function") {
@@ -1809,9 +1812,18 @@ SimpleMDE.prototype.createStatusbar = function(status) {
 			}(el, item)));
 		}
 
+		// Create span element to hold the item's text
+		var wrapper = document.createElement("span");
+		wrapper.className = "wrapper";
+		if(options.text[item.name] !== undefined) {
+			wrapper.innerHTML = options.text[item.name];
+		} else {
+			wrapper.innerHTML = item.name;
+		}
+		wrapper.appendChild(el);
 
 		// Append the item to the status bar
-		bar.appendChild(el);
+		bar.appendChild(wrapper);
 	}