The `execCommand` function will update the URL to point to the parent

When I try to insert an image URL into my wysiwyg editor, Firefox seems to be replacing the URL with "../../"

string += "<img src='"+encodeURI(domain)+"/"+file_name+"' id='"+filename+"'>";
console.log(string);

However, the console output is:

<img src='http://www.testing.com/web_graph.gif' id='web_graph.gif'>

Then, when using:

document
  .getElementById("texto_a_editar")
  .contentWindow
  .document
  .execCommand('inserthtml', false, string);

I end up with:

<img src="../web_graph.gif" id="web_graph.gif">

Any suggestions on how to ensure the complete URL is displayed instead?

javascriptwysiwyg

Answer №1

let currentURL = window.location.href,
    lastIndex = window.location.href.lastIndexOf("/"),
    image = document.getElementById("web_graphic.gif").getAttribute("src");
    image = image.substr(image.lastIndexOf("/") + 1);
    currentURL = currentURL.substr(0, currentURL.lastIndexOf("/") + 1) + image;

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

The issue with the dispatch function not working in the Component props of React Redux

I'm struggling with my colorcontrol issue. I've been attempting to use this.props.dispatch(triggerFBEvent(fbID, method, params)) without success. Interestingly, it seems to work fine if I just use triggerFBEvent(fbID, method, params). However, I ...

javascriptecmascript-6reduxreactjs

What could be causing this jQuery color picker to malfunction when used inside a Bootstrap modal?

Currently, I am utilizing the fantastic jQuery color picker provided by Although it functions as expected in "normal" scenarios, I have encountered an issue where the picker fails to display when the input parent element is nested within a Bootstrap 3 mod ...

javascriptjquerycsstwitter-bootstrap-3

Challenges arise in the grid system when implementing Material UI

Hey there, I've been trying to create card sets using material UI. I have organized the data from a JavaScript object, but unfortunately, the output is not what I expected. Below is the code I am currently using: const CardFeatures = () => { ...

javascriptreactjsmaterial-ui

Automated updating of Google Map markers

I am looking for a way to continuously update the marker on my Google Map to reflect my current position every 15 seconds using Jquery. Can anyone provide guidance on how to achieve this? Here is my code snippet: var x=document.getElementById("message"); ...

javascriptjquerygoogle-mapsgoogle-maps-api-3

How can the name of an element be passed as an argument to a function called by that element within a Vue component?

I'm currently developing an interactive SVG map inspired by the one found on the CDC page. In my SVG map component, I have implemented multiple path elements that each contain a unique name attribute representing the corresponding state. Additionally, ...

javascriptvue.jssvg

Crafting a robust and secure password using Yup and Formik while receiving personalized error notifications

My Password Validation Dilemma I'm in the process of developing a password field that can assess the strength of the input provided. In a different response, I came across a regex that I could utilize to validate whether the input meets specific crit ...

javascriptreactjsformikyup

Issue with Angular Reactive form: Checkbox checked property not binding correctly when the page initially loads

Looking to achieve Two-way data binding of Checkbox in Angular Reactive forms. After checking the checkbox, I am updating the 'isdateChkd' variable and storing it in the state. Despite the variable being set to TRUE, the checkbox does not get aut ...

javascriptangulartypescript

A guide on implementing nested child routes in AngularJS 2

I have successfully completed routing for two children, but now I want to display nested routes for those children. For example: home child1 child2 | grand child | grand child(1) ...

javascriptangularjsangular

Fulfill the promise to retrieve the value contained within

Is there a way to use TypeScript to call the Wikipedia API for retrieving a random page title and save it in a variable for later use? I am struggling with resolving promises as I keep getting ZoneAwarePromise returned. I'm new to both promises and Ty ...

javascripttypescriptpromisefetch

Interactive PNG Sequence Rotation: Explore 360 Degrees

I am facing an issue with my PNG sequence of 360 images, where each image corresponds to a degree of rotation. Currently, I have a React component that updates the rotation based on the mouse position in the window - with x = 0 corresponding to rotation = ...

javascriptreactjsmath

What are the steps to achieve consistent response behavior in POSTMAN that matches that of a web browser?

Below is an example of my code: const express = require('express'); const app = express(); app.get('/', function (req, res) { res.setHeader('Content-Type', 'text/html'); res.write("First \n"); set ...

javascriptnode.jsasynchronouspostmansettimeout

the angular-ui-tinymce directive allows for seamless image uploads using a file browser

Utilizing jQuery, we have the ability to incorporate local images into the tinymce editor similar to what is demonstrated in this jsfiddle, by following the guidelines provided in the documentation. The Angular module for tinymce can be found at angular-u ...

javascriptjqueryangularjstinymcetinymce-4

Click the ng-focus button to focus the textarea

I am in need of a solution where I can trigger a button within the ng-repeat loop and focus on a textarea specific to that item in the loop. HTML <div ng-repeat="item in items"> <textarea focus-when="showTextarea">{{ item }}</textarea> ...

javascripthtmlangularjsangularjs-ng-repeat

Modifying an image's height and width attributes with jQuery and CSS on click action

I'm currently developing a basic gallery using HTML, CSS, and jQuery. The objective is to have a larger version of an image display in a frame with an overlay when the user clicks on it. While this works flawlessly for horizontally-oriented images, ve ...

javascriptjquerycssoverlay

What is the most effective way to display multiple variables simultaneously in Mongoose/Node.js?

As a newcomer to programming, my initial major project involves building a website using Mongoose and Node.js. I have a query regarding rendering two variables for ejs simultaneously without encountering an error due to attempting to render a query that h ...

javascriptnode.jsasynchronousmongoose

Using jQuery, we can replace all `<span>` elements with `<img>` elements and then verify if the images have been successfully loaded

Similar Inquiry: jQuery check if image is loaded I find myself in a scenario where the following HTML structure is utilized: <div class="image"> <img class="" src="content-images/1.jpg"> <span class="slide" rel="content-images/ ...

javascriptjquerycssimage

Encountering an issue with HTMLInputElement when trying to input an integer value into a label using JavaScript

script code intext = document.getElementById("intext"); totalin = document.getElementById("totalin"); function myFunction() { var x = document.getElementById("totalin"); x.innerHTML = intext.toString(); } The snippet above shows a JavaScript functio ...

javascriptjquery

Browserify Rails encountered an error - ParseError: Error with 'import' and 'export'. These statements can only appear with 'sourceType: module'

Recently, I encountered an issue while trying to integrate an NPM package into my Rails application. The problem I'm facing can be seen in the following image: https://i.stack.imgur.com/cIOw8.png I searched this forum for similar issues but found tha ...

javascriptruby-on-railsnode.jsreactjsnpm

Limiting jQuery searches to a specific region: Tips and tricks

If I have the code snippet below: <div class="foo"> <div> some text <div class="bar"> </div> </div> </div> <div class="foo"> <div> some text <div class="bar"> some text </div> </div> </ ...

javascriptjqueryhtmlparsingtags

Having trouble decoding a cookie received from a React.js front-end on an Express server

When using React js for my front end, I decided to set a cookie using the react-cookie package. After confirming that the request cookie is successfully being set, I moved on to configure the Express server with the cookie parser middleware. app.use(cookie ...

javascriptnode.jsreactjstypescriptexpress