Choose a specific example using the class name in nicEdit

Question

Choose a specific example using the class name in nicEdit

Is there a way to select an instance using nicEdit based on its class name rather than just its id?

For example:

<div class="myInstance1">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed magna dolor, faucibus ac, iaculis non, cursus et, dui. Donec non urna. Aliquam volutpat ornare augue. Phasellus egestas, nisl fermentum porttitor rutrum, magna metus rutrum risus, id fringilla magna mi nec lorem.
</div>

Attempting to call nicEdit like this:

<script type="text/javascript>
     bkLib.onDomLoaded(function() {
          var myNicEditor = new nicEditor();
          myNicEditor.setPanel('myNicPanel');
          myNicEditor.addInstance('myInstance1');
     });
</script>

Unfortunately, it does not work unless the class is actually an id. Any suggestions?

javascript editor wysiwyg nicedit

Answer 1

Answer №1

The issue at hand pertains to the distinction between an ID and a class. The function "addInstance" aims to add a single instance and link it to the provided ID. As IDs are unique per page, nicEdit can easily identify them.

However, using a class could potentially lead to multiple instances, which is not the intended behavior of this function.

A possible solution would involve creating a loop to iterate through each occurrence of the class, assigning a unique ID to each instance based on the loop number.

The implementation would resemble the following code snippet: Assign the "nicinstance" class to any area intended to be a nicedit area. Iterate through this class, assign a unique ID, and create a new instance based on that ID.

bkLib.onDomLoaded(function() {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    $( ".nicinstance" ).each(function( index ) {
     $(this).attr("id","myInstance"+index);
     myNicEditor.addInstance('myInstance'+index);
    });
});

Answer 2

The issue at hand pertains to the distinction between an ID and a class. The function "addInstance" aims to add a single instance and link it to the provided ID. As IDs are unique per page, nicEdit can easily identify them.

However, using a class could potentially lead to multiple instances, which is not the intended behavior of this function.

A possible solution would involve creating a loop to iterate through each occurrence of the class, assigning a unique ID to each instance based on the loop number.

The implementation would resemble the following code snippet: Assign the "nicinstance" class to any area intended to be a nicedit area. Iterate through this class, assign a unique ID, and create a new instance based on that ID.

bkLib.onDomLoaded(function() {
    var myNicEditor = new nicEditor();
    myNicEditor.setPanel('myNicPanel');
    $( ".nicinstance" ).each(function( index ) {
     $(this).attr("id","myInstance"+index);
     myNicEditor.addInstance('myInstance'+index);
    });
});

Choose a specific example using the class name in nicEdit

Answer №1

Similar questions

ng-click not functioning correctly within templateUrl directive

Tips for implementing two Secondary Actions in React Material UI, with one positioned on the left corner and the other on the right, while ensuring that the behavior of the

Implementing React router for dynamic page rendering

Creating synchronicity in your code within the useEffect hook

Utilizing ng-repeat $index for locating an element within an array

When making an ajax call, I passed the data "itemShape" but on the URL page, an error appeared stating "Undefined index: itemShape"

Twice the calls are being made by jQuery Ajax

Tips for implementing lazy loading for a section of a template in Angular 2

Error: Unable to access the 'ht_4year_risk_opt' property because it is null

Exploring ways to reach a specific digit level in JavaScript

My JSON request seems to be malfunctioning and I can't figure out why

tips on assigning a unique ID to an item in a firebase database collection

Finding a character that appears either once or thrice

There appears to be an issue with the functionality of the Bootstrap toggle tab

Techniques for eliminating text enclosed by double parentheses in javascript

What is the process for deleting an event in Vue?

Submit the image to the server independently from the form

Can fetch be used to retrieve multiple sets of data at once?

Navigating through an array in Pug

Sending dynamic information to bootstrap's modal using props in VueJS