I am inserting this content for a button
<button type="button">Click Me!</button>
xxxxxxAfter clicking saving this content i am getting a raw data which is getting saved in db
<p><span class="highLT"><</span><span class="highELE">button</span> <span class="highATT">type=</span><span class="highVAL">"button"</span><span class="highGT">></span>Click Me!<span class="highLT"><</span><span class="highELE">/button</span><span class="highGT">></span></p>
<p><strong><span class="highGT"> xxxxxx</span></strong></p>Instead of this what i want is plain html content
Take a look at the example now
I added an image and a button
If you see in demo.js ctrl.tinymce is just a string of HTML
to get it to show with ng-bind-html you need to run it through $sce.trustAsHtml()
or you could use the inline version of tinymce editor for display mode
@deeg very true this thing i know but the trouble is i am inserting html tag as a plain text in editor and in db it is getting saved as
<p><span class="highLT"><</span><span class="highELE">button</span> <span class="highATT">type=</span><span class="highVAL">"button"</span><span class="highGT">></span>Click Me!<span class="highLT"><</span><span class="highELE">/button</span><span class="highGT">></span></p>
<p><strong><span class="highGT"> xxxxxx</span></strong></p>If i can get the string contains html then i can use $sce.trustAsHtml() and displayed it in div
I am typing html content into editor not inserting via angular
You are looking for core tinymce features
If you go to their full featured example (https://www.tinymce.com/docs/demo/full-featured/) you can see that you can edit the source code to add images through tools -> source code
You would have to go about adding the tags you want to their whitelist
That is the best way I know though
tinymce is a text wysisyg editor. Not meant to take in HTML and display HTML. They have plugins which allow you to add images by provding links and such. My guess is you want to take advantage of those features instead of directly pasting in HTML into the editor
At their plugin page (https://www.tinymce.com/docs/plugins/) you can also see plugins people have written to help with these things like PowerPaste
depending on how your directives are set up you might be able to use $emit instead of $broadcast
This changes the readonly setting and then fires the refresh event.
Hmm, that works. Is there a simpler way to do this without having to call $emit or $broadcast? I basically have a page that has over 50 different tinyMCE objects, and $emit takes a while to update the page. https://plnkr.co/edit/jdtVjW94e0xdc9PnIRaL?p=preview
I figured it out! https://plnkr.co/edit/jdtVjW94e0xdc9PnIRaL I push the
Editor instance upon setup into an array within the scope. Then, when the "edit" button is clicked, I call the setMode method on all Editor instances stored in the array. This makes the code a bit more easier to read and it avoids having to emit/broadcast the TinyMCE. One minor issue however is that when updating the mode of all Editor instances, it calls $apply too many times causing Angular to throw the $apply already in progress error.
I use tinymce with a yeoman project and as you might imagine the inclusion of themes and plugins doesn't go all to well with that. I solved it by using a cdn for all the resources. Like this
```js
{
...
external_plugins: {
link: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/plugins/link/plugin.min.js',
paste: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/plugins/paste/plugin.min.js'
},
theme_url: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/themes/modern/theme.min.js',
skin_url: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/skins/lightgray',
...
}
```js
{
...
external_plugins: {
link: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/plugins/link/plugin.min.js',
paste: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/plugins/paste/plugin.min.js'
},
theme_url: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/themes/modern/theme.min.js',
skin_url: 'https://cdnjs.cloudflare.com/ajax/libs/tinymce/4.3.12/skins/lightgray',
...
}
Is there a better way?
Its kind of tricky as I don't want to copy all the plugins to the dist folder of my app. I could add them manually to my gruntfile so they are copied over and not concated but its kind of ackward. It kind of works like this but its not pretty
@deeg I publish '$tinymce:refresh' event to rebuild editor when I sort a list of editors in angular. But I found everytime directive received the event without unbind it which generated a lot of listeners in scope. This is my angular-ui/ui-tinymce#272 (Maybe there's something wrong in test code. Why I pull request with simple change and causes building failed)
Hello guys, I am new for tinymce. Can somebody tell me, how can i load my html template in editor? Only throw tinymceModel or u know some other methods? Cuz it is a little bit strange to send my template like string in ng-model. Sorry for English, btw. Maybe somebody have good examples about my problem? Google didnt help me ((
Hey :)
Is there an Example for UI-TinyMce/TinyMce with Angular 1.5.x & ECMAScript6 for Saving Content to Database through ng-repeat generated TinyMce Editors(it means there are more than one)?
The https://www.tinymce.com/docs/plugins/save/ is not really helpfull :/
Is there an Example for UI-TinyMce/TinyMce with Angular 1.5.x & ECMAScript6 for Saving Content to Database through ng-repeat generated TinyMce Editors(it means there are more than one)?
The https://www.tinymce.com/docs/plugins/save/ is not really helpfull :/
Could someone Help me with that please?
http://stackoverflow.com/questions/41061781/multiple-tinymce-not-showing-init-right
http://stackoverflow.com/questions/41061781/multiple-tinymce-not-showing-init-right
This is the expected markup which is created dynamically
<textarea data-ng-model="cv.experience[content.title]"></textarea>
<textarea data-ng-model="cv.experience[content.title]"></textarea>This is the sample of the JSON I want to achieve
experience:{
content:[
{
header:String,
title:String,
start_date:Date,
end_date:Date,
location:String,
description:String
},
{
header:String,
title:String,
start_date:Date,
end_date:Date,
location:String,
description:String
},
....
]
}How can i archive above structure using ** ng-model **
