CKEditor with Readonly Option and Active Toolbar Controls

In my current Rails project, I have successfully set up a CKEditor instance in readOnly mode. Everything is functioning as expected.

Now, I am attempting to add a custom plugin button to the toolbar while keeping the textarea in readOnly mode.

After some research, I came across an example here: which suggests that readOnly availability can be defined in the plugin's definition.

Following this advice, I made the following changes to my code:

editor.ui.add('normal_values', CKEDITOR.UI_MENUBUTTON, {
  label: 'Reference Ranges',
        modes: {wysiwyg: 1},
        readOnly: 0,
        icon: '<%= asset_path("icons/book-open.png") %>',
        onMenu: function () {
                var active = {};
                 for (var p in items)
                  active[p] = CKEDITOR.TRISTATE_OFF;

                 return active;
                }
            });

Upon debugging in the browser, I can see the property being passed through Toolbar Object in Javascript Chrome Debugger

However, the plugin button still does not appear.

If anyone has suggestions or guidance on what else I could try, it would be greatly appreciated.

Thank you for your assistance.

javascriptruby-on-railsckeditorreadonly

Answer №1

The read-only property should be included in the "command" definition, not in the "button"

Especially when it comes to custom dialog commands

editor.addCommand( 'LockUI', new CKEDITOR.dialogCommand( 'lockUIDialog' ));

To make it read-only, simply add the property as shown below:

var cmd=new CKEDITOR.dialogCommand( 'lockUIDialog' );
    cmd.readOnly=true;
    editor.addCommand( 'LockUI', cmd );

Answer №2

"In order to designate a command as suitable for read-only access, you can indicate this by adjusting the readOnly property within the command definition to 1 or true." - It is recommended to ensure that 1/true is specified for the readOnly property.

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

Handsontable: How to update renderers when a row is deleted

Implementing Handsontable into our reporting system has been a success, except for one issue. I am using renderers to highlight error cells by setting the background color to red. However, when I remove a row using the context menu's "remove row" opti ...

javascriptjqueryhandsontable

The functionality of Bootstrap toggle ceases to operate properly following an AJAX content update

I am currently using AJAX load to fetch some content on my webpage. I am working with Bootstrap 3 and Bootstrap toggle. When the content is loaded, the Bootstrap 3 content functions properly (the panel-primary panel is clearly visible). However, the Bootst ...

javascriptjqueryhtmlajaxtwitter-bootstrap

Issue: Assertion violation: The use of <Link> element is restricted to within a <Router>. Any solutions or suggestions?

In my React and Next Js application, I am utilizing react-router-dom for routing purposes. The dependencies listed in the package.json file are as follows: This is how my current package.json file looks: { "name": "MUSIC", "versio ...

javascriptreactjsreact-routernext.jsreact-router-dom

What could be the reason that Ng Repeat fails to work when a button is triggered from a separate form

I have an HTML table that includes an ng repeat directive and two buttons. The first button opens a modal with a form to create a new user. When I click save, it adds the new user to the list. The second button is within the same form and also adds a user. ...

javascriptjqueryangularjsjspangularjs-ng-repeat

Steps for making a toggle button with Bootstrap

Initially, I developed a web application using HTML, CSS, and JavaScript. Later on, I was requested to recreate it using Bootstrap as well. While I managed to complete the task successfully, I encountered an issue where toggle buttons in the web app revert ...

javascriptjquerycsstwitter-bootstrapjqtouch

Tips for implementing fluid transitions between mouse X and Y coordinates using JavaScript

I recently developed a function that enables a DOM element to follow the mouse cursor. You can check out the code here. Currently, I am looking for suggestions on how to add a nice animation to this feature. Ideally, I want to incorporate a slight delay w ...

javascriptjquerycss

Is there a way to categorize data and sort it by using an action and reducer in redux?

I have developed a filtering system that allows users to filter data by different categories such as restaurants, bars, cafes, etc. Users can select whether a specific category should be displayed or not, and this information is then sent to the action and ...

javascriptreactjsreact-nativeobjectredux

Adding images in ascending order according to the parent div's ID

If I have three different divs with unique IDs on a webpage <div id="product-id-001"></div> <div id="product-id-002"></div> <div id="product-id-003"></div> Is there a way to add image elements based on the ID of each d ...

javascriptjqueryimageappend

The function json.stringify fails to invoke the toJson method on every object nested within the main object

When using IE 11, I encountered an issue where calling Stringify on my objects did not recursively call toJson on all objects in the tree. I have implemented a custom toJson function. Object.prototype.toJSON = function() { if (!(this.constructor.name == ...

javascriptjsoninternet-explorercross-browser

Explain the process of data binding with DOM elements

I'm intrigued by how jQuery has the ability to link arbitrary data with any DOM element without the use of HTML data attributes. $('#div_id').data('suffix', (count++)); In the Firebug HTML snapshot, I don't see any data attr ...

javascriptjquery

Utilizing Three.js with interactive functionalities and advanced transformation controls

I'm facing an issue with my project where I am using three.interaction to capture click events on certain objects and add transformControls to them. The problem I'm encountering is that the transform controls seem to block the click event on oth ...

javascriptthree.js

My handleChange function is inaccessible to the event listener

ParentComponent.js (App.js) import React from "react"; import ChildComponent from "./ChildComponent"; import data from "./data"; import "./styles.css"; class ParentComponent extends React.Component { constructor() ...

javascriptreactjs

Differences between ng build --prod and ng --build aot in Angular 7

Recently, I successfully built an Angular 7 application using the command ng build --prod. However, I am now facing a dilemma regarding ng build --aot versus ng build --prod. Our application is currently deployed on ..., and although it runs successfully ...

javascriptnode.jsangulartypescriptsingle-page-application

Can React tooltips have properties that allow for changing text styles, such as making text bold or unbold?

Seeking assistance on how to change bold text to regular text in react-tooltip. I have already installed npm react-tooltip. Note: The default text appears in bold and I would like it to be normal. ...

javascriptreactjsnpmweb-applicationsreact-tooltip

Preventing Angular button click when an invalid input is focused out

Here is a Plunker link http://plnkr.co/edit/XVCtNX29hFfXtvREYtVF?p=preview that I have prepared. In this example, I've asked you to: 1. Enter something in the input field. 2. Click directly on the button without interacting with any other element. ...

javascriptangularjs

jQuery mobile collapsed list view is not functioning correctly when used with search feature

I have successfully implemented a listview in jquery with a listdivider that includes a filter function. The search feature works perfectly, however, when collapsing either of the list dividers, the search functionality stops working altogether. <!DOCT ...

javascriptjquerylistviewdomjquery-mobile

The Mantine date picker is causing an error stating that objects are not valid as a React child

I'm currently experimenting with utilizing Mantine Date in NextJS. The goal is to have the selected date displayed in the HTML text heading when a user clicks on it. For instance, if a user selects January 1st, 2023, the text should show like this: Da ...

javascripthtmlreactjsnext.js

What is the method for creating a line break in text?

Here is some example code I have: <h3 class="ms-standardheader"> <nobr> Reasons for proposals selected and not selected </nobr> </h3> Now I also have an image to show. The problem is that my text appears too large, so I a ...

javascriptjquery

Express npm dependency fails to start globally

I have recently reinstalled my operating system from Windows 8.1 to Windows 8.1, and I have been using npm for quite some time. Previously, it was working fine as mentioned here. After the reinstallation, I tried installing npm i -g express, but it does n ...

javascriptnode.jsexpressnpm

Attempting to send an identification number as the form value through a form select element, all while displaying the name of the object

Please choose a product category <select placeholder='product category' name="selected_product_category_id" value={formInput.selected_product_category_id } ...

javascriptreactjsruby-on-railsrubyobject