Mastering special characters in JavaScript: The usage of the "/" character

I have upgraded my vbulletin to version 4.2.0 and I successfully added a custom button to its editor following this tutorial:

Now, I am trying to incorporate a syntax highlighter code using this button.

When I use the code provided below, it works perfectly fine;

CKEDITOR.plugins.add( 'YourPluginName',
{
    init: function( editor )
    {
        editor.addCommand( 'SayHello',
            {
                exec : function( editor )
                {    
                        editor.insertHtml( "Hello from my plugin" );
                }
            });
        editor.ui.addButton( 'YourPluginName',
        {
            label: 'My Button Tooltip',
            command: 'SayHello',
            icon: this.path + 'YourPluginImage.png'
        } );
    }
} );  

However, I modified the code to the following in order to add specific text like so;

CKEDITOR.plugins.add( 'DKODU',
{
    init: function( editor )
    {
        editor.addCommand( 'SayHello',
            {
                exec : function( editor )
                {
                        editor.insertHtml( '[kod=delphi][/kod]' );
                }
            });
        editor.ui.addButton( 'DKODU',
        {
            label: 'My Button Tooltip',
            command: 'SayHello',
            icon: this.path + 'star.png'
        } );
    }
} );

After updating the code, pressing the button does not produce any results. I have searched on Google and various sites but failed to identify the issue. I believe I may have made a mistake with special characters, but I am unable to pinpoint the problem.

If there are any errors in my question, I apologize. Additionally, forgive my poor English. Thank you.

Answer №1

To avoid the '/' character, use a '\' similar to how it is done in C/C++ and various other programming languages

therefore,

editor.insertHtml( '[kod=python][\/kod]' );

Answer №2

Big thanks to everyone for their valuable contributions, I managed to find a solution using the following code snippet:

let start="[code=javascript]";
let end="[/code]";
CKEDITOR.plugins.add( 'CODEBLOCK',
{
    init: function( editor )
    {
        editor.addCommand( 'CODEBLOCK',
            {
                exec : function( editor )
                {    
                 editor.insertHtml(start);
                 editor.insertHtml('');
                 editor.insertHtml(end);
                }
            });
        editor.ui.addButton( 'CODEBLOCK',
        {
            label: 'Insert JavaScript Code',
            command: 'CODEBLOCK',
            icon: this.path + 'code.png'
        } );
    }
} );  

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

Reset the dropdown menu in React by setting a disabled option as the default selection

One issue I'm facing is trying to reset some dependent dropdowns that are controlled by react state. The functionality works fine, except when the default option is set as disabled. I came across this code snippet in a fiddle from another stackoverfl ...

Displaying the most recent queries retrieved from a search API

Our web application built on angular.js utilizes a REST search API to query users within the system. The endpoint for searching users is: search/user?q='abc' Upon revisiting the web application, we aim to display the user's recent search ...

Utilize JavaScript declarations on dynamically added strings during Ajax loading

Is there a way to append HTML strings to the page while ensuring that JavaScript functions and definitions are applied correctly? I have encountered a confusing issue where I have multiple HTML elements that need to be interpreted by JavaScript. Take, for ...

Is it possible for me to create a distinct component that can display numerous input fields at once?

Introducing the inputArea component, which collects data from input fields and sends it to the server: export default class InputArea extends React.Component { constructor(props){ super(props); this.state = { draw_number: '', ...

Identify specific elements using CSS to easily target them with JavaScript later on

Currently, I am utilizing CSS selectors to target specific elements and now I want to be able to identify those elements using javascript. My approach involves setting the color of these elements in css and then retrieving them based on their color. Howeve ...

Incorporate the JavaScript file fetched from NPM into the app.js code

New to using node and npm, I recently set up my main JavaScript file called app.js and configured webpack nicely. Inside app.js, I currently have the following script: //require in jquery var $ = require('jquery'); //require a constructor f ...

When I click on .toggle-menu, I want the data-target to have a toggled class and the other divs to expand

Looking to achieve a functionality where clicking on .toggle-menu will toggle a class on the specified data-target element and expand other divs accordingly. jQuery(document).ready(function() { var windowWidth = jQuery(window).width(); if (win ...

Enhancing appearance with $refs?

Having trouble adding style to the $refs attribute. I keep getting an error message saying "Cannot set property 'cssText' of undefined." Is there a way to accomplish this task? I haven't come across anything similar to this issue before. th ...

AngularJS showcases the full spectrum of available methods

I am struggling to create a method for composing a URL in my class. Here is what I have attempted: The createLink method takes an ID and returns the corresponding URL: console.log("before the method"); console.log($scope.createLink ) $scope.createLink = f ...

Guide on utilizing the <source> tag within v-img component in Vuetify.js?

When it comes to using webp images instead of jpg or png, some browsers may not support the webp format. In such cases, we can use the html tag < source > as demonstrated below, ensuring that at least a jpg image is displayed: <picture> < ...

Error Encountered with Next.js 13.4.1 when using styled-components Button in React Server-Side Rendering

I am currently working on a React project using Next.js version 13.4.1 and styled-components. One problem I'm facing is with a custom Button component that I've created: import React from 'react'; import styled from 'styled-compone ...

Manipulate SVG elements by dragging them along the boundary of the path

Looking to achieve a specific functionality where I can drag and drop an element along the edges of a drawn path, rather than inside the path itself. To clarify, the goal is to move the red marked element on the black line bordering the path, allowing move ...

Attempting to grasp the concept of memory leakage in a more thorough manner

As I dive into the world of frontend development and start learning Vue.js, I came across a paragraph in the tutorial that caught my attention: Vue.js makes rendering a template seem simple, but under the hood it does a lot of work. The data and DOM are ...

Reacting - page is not refreshing

Describing my current scenario: I have a requirement where I need to be able to navigate to a /details page by clicking on an image. However, when I click on the image, the URL gets refreshed but my component does not load. I attempted various solutions ...

How come the output of the multiplication is not visible in the template using JavaScript, but it is visible when inspecting the element in Chrome DevTools?

I have integrated some JavaScript into my Django project to handle system calculations. However, I find it odd that something as simple as the result of a multiplication is not reflected on the webpage template but only in the Chrome Dev Tools. Below are ...

Retrieve information from the index resource using AJAX

I feel like I might be overcomplicating things, but basically, I'm trying to retrieve all the data from an index resource and have it load when a button is clicked using AJAX. I've been using a serializer to tidy up the JSON. Both "/categories" ...

Dealing with JS and Spring issues

I created a simple script that retrieves longitude and latitude values and populates an input form. Here is the HTML: <p id="demo">Click the button to get your coordinates:</p> <button onclick="getLocation()">Try It</button> <sc ...

Seamless changes with graceful fades while transitioning between classes

Is it more efficient to handle this in CSS than using jQuery? I'm not entirely sure. If anyone has a solution, that would be greatly appreciated. However, I am currently facing an issue with the jQuery method I have implemented. It successfully fades ...

What is the best way to capture data sent by Express within a functional component?

const Header = (props) => { const [ serverData, setServerData ] = useState({}); useEffect(() => { fetch('http://localhost:4001/api') .then(res => res.json()) .then((data) => { setServerData(data); ...

Troubleshooting problems encountered when duplicating an array in JavaScript

I am attempting to utilize properties and flatmap to modify an array without altering the original data. I have implemented this method in two different instances within a single dispatch call in Vue.js when transferring data from parent to children comp ...