Setting up KCFinder integration in TinyMCE

I am utilizing TinyMCE as a text field, and I am in need of enabling image upload functionality within it. To achieve this, I am using KCFinder. However, I am encountering an issue where upon clicking on the 'Upload Images' button, only a white box appears. Below is the initialization code for TinyMCE (Please note: I am coding in Angular):

vm.tinymceOptions = {
    resize: false,
    height: 300,
    menubar: false,
    plugins: 'autolink link image preview fullscreen textcolor ',
    toolbar: 'undo, redo | styleselect  | cut, copy, paste | bold, italic, underline, strikethrough | subscript, superscript | alignleft aligncenter alignright | link image | preview, forecolor',
    file_browser_callback: function(field, url, type, win) {
        tinyMCE.activeEditor.windowManager.open({
            file: 'app/template/plugin/kcfinder/browse.php?opener=tinymce4&field=' + field + '&type=' + type,
            title: 'KCFinder - Current Path: ',
            width: 700,
            height: 400,
            inline: true,
            close_previous: false
        }, {
            window: win,
            input: field
        });     
        return false;
    }
};

Upon opening the image upload feature in TinyMCE, the following issue is encountered:

https://i.sstatic.net/qCSGk.png

javascriptangularjsfile-uploadtinymcekcfinder

Answer №1

config.php

// GENERAL SETTINGS

'disabled' => **true**,
'uploadURL' => "upload",
'uploadDir' => "",
'theme' => "default",

adjust // GENERAL SETTINGS

'disabled' => **false**,
'uploadURL' => "upload",
'uploadDir' => "",
'theme' => "default",

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Issue with JQuery Event Listener on Canvas Subelement not functioning

I encountered an issue while trying to implement a custom crop rectangle on a canvas using JavaScript. I created a function that, when called, should add a child node to the existing canvas and use JQuery listeners to draw the rectangle. However, although ...

javascriptjqueryhtmlcanvas

Enhancing SVG graphics dynamically with JavaScript and ensuring compatibility across different web browsers

I am currently working on incorporating an element into an existing SVG file. Interestingly, the process runs smoothly on Chrome and Firefox but encounters issues on Edge. I aim for it to function seamlessly on the latest versions of all three browsers, wi ...

javascripthtmldomsvgmicrosoft-edge

Displaying random divs and subsequently animating them downwards using JavaScript

I am in the process of creating a random appearing div that then falls down. Here is the code I have so far: $(document).ready(function(){ $('#test').animate({top: 80 + '%'},900); }); <div id="test" style="background:#98bf21;heigh ...

javascriptjqueryhtmlcss

Discover the magic of retrieving element background images on click using jQuery

I am attempting to extract the value for style, as well as the values inside this tag for background-image. Here is the script I have tried: function getImageUrl(id){ var imageUrl = jQuery("."+id+". cycle-slide").attr("src"); alert('' + ima ...

javascriptjqueryhtmlbackground-image

Encountering a '[BABEL] Cannot find module' error message after setting up a new PC

Recently, I configured my development environment on a fresh operating system. When I navigated to my project folder and executed the commands: npm install npm run serve I encountered the following error message: Module build failed (from ./node_modules ...

javascriptnode.jsvue.jswebpack

What is the best way to correlate two arrays of strings with one another?

I am working with two sets of data: First Set: let training = [ "Z1,1545 John Doe,P1", "Z2,2415 Shane Yu,P2" ]; Second Set: let skill = [ "P1, Shooting", "P2, Passing", ]; I need to combine both arrays bas ...

javascriptarraysstring

Guide to developing a manual tally counter with recorded logs using HTML and JavaScript

I am currently in need of assistance with creating a manual input counter using the App Script Editor. My website design already includes a single input textbox, a reset button, and a disabled box. What I would like to achieve is that when I enter a numb ...

javascripthtmlgoogle-apps-script

Can JavaScript be executed from the console while navigating between pages?

I am facing a challenge that I can't find any solutions for online or elsewhere. The task at hand seems straightforward. I am using the Chrome console and attempting to run Javascript code to navigate between pages with pauses in between. It feels lik ...

javascriptconsole

Tips for managing the background color of a box when the function is constantly refreshing in Internet Explorer

function process(Objects) { var objectId = Objects; displayContent(objectId); } function displayContent(objectId) { var boxId = objectId.id; var color = ret ...

javascriptjqueryhtmlcss

text: Methods for refreshing a Cognito access token in a JavaScript application without generating a client secret in Angull

How can I refresh a Cognito access token in a JavaScript application (AngularJS) if the client application does not generate a client secret? I attempted to use the code snippet below but it resulted in the following error message: {"error":"invalid_clien ...

javascriptangularjsoauth-2.0amazon-cognitoaccess-token

Sending Python Object from Django View to Javascript Script in Template

Here is a basic code snippet created solely to illustrate a problem. While the task at hand can be achieved without JavaScript, I am exploring how to accomplish it using JavaScript for my actual code where it is necessary. In view.py Inside the play_game ...

javascriptpythonjsondjangodjango-templates

Access the original source code using jQuery

Is there a way to retrieve the raw HTML code (as seen in Chrome's source code window) using JQuery without having quotes converted to &quot or HTML symbols converted to text? I have tried using html() and text(), but neither method seemed to give ...

javascriptjqueryhtml

Is it possible to implement CSS code from a server request into a React application?

With a single React app that hosts numerous customer websites which can be customized in various ways, I want to enable users to apply their own CSS code to their respective sites. Since users typically don't switch directly between websites, applying ...

javascriptcssreactjs

Loop through each current value in an ng-repeat directive and use it in an

I'm facing a simple issue that doesn't seem to have an easy fix. I have a ng-repeat set up like this <p ng-repeat="title in Menu.data[Menu.selected]"> {{ title }} </p> Now, I want to add an onclick event so I adjusted i ...

javascriptangularjsangularjs-ng-repeat

Kendo UI Scheduler: The system encountered an overflow while converting to a date and time format

Working on a project using .NET MVC and the Kendo UI Scheduler, an open-source tool. The goal is to save, read, update, and delete events from the scheduler into the database using JavaScript. Encountering some challenges in the process - when attempting ...

javascriptasp.net-mvckendo-uikendo-schedulerkendo-ui-mvc

Oops! Looks like there's an unexpected error with the module 'AppRoutingModule' that was declared in the 'AppModule'. Make sure to add a @Pipe/@Directive/@Component annotation

I am trying to create a ticket, but I encountered an error. I am currently stuck in this situation and receiving the following error message: Uncaught Error: Unexpected module 'AppRoutingModule' declared by the module 'AppModule'. Plea ...

javascriptangulartypescriptfirebase

Exploring the connection between Jquery and Javascript event handling within ASP.NET C# code-behind, utilizing resources such as books and

It seems that Jquery, Javascript, and AJAX are gaining popularity now. I am interested in learning how to use this functionality within C#. Do you have any recommendations for resources or books that teach JavaScript from a C# perspective on the web? Not ...

c#javascriptjqueryasp.net

Ways to transfer information among Angular's services and components?

Exploring the Real-Time Binding of Data Between Services and Components. Consider the scenario where isAuthenticated is a public variable within an Authentication service affecting a component's view. How can one subscribe to the changes in the isAut ...

javascriptangulartypescriptionic-frameworkdata-binding

Looking to connect information

I have written the following code and I am trying to bind data to ng-model. When I use ng-model = "value", I can see the value in the text field, but I want to update the value when the text input is changed. <tbody ng-repeat="action in model.editAct ...

htmlangularjs

What is the most effective way to ensure a user's email address is not already in my database before submitting a form?

Welcome to my first question post. I'm in the process of creating a test where users can sign in and retake it if they wish. However, I'm facing a challenge in checking whether the user's email already exists in my mariaDB database when they ...

javascriptmysqlnode.jsexpressmariadb