semanticeditor / semanticeditor / templates / semanticeditor / editorwidget.html

{% load i18n %}
<script type="text/javascript">

// Global var, for storing callbacks, see below.
var editPluginPopupCallbacks = {};

// Global function, needed for popup window to call the parent via opener.dismissEditPluginPopup
function dismissEditPluginPopup(win, plugin_id, icon_src, icon_alt) {
    // This is called after user presses 'Save' in popup.
    win.close();
    var callback = editPluginPopupCallbacks[plugin_id];
    if (callback != null) {
        callback(plugin_id, icon_src, icon_alt);
    }
}

// TODO - move this html escape function somewhere nicer

function escapeHtml(html) {
    return html.replace(/&/g,"&amp;")
        .replace(/\"/g,"&quot;")
        .replace(/</g,"&lt;")
        .replace(/>/g,"&gt;");
}

$(document).ready(function(){
    $('#id_{{ name }}').wymeditor({
        lang: '{{ language }}',
        skin: 'semanticeditor',
        skinPath: "{{ SEMANTICEDITOR_MEDIA_URL }}javascript/wymeditor/skins/semanticeditor/",
        iframeBasePath: "{{ SEMANTICEDITOR_MEDIA_URL }}wymeditor/iframe/default/",
        updateSelector: '#text_form',
        updateEvent: 'submit',
		logoHtml: '',
		toolsItems: [
			    {{ WYM_TOOLS }}
			],
		containersItems: [
		        {{ WYM_CONTAINERS }}
		    ],
		classesItems: [
			    {{ WYM_CLASSES }}
			],
		editorStyles: [
			{{ WYM_STYLES }}
		],
        postInit: function(wym) {
            //wym.resizable({handles: "s", maxHeight: 600});
            //construct the insertLinkButton html
            html = '<div class="plugin-select-holder">'
				 + '<select name="plugins">'
				 + '<option value="" selected="selected">{% trans "Available Plugins" %}</option>'{% for p in installed_plugins %}
      			 + '<option value="{{ p.value }}">{{ p.name }}</option>'{% endfor %}
    			 + '</select>'
    			 + '<span class="insert-object addlink">{% trans "Insert plugin" %}</span>'
    			 + '<span class="edit-object changelink">{% trans "Edit selected plugin" %}</span>'
  				 + '</div>';
            //add the button to the tools box
            jQuery(wym._box)
            .find(wym._options.toolsSelector + wym._options.toolsListSelector)
            .append(html);

            // Enable the 'semantic' plugin
            // 'template' attribute can be overridden by a '?template' query
            // string parameter on parent frame
            var qs = jQuery.query.load(window.parent.location.search);
            var template = qs.get('template');
            if (template == "") {
                template = "{{ page.template }}";
            }

            symanticopts = {
                extract_structure_url: "{% url semantic.extract_structure %}",
                retrieve_styles_url: "{% url semantic.retrieve_styles %}",
                retrieve_commands_url: "{% url semantic.retrieve_commands %}",
                separate_presentation_url: "{% url semantic.separate_presentation %}",
                combine_presentation_url: "{% url semantic.combine_presentation %}",
                clean_html_url: "{% url semantic.clean_html %}",
                preview_url: "{% url semantic.preview %}",
                template: template,
                page_id: "{{ page.id }}"
            };
            wym.semantic(symanticopts);

            // Enable the placeholderbridge plugin, to allow
            // the placeholder controls to talk to editor
            wym.placeholderbridge({'name': '{{ name }}'});
			init_buttons();
        },
        //handle click event on dialog's submit button
        postInitDialog: function( wym, wdw ) {
     
        }
    });
	  /* General functions */
    function get_editor(placeholder) {
        // Find the placeholder text editor widget
        if (typeof(PlaceholderEditorRegistry) == "undefined") {
            // This could occur if javascript defining PlaceholderEditorRegistry
            // has not been loaded for some reason.
            alert("{% trans "A programming error occurred - cannot find text editor widgets." %}");
            return null;
        }
        return PlaceholderEditorRegistry.retrieveEditor(placeholder);
    }

    function edit_object(obj_id) {
        // Pop up window for editing object.
        window.open("edit-plugin/" + obj_id + "/?_popup=1",
                    "Edit plugin object",
                    "menubar=no,titlebar=no,toolbar=no,resizable=yes"
                      + ",width=800,height=300,top=0,left=0,scrollbars=yes"
                      + ",location=no"
                   );
    }

    function plugin_admin_html(plugin_id, icon_src, icon_alt) {
        return '<img src="' + escapeHtml(icon_src) + '" ' +
            'alt="'+ escapeHtml(icon_alt) + '" ' +
            'id="plugin_obj_' + plugin_id + '"/>';
    }

    /* onclick for 'Insert object' */
	
	function init_buttons(){
		$('span.insert-object').click(function(){
			var select = $(this).parent().children("select");
			var pluginvalue = select.attr('value');
			var placeholder = $(this).parent().parent().parent().parent().parent().parent().children("textarea").attr('name');
			var splits = window.location.href.split("?")[0].split("/");
			var parent_id = Number(splits[splits.length - 2]);
			var language = $('#id_language').attr('value');
			
			if (pluginvalue == "") {
				alert("{% trans "Please select a plugin type." %}");
				return;
			}
			
			var texteditor = get_editor(placeholder);
			if (texteditor == null || texteditor.insertText == null) {
				alert("{% trans "Text editor does not support inserting objects." %}");
				return;
			}
			// First create db instance using AJAX post back
			$.post("add-plugin/", {
				parent_id: parent_id,
				plugin_type: pluginvalue,
			}, function(data){
				if ('error' != data) {
					// Successfully created, data is pk of object, but object
					// is 'blank'. We now want to show the edit popup.
					
					// We only want to insert the text if the user actually
					// *saved* the object.  We don't have modal dialogs, so we
					// register a callback against the id number.  This callback
					// is called by dismissEditPluginPopup().
					var plugin_id = data;
					editPluginPopupCallbacks[data] = function(plugin_id, icon_src, icon_alt){
						texteditor.insertText(plugin_admin_html(plugin_id, icon_src, icon_alt));
						editPluginPopupCallbacks[data] = null; // Unbind callback
					};
					
					// Show popup for editing
					edit_object(plugin_id);
				}
			}, "html");
			
		}).css("cursor", "pointer").css("margin", "5px");
		
		/* onclick for 'Edit selected object' */
		$('span.edit-object').click(function(){
			var placeholder = $(this).parent().parent().parent().parent().parent().parent().children("textarea").attr('name');
			var texteditor = get_editor(placeholder);
			if (texteditor == null || texteditor.selectedObject == null) {
				alert("{% trans "Text editor does not support editing objects." %}");
				return;
			}
			var imgobj = texteditor.selectedObject();
			if (imgobj == null) {
				alert("{% trans "No object selected." %}");
				return;
			}
			if (imgobj.id == null || imgobj.id.indexOf("plugin_obj_") != 0) {
				alert("{% trans "Not a plugin object" %}");
				return;
			}
			var plugin_id = imgobj.id.substr("plugin_obj_".length);
			edit_object(plugin_id);
		}).css("cursor", "pointer").css("margin","5px");
        }
    });
    </script>
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.