ckeditor loading when it shouldn't breaking character edit page

Rebecca321
edited December 2018 in DST Development

I've been unable to submit my post. Let's see if this simpler post works. (The actual question is in the comments.)

Post edited by Rebecca321 on

Comments

  • Rebecca321
    Posts: 5

    I'm working on a character sheet, and when I load the edit page ckeditor attempts to load, even though I have Textile selected. If I load it with http:// the editor fails to load, and the bottom edit boxes fail to load as well. I get this error message

     


    [CKEDITOR] Error code: uploadimage-config

     

    If I load it with https:// (the default), it attempts to load a bunch of Google fonts using "http://"; URLs and the page load stalls as it makes thousands of failed attempts. 

    I've narrowed the trigger down to a single function (adapted by code from Chainsaw XIV, but with the format bar code removed in a (failed) attempt to solve this problem. 

    Does anyone have any idea why this might be happening? I can't see anything in the code that would trigger it.

     

  • Rebecca321
    Posts: 5

    this.edit = function(context){

    function escape(string){
    //string = string.replace(/\\/g,'\\\\');
    //string = string.replace(/"/g,'\\\"');
    string = string.replace(/</g,'&lt;');
    return string;
    }

    function unescape(string){
    string = string.replace(/&lt;/g,'<');
    string = string.replace(/&gt;/g,'>');
    //string = string.replace(/\\"/g,'"');
    //string = string.replace(/\&quot;/g,'"');
    //string = string.replace(/\&#92;/g,'\\');
    return string;
    }
  • Rebecca321
    Posts: 5
    		// Just unescape if not editing
    if (!csx_opts.isEditable){
    var editFields = context.querySelectorAll('.dsf:not(.readonly),.edit:not(.readonly)');
    for (var i = 0; i < editFields.length; i++)
    editFields[i].innerHTML = unescape(editFields[i].innerHTML);
    return;
    }

    // Default the context if not set
    if (!context) context = document;


    // Convert each editable field
    var editFields = context.querySelectorAll('.dsf,.edit');
    for (var i = 0; i < editFields.length; i++){

    var baseField = editFields[i];

    // Don't do anything to read only fields
    if (baseField.className.match(/readonly/))
    continue;

    // Replace the field span with a div if it's not
    // Here instead of render so events attach to the new div
    var field = baseField;
    if (baseField.tagName == 'SPAN'){
    var field = document.createElement('div');
    field.className = baseField.className;
    field.innerHTML = baseField.innerHTML;
    field.style.left = baseField.style.left;
    field.style.top = baseField.style.top;
    field.style.width = baseField.style.width;
    field.style.textAlign = baseField.style.textAlign;
    field.old_value = '';
    baseField.parentNode.insertBefore(field,baseField);
    baseField.parentNode.removeChild(baseField);
    }

    // Set the default text value for blank fields
    if (baseField.attributes['defaultString']){
    field.defaultValue = baseField.attributes['defaultString'].value;
    field.setAttribute('defaultString',baseField.attributes['defaultString'].value);
    }
    else
    field.defaultValue = csx_opts.defaultFieldValue;

    // Returns the text edited into the field
    field.value = function(){

    // Return nothing if the field is defaulted
    if (this.innerHTML == this.defaultValue)
    return '';
    // Otherwise return the actual content
    else
    return this.innerHTML;

    }

    // Populates editable fields with default values
    field.render = function(){

    this.innerHTML = unescape(this.innerHTML);

    // Set default value if the field is blank
    if (this.innerHTML == csx_opts.defaultFieldValue || this.innerHTML == '')
    this.innerHTML = this.defaultValue;

    // Activate the field for editing
    this.enable();

    }
  • Rebecca321
    Posts: 5

    // Strips the default value away if needed
    field.unrender = function(){

    if (this.innerHTML == this.defaultValue)
    this.innerHTML = '';

    // Replace this with a span if it's not
    if (this.tagName != 'SPAN'){
    var span = document.createElement('span');
    span.className = this.className;
    span.innerHTML = escape(this.innerHTML);
    this.parentNode.insertBefore(span,this);
    this.parentNode.removeChild(this);
    }

    }

    // Attaches required events and sets values
    field.enable = function(){

    // Set title and cursor mode
    this.title = 'Click and type to edit';

    // Make the content editable
    this.contentEditable = true; // *** This is hella slow in FF for some reason

    // Assign the required events to the field
    this.addEventListener('focus', this.activate, false);
    this.addEventListener('blur', this.deactivate, false);
    this.allowBlur = true;

    }

    // Select content and show edit interface on focus
    field.activate = function(e){
    this.old_value = this.innerHTML;

    // Display the formatting toolbar
    //this.formatBar.show(this);

    // Shade the field
    this.className += ' activeField';

    // Select all the text in the field for editing
    if(this.allowBlur){
    var el = this;
    requestAnimationFrame(function() {
    el.select();
    });
    }

    // Disable the element's title
    this.titleStore = this.title;
    this.title = '';

    }

    // Called when the field loses focus, hide editing interface
    field.deactivate = function(){

    if(!this.allowBlur)
    return;

    // Hide the formatting toolbar
    // this.formatBar.hide();

    // Default the text if empty
    if(this.innerHTML == '' || this.innerHTML == '&lt;br&gt;')
    this.innerHTML = this.defaultValue;

    // Unshade the field
    this.className = this.className.replace(/ activeField/g,'');

    // Enable the element's title
    this.title = this.titleStore;

    if(this.old_value != this.innerHTML){
    this.update();
    }
    }

    // Called when the content changes, typically overridden
    field.update = function(){

    }

    // Selects all the text in the field
    field.select = function(){

    var range = document.createRange();
    range.selectNodeContents(this);
    var selection = window.getSelection();
    selection.removeAllRanges();
    selection.addRange(range);

    }

    // Create ref to format bar
    //field.formatBar = formatBar;

    // Ready the field for use
    field.render();

    }

    }
  • Kallak
    Kallak
    Posts: 1,090

    Have you tried reaching out to Chainsaw yet? If your sheet is based on one of his, I'd say that's the best place to start (just make sure it's a site PM instead of a forum PM). I might also check out his DST GitHub page. There's a lot of good stuff on there.

    That said, I tried it out on one of my test campaigns, and I didn't see the CKEditor try to load (I too am set for Textile editor). All I saw was the fields and labels for the sheet populate and then vanish, leaving the background by itself.

    All the best,
    - Kallak
Sign In or Register to comment.

March 2024
Wrath of the Highborn

Read the feature post on the blog
Return to Obsidian Portal

Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Discussions