add rich text editor on title
authorrougeronj
Fri, 18 Sep 2015 15:36:46 +0200
changeset 530 9823b527c3a1
parent 529 6b0659a0e4c3
child 531 78107f172e2a
add rich text editor on title
client/js/defaults.js
client/js/renderer/nodeeditor.js
client/templates/nodeeditor.html
client/templates/nodeeditor_readonly.html
--- a/client/js/defaults.js	Wed Sep 16 17:57:47 2015 +0200
+++ b/client/js/defaults.js	Fri Sep 18 15:36:46 2015 +0200
@@ -175,6 +175,8 @@
     /* NODE EDITOR OPTIONS */
 
     show_node_editor_uri: true,
+    show_node_editor_title: true,
+    show_node_editor_title_richtext: true,
     show_node_editor_description: true,
     show_node_editor_description_richtext: true,
     show_node_editor_size: true,
--- a/client/js/renderer/nodeeditor.js	Wed Sep 16 17:57:47 2015 +0200
+++ b/client/js/renderer/nodeeditor.js	Fri Sep 18 15:36:46 2015 +0200
@@ -54,6 +54,9 @@
                 editorInstance = _this.options.show_node_editor_description_richtext ?
                     $(".Rk-Edit-Description").ckeditor(_this.options.richtext_editor_config) :
                     false,
+                editorInstanceTitle = _this.options.show_node_editor_title_richtext ?
+                    $(".Rk-Edit-Title").ckeditor(_this.options.richtext_editor_config) :
+                    false,
                 closeEditor = function() {
                     _this.renderer.removeRepresentation(_this);
                     paper.view.draw();
@@ -78,6 +81,14 @@
                         _editor.destroy();
                     }
                 }
+                if(_this.options.show_node_editor_title_richtext) {
+                    if(typeof editorInstanceTitle.editor !== 'undefined') {
+                        var _editor_title = editorInstanceTitle.editor;
+                        delete editorInstanceTitle.editor;
+                        _editor_title.focusManager.blur(true);
+                        _editor_title.destroy();
+                    }
+                }
             };
 
             this.editor_$.find(".Rk-CloseX").click(function (e) {
@@ -96,9 +107,7 @@
                 var onFieldChange = _.throttle(function() {
                   _.defer(function() {
                     if (_this.renderer.isEditable()) {
-                        var _data = {
-                            title: _this.editor_$.find(".Rk-Edit-Title").val()
-                        };
+                        var _data = {};
                         if (_this.options.show_node_editor_uri) {
                             _data.uri = _this.editor_$.find(".Rk-Edit-URI").val();
                             _this.editor_$.find(".Rk-Edit-Goto").attr("href",_data.uri || "#");
@@ -119,6 +128,18 @@
                                 _data.description = _this.editor_$.find(".Rk-Edit-Description").val();
                             }
                         }
+                        if (_this.options.show_node_editor_title) {
+                            if(_this.options.show_node_editor_title_richtext) {
+                                if(typeof editorInstanceTitle.editor !== 'undefined' &&
+                                        editorInstanceTitle.editor.checkDirty()) {
+                                    _data.title = editorInstanceTitle.editor.getData();
+                                    editorInstanceTitle.editor.resetDirty();
+                                }
+                            }
+                            else {
+                                _data.title = _this.editor_$.find(".Rk-Edit-Title").val();
+                            }
+                        }
                         if (_this.options.show_node_editor_style) {
                             var dash = _this.editor_$.find(".Rk-Edit-Dash").is(':checked');
                             _data.style = _.assign( ((_model.has("style") && _.clone(_model.get("style"))) || {}), {dash: dash});
@@ -155,6 +176,14 @@
                     editorInstance.editor.on("change", onFieldChange);
                     editorInstance.editor.on("blur", onFieldChange);
                 }
+                
+                if( _this.options.show_node_editor_title &&
+                    _this.options.show_node_editor_title_richtext &&
+                    typeof editorInstanceTitle.editor !== 'undefined')
+                {
+                    editorInstanceTitle.editor.on("change", onFieldChange);
+                    editorInstanceTitle.editor.on("blur", onFieldChange);
+                }
 
                 if(_this.options.allow_image_upload) {
                     this.editor_$.find(".Rk-Edit-Image-File").change(function() {
--- a/client/templates/nodeeditor.html	Wed Sep 16 17:57:47 2015 +0200
+++ b/client/templates/nodeeditor.html	Fri Sep 18 15:36:46 2015 +0200
@@ -4,7 +4,11 @@
 </h2>
 <p>
     <label><%-renkan.translate("Title:")%></label>
-    <input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
+    <% if (options.show_node_editor_title_richtext) { %>
+        <div class="Rk-Edit-Title" contenteditable="true"><%=node.title%></div>
+    <% } else { %>
+        <input class="Rk-Edit-Title" type="text" value="<%-node.title%>" />
+    <% } %>    
 </p>
 <% if (options.show_node_editor_uri) { %>
     <p>
--- a/client/templates/nodeeditor_readonly.html	Wed Sep 16 17:57:47 2015 +0200
+++ b/client/templates/nodeeditor_readonly.html	Fri Sep 18 15:36:46 2015 +0200
@@ -7,7 +7,7 @@
         <% if (node.uri) { %>
             <a href="<%-node.uri%>" target="_blank">
         <% } %>
-        <%-node.title%>
+        <%=node.title%>
         <% if (node.uri) { %></a><% } %>
     </span>
 </h2>