Compact HTML editor infused with AngularJS

Utilizing the TinyCME HTML editor with the angular directive, I am currently displaying the output of the editor - where the content is bound to the "description" property in the scope - within a div using ng-html-bind.

<div ng-bind-html="description" ></div>

While everything seems to be functioning correctly, I am noticing discrepancies between what is displayed in the editor and what appears in the div, especially in terms of styling such as background color and text color. Here is a preview of how it looks in the editor https://i.sstatic.net/GEkTD.png

And this is what I see in the div element:

https://i.sstatic.net/tUOil.png

It seems like the styles applied within the editor are being overridden by the styles defined at the div level.

Since I lack experience in CSS, I apologize for any misunderstanding on my part.

Ultimately, my goal is to mirror the appearance of the editor's output in the div, replicating the visual style exactly. Any suggestions or assistance would be greatly appreciated.

cssangularjstinymce

Answer №1

After successfully resolving the issue, it was discovered that the problem stemmed from ng-bind-html stripping out all styling information provided by the editor, resulting in a lack of styling.

The solution involved utilizing the AngularJS service $sec to instruct ng-bind-html not to remove any content from the HTML string.

In order to incorporate this functionality into an Angular expression, it was necessary to create a filter as shown below:

app.filter('trustAsHtml', ["$sce", function ($sce) { return $sce.trustAsHtml; } ] );

Subsequently, the filter could be utilized within a binding expression like so:

<div ng-bind-html="currentModel.description | trustAsHtml" ></div>

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 default choice vanishes once a non-empty option is chosen

Here is a simple example illustrating my issue: JSFiddle. Initially, I have an empty/default option, but when I select something else from the drop-down, this default option disappears. How can I keep this default option visible after making a selection? ...

javascriptangularjshtml-select

Is there a way to tally up the number of green items and display a <p> tag when every item has been marked green?

I have created a checklist that includes checkboxes. I am looking to display some text when all the checkboxes are checked and green. Can someone assist me with writing the code for this functionality? $(document).ready(function() { $("i").click(funct ...

javascriptjqueryhtmlcss

Use jasmine's httpbackend to create a mock response for any given URL

Presently, I am constructing a test for my Angular application utilizing Jasmine. My goal is to simulate the api call in order to receive certain data. However, the api call in my controller is as follows: $scope.getSubjects = -> $http.get "/api/stu ...

angularjsunit-testingcoffeescript

Send the HTML string to the controller and embed it in an .html file using AngularJS

I am facing an issue with my button toggle functionality. Depending on the active status in the JSON data (1 for on and 0 for off), I want to display either the "off" or "on" button in HTML. I have attempted using ng-bind-html but it did not work as expect ...

javascripthtmlangularjsangularjs-bindingsangularjs-sce

What is the best way to insert space between spans in HTML when designing email templates?

I am currently designing email templates, which means I have some limitations. Although I have used align="center", I still require some spacing between the two spans. How can I achieve this? CODE: <td width="659" height="28" bgcolor="#999999" align= ...

htmlcssemailhtml-email

How to loop through object properties in AngularJS using ng-repeat

I am working with an object structured like this: Obj = { "elements":[ {"name":"something","id":"v1-234"}, {"name":"somethingElse","id":"v1-239"} ], "paging":{ "next" : "100", "total": "2000" }, ...

javascriptangularjsobjectangularjs-ng-repeat

Breaking down a MEAN project into smaller, modular components

Currently, I am involved in a project that heavily relies on the following technologies: - node.js - express - mongodb + mongoose - bootstrap - angularjs + angular-material This project is essentially a MEAN stack project. Since the application will be d ...

angularjsnode.jsmongodbexpressmean-stack

What is the best way to connect to a specific part of a webpage that functions properly on Safari?

On my website, I have a testimonials page with a featured testimonial on the homepage that has a "Read More" option. When users click on this link, I want them to be taken directly to the testimonials page and to the specific section where that particular ...

htmlcss

Taking users to a different page upon selecting a menu item

I am looking for a solution to redirect users to another page when they click on an option from a drop down menu. The drop down menu was created using only CSS. I attempted to use actionlinks within the li tag, but found that it only covered the text area ...

jqueryhtmlcssmodel-view-controller

Does anyone know of a media query specifically designed for desktops that targets devices in 1366*768 landscape mode only?

I managed to create a design that works perfectly for the iPad Pro in landscape mode with a resolution of 1366x1024. It doesn't affect the viewport of my device with a resolution of 1366x768. Take a look at the code snippet below: @media only screen ...

htmlcssbootstrap-4media-queriesmpmediaquery

The footer div appears distinct on various pages despite being the same

After fixing one issue with the footer div, I seem to have created another problem :) The footer is currently broken on this page: You can see that the footer extends across the entire page. Now, compare it to this page: On this page, the footer spans ...

csslayoutstylinghtml

width restriction to only accommodate on two lines

Whether my text is short or long, I always want to ensure that it remains within two lines by defining the width of my div. Short Text +-------------------------+ | Short text goes here | | Short text goes here | +---------------------- ...

jquerycss

Can an element be positioned in relation to the border-box of its parent element?

Check out this jsfiddle for an example: http://jsfiddle.net/apmmw2ma/ <div class='outer'> <div class='inner'> Inner. </div> Outer. </div> div.outer { position: absolute; left: 10px ...

htmlcsscss-position

Tips for invoking a particular function when a row in a Kendo grid is clicked

I have a Kendo grid named "mysubmissionsGrid" and I want to execute a function when each row is clicked with a single or double click. How can I accomplish this? <div class="col-xs-12 col-nopadding-left col-nopadding-right" style="padding ...

javascriptjqueryangularjseventskendo-grid

Folded Sidebar

Is there a way to create a collapsed sidebar without the main div moving to the right after opening it? I want the division to resize to fit the screen size instead. Here is an example of what I am looking for: https://www.w3schools.com/howto/tryit.asp?fil ...

cssbootstrap-4sidebar

Implementing communication between directive and controller in AngularJS by updating the changed value

Typically, the sequence of execution is controller ---> directive, isn't it? Here's a scenario I have: In the controller, we set the default value for placeholder: $scope.formsDropDown = { show: true, placeholder: 'Select a Form ...

angularjsangularjs-directivecontroller

Issue with receiving API response in AngularJS

Currently, my goal is to establish a simple API response using AngularJS and the CXF-JAXRS library in an OSGi environment (KARAF). The challenge lies in retrieving the information sent back from the REST service even though the logs indicate a successful c ...

javascriptangularjsweb-servicesjax-rsosgi

Assistance Needed for a Persistent Footer

I am experimenting with a sticky footer for the first time on my website, but it doesn't seem to be working as expected. There is a large white space followed by a black area (which matches the color of my footer). You can see the issue at this link . ...

htmlcsssticky-footer

live-reload is generating these pesky alerts

I keep receiving these warnings while using live-reload. I'm unsure about the purpose of all these scripts. What is causing these warnings to appear? '//@ sourceURL' and '//@ sourceMappingURL' are outdated, please replace with & ...

angularjsexpressnpm

Dynamic value for textbox using Selenium

While working on building a test case, I encountered a problem with a search text box on my web page. The Selenium IDE was used to record the actions taken. type | id=search_input_char_name_136 | myproduct // textbox for search click | css=button.oe_ ...

cssxpathseleniumselenium-ide