Create a personalized button | CKEditor Angular 2

I am currently working on customizing the CKEditor by adding a new button using the ng2-ckeditor plugin. The CKEditor is functioning properly, but I have a specific requirement to implement a button that will insert a Rails template tag when clicked.

For example:

I can include the button as shown below, however, I am unsure about how to write the method that will insert the <%= sender_name %> tag at the current text position in the CKEditor.

<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckbutton [name]="'saveButton'"
      [command]="'saveCmd'"
      (click)="save($event)"
      [icon]="'save.png'"
      [label]="'Save Document'"
      [toolbar]="'clipboard,1'">
    </ckbutton>
</ckeditor>

Any assistance on how to achieve this functionality in Angular 2 TypeScript would be greatly appreciated.

jqueryangulartypescriptckeditor

Answer №1

At long last, I have discovered the solution, and it happens to be quite straightforward and easy.

within ckeditor.component.html

<ckeditor
  [(ngModel)]="ckeditorContent">
    <ckbutton [name]="'saveButton'"
      [command]="'insert_name'"
      (click)="insert_name($event)"
      [icon]="'./path/to/icon.png'"
      [label]="'Insert User Name'"
      [toolbar]="'clipboard,1'">
    </ckbutton>
</ckeditor>

ckeditor.component.ts

insert_name(event){
  event.insertText("#{user_name}");
}

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

Exploring the power of jQuery's deferred method and utilizing the ajax beforeSend

Using the deferred object in $.ajax allows for: Replacing the success-callback with the deferred-method done() Replacing the error-callback with the deferred-method fail() And replacing the complete-callback with always() When using: var jqxhr = $.ajax ...

javascriptajaxjquery

Troubleshooting problem with fetching data from Angular API

Looking to use Angular to extract a specific value from the following API: Current code snippet being utilized: app.controller("api", function($scope, $http) { $scope.home = "This is the homepage"; $scope.getRequest = function() { console. ...

angularjstypescript

Having difficulty handling the "of" class within the "rxjs" framework

I have created a custom class named ValueService. Here is the code snippet: import { Injectable } from '@angular/core'; import { of } from 'rxjs'; import { delay } from 'rxjs/operators'; @Injectable() export class ValueSer ...

angularrxjs

Utilize jQuery ajax to target a particular recurring input

I am using HTML code along with another jQuery loop. Within this loop, there is an input element that is also being looped. I am trying to manipulate it using jQuery Ajax... but I am facing an issue where only the first input element works properly. The re ...

javascriptjqueryajax

What is the best technique for creating a preloader that can seamlessly fill the background of a vector image?

I am looking for guidance on creating a CSS3 preloader using a vector image. My goal is to have the logo start off transparent with only the border visible, and as the loading occurs, fill in from bottom to top with the background color. Thank you to ever ...

javascriptjqueryhtmlcsscanvas

Tactics for postponing a js function post-click

I need to implement a delay after clicking a button to fetch some data. The code will be executed within the browser console. $(pages()) is used to retrieve the pagination buttons. let calls = []; for (let i = 1; i <= callPagesCount; i++) { ...

javascriptjquery

Is it possible to obscure the PHP file path and conceal the parameters in a POST request?

Is there a way to securely increase the liking number on records in a database without exposing sensitive information through post requests? The PHP file and GET parameters are visible in the post request, allowing anyone viewing the page source to poten ...

phpjqueryajaxpost

Node.js to Django cross-site request forgery (CSRF) vulnerability

I am struggling to pass the csrftoken from node.js to django. Below is the code snippet from my server.js: socket.on('unread global', function (data) { var values=querystring.stringify(); var options = { hostname:'localhost', por ...

javascriptjquerydjangonode.js

Angular 4 with Universal: Implementing 404 Status Code in Header for /404 Page Component

After researching and reviewing numerous StackOverflow inquiries, I have come to the conclusion that headers are derived from responses served by servers, making it a non-issue. I attempted to rectify the situation from my server.ts file but unfortunately ...

javascriptangularexpressangular2-routingangular-universal

Memory Leak in Angular's Chain of mergeMap and concatMap Functions

I am facing an issue where a memory leak is being caused for each processed file during the upload of a 1 TB folder to Blob Storage. I have implemented a parallel processing pipeline using mergeMap to handle the files through a series of steps with concatM ...

angulargoogle-chromerxjs

Problem with sending JSON-encoded arrays to an API

After successfully connecting to an API via Postman, I encountered an issue with my AJAX call. The error message returned is: Object {status: false, message: "Add amenities in JSON string"} The problem seems to be related to the amenities parameter, as ...

javascriptjqueryjsonajax

Controlling an AJAX request to fetch individuals

I am currently using an ajax request to display people data on the page, which is retrieved from a backend database. The search form on the page includes options for location, sector, service, and job title. Below is the javascript code being used: //var ...

javascriptjqueryajax

A Great Option for Easy Drag and Drop Functionality

Currently researching options for Drag and Drop functionality with items such as images and textareas. Need a solution that provides coordinates of where the item is dropped on screen, saves it, and allows placement in the exact same location later. Desir ...

javascriptjquerydom

Utilizing a setup module for configuration purposes

In the process of developing my angular application, I have integrated several external modules to enhance its functionality. One crucial aspect of my final application is the configuration classes that store important values like URLs and message keys us ...

angulartypescript

AJAX in jQuery cannot be used to send data to a PHP

I am facing an issue with my script that uses AJAX to post data to the server and display it, but unfortunately, it is not functioning properly... Here is the current output: Your viewport width is 1332x670 Ajax initialization failed! In this scenario, ...

phpjqueryajaxpost

Bold Chutzpah: Delving into AngularJS Testing using Jasmine and TypeScript

Currently, I am utilizing Angular 1.4.9 in combination with Jasmine 2.2.0 and Chutzpah 4.2.0. My Angular code and unit tests are both written in TypeScript within Visual Studio 2015 Update 1. The issue I am facing mirrors that which was previously discuss ...

angularjsjsontypescriptjasminechutzpah

What is the equivalent of getElementById in .ts when working with tags in .js?

Looking to incorporate Electron, Preload, Renderer with ReactJS and TypeScript into my project. <index.html> <body> <div id="root" /> <script src='./renderer.js'/> </body> <index.ts> const root = Re ...

javascriptreactjstypescriptelectron

A guide on triggering a new chart to appear beside the adjacent <div> when a bar is clicked in a highchart

I'm a beginner with Highcharts and I have a requirement for two charts (let's call them Chart A and Chart B). Creating one chart is straightforward. What I need is, upon clicking on a bar in Chart A, a new chart (Chart B) should open next to the ...

javascriptjquerycsshighcharts

Display a div upon loading with the help of Jquery

Two divs are causing me trouble! <div id="loader"> </div> and <div id="wrapper"> </div> "The wrapper div is not located inside the loader div just to clarify." This is my code: $(window).bind("load",function() { $(&apos ...

jquerycssloadingwrapper

The success function in jQuery Ajax is not triggered in Internet Explorer

I am currently utilizing JQuery. Below is my JQuery code that is functioning properly in Firefox, but is encountering issues in Internet Explorer. 1) I am not receiving the test alert after the Jquery Ajax call. Here is the code snippet: $('#sk ...

jquery