angular-ui / ui-tinymce Goto Github PK
View Code? Open in Web Editor NEWAngularUI wrapper for TinyMCE
License: MIT License
AngularUI wrapper for TinyMCE
License: MIT License
Im new to this, but when i try to follow the guide for installing this bower cant find angular-ui-tinymce. I tried bower search for just angular and some of the other angular-ui modules show up, but not this.
Is this an error on my part or is it something that needs to be fixed here? Should i just bower install and point it to this repo? (seems in the documentation that that is possible)
Uncaught TypeError: Object [object Object] has no method 'on'
on line 33
Still not working:
I use https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js and tinymce4.0. All is working fine except when i start to resize a table inserted by the table-plugin, the table sticks to cursor and its not possible to set the size of the table on mouse-up except you leave and click somewhere outside the editor.
I created an example (http://volker-ahlers.de/tinimce/) with angular-ui.tinymce implementation (first link) and jquery implementation (works fine) .
To test it, you create a table and then resize it in both windows.
Using angular-ui-tinymce & ng-boilerplate.
TinyMCE tries to load the theme file from the directive folder:
http://localhost/smartangular/build/vendor/angular-ui-tinymce/src/themes/modern/theme.js
Trying to set any of this settings and nothing happens!
{
base: '',
relative_urls: false,
document_base_url: 'path/to'
theme_url: 'path/to'
}
When TinyMCE is configured to appear in "inline" mode, via the inline: true
configuration option, then text entry does not work properly. With a textarea element, the text disappears, whereas with divs, the caret is repeatedly moved to the beginning of the content, resulting a kind of backwards-writing effect. See this plunkr for a demonstration (happens in Chrome and Firefox).
Issue: when the element is removed (e.g. via an ng-if condition changed), the old mce element is left in the DOM. Adding the following code block to link function would fix the problem:
elm.on('$destroy', function(e){
elm.parent().children('.mce-panel').remove()
});
I am reading the documentation and it states: "The ui-tinymce directive stores and expects the model value to be a standard javascript tinymce object." Sorry but I am not clear on what is a "javascript tinymce object". A few lines more to explain this would be a great help.
When looking at the code I notice some different options. For example:
link: function (scope, elm, attrs, ngModel) {
var expression, options, tinyInstance;
// generate an ID if not present
if (!attrs.id) {
attrs.$set('id', 'uiTinymce' + generatedIds++);
}
Would it be possible for someone to document these options. I really like this code but I think as it stands it's a bit difficult to use without some more documentations and some Plunker examples.
I can't see anything in the code that fetches the tinymceOptions
property from the controller as per the docs:
https://github.com/angular-ui/ui-tinymce#options
myAppModule.controller('MyController', function($scope) {
$scope.tinymceOptions = {
handle_event_callback: function (e) {
// put logic here for keypress
}
};
});
<form method="post">
<textarea ui-tinymce ng-model="tinymceModel"></textarea>
</form>
Any plan to create a native directive for a WYISWYG editor?
Maybe ui-wysiwyg?
The only update model bindings are for 'ExecCommand' and 'KeyUp' which takes care of the majority of update to the editor window, however, if you make a change to the source code directly via the editor 'Source Code' button, the model is not updated unless making an a keystroke so the 'KeyUp' binding executes.
Quick Reproduce:
I'm attaching a pull request that binds to 'SetContent' in addition to 'KeyUp' and 'ExecCommand'.
After submitting this, I see that this was added Aug. 4th and I had an outdated version. However, when I updated to current version, it's not working for me still (my example from source code).
It appears to break when I open the editor again (I have the editor inside a angular ui modal). It now works as intended initially, but if I reopen the modal, the bindings seem to be messed up and I am unable to change the contents of the editor without it reverting back to its original state.
One problem I am having with TinyMCE editor and Angular UI's light wrapper is that ng-model doesn't appear to do the 2-way binding that I would expect with the model data on the scope when changes are made in the editor. This problem only seems to happen when <div>
or <p>
is used.
The 2-way binding seems to work just fine when I use <textarea>
, but this is not what I want... I want an inline editor.
Here are my options:
$scope.tinymceOptions = {
inline: true,
menubar: false,
statusbar: false,
toolbar: "bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link | removeformat"
};
In my case, if there is content in pageElement.text
, it will actually get put into the TinyMCE editor just fine. However, once TinyMCE does this, the text is deleted from pageElement.text
altogether, and the ng-model
binding that it has to pageElement.text
is no longer being respected:
<div class="pageParagraph">
<div class="contenteditable"
ui-tinymce="tinymceOptions"
ng-model="pageElement.text"></div>
<p>{{pageElement}}</p>
</div>
Here's a screenshot:
How can I get 2-way binding to occur when TinyMCE is in inline mode?
If you change a link (not set), model is not updated.
In link plugin.js
line 47, replacing:
// Update model on change, i.e. copy/pasted text, plugins altering content
ed.on('SetContent', function (e) {
By:
// Update model on change, i.e. copy/pasted text, plugins altering content
ed.on('change', function (e) {
is working. But I mean SetContent
has been used for a good reason. If not I will do a PR.
I'm unable to get formatting other than paragraph tags copy into my model when posting to a server.
When I make edits that add bold, for example, the items do not come through in the post. It ends up looking something like this:
"bodyDraft": "<p>NEW Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui.</p>\n<p>Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>\n<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi.</p>\n<p>Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus</p>"
The problem is because there is two similar tags: "0.0.5" and "v0.0.5",
bower with dependency:
"angular-ui-tinymce": "latest"
will not install latest version - it will install old one from tag 0.0.5
I have the following code with the latest release of code that I downloaded on June 27th.
<form novalidate name="itemForm" style="margin-bottom: 0px;">
<input class="input-medium" data-ng-disabled="action=='delete'" data-ng-model="formData.title" id="Text2" required type="text">
<tab ng-repeat="tab in formData.answers" heading="{{$index + 1}}" active="tab.active" disabled="tab.disabled">
<label for="inputName">Answer {{$index + 1}}</label>
<textarea data-ui-tinymce data-ng-model="tab.text" style="width:400px; height:200px"></textarea>
</tab>
</form>
<button type="submit"
class="float-right btn"
data-ng-click="submitItem(formData)"
data-ng-disabled="itemForm.$pristine">
{{modal.submitText}}</button>
<button>
When I type into the input box at the start of the code the submit button becomes enabled. However when I type into the tinymce window the button does not become unabled. Everything else works okay but just not the form's dirty / pristine state. Would appreciated some advice on how to handle this problem.
It seems there is a problem when trying to reuse a tinymce configuration for more than one textarea. Please see my related post on Stack Overflow:
I am adding tinymce inside a partial using ng-include. This is not working. When I move the same syntax to the view file, it is loading properly. Any suggestion, how can I add tinymce inside a partial?
<!-- Not working inside, a HTML partial -->
<textarea ui-tinymce ng-model="data.describe"></textarea>
I'm getting the following error when using ui-tinymce:
Uncaught TypeError: Cannot call method 'add' of undefined
It is pointing to this:
setup: function (ed) {
ed.onInit.add(function(ed) {
ngModel.$render();
});
ed.onSetContent.add(function (ed, o) {
if (ed.isDirty()) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
}
});
},
It is preventing me from adding options to my text box. Am I doing something wrong?
When model value is changed programmatically, tinymce editor is not updated. I've tested this with angular-js 1.2.10.
Debugging the code shows that render method is not called because input's render model overrides it.
I tried to set the 'priority' of the directive to 1000 but it seems that it does not affect the order of execution of the link functions.
I resolved the issue by overriding the render method within setTimeout in tinymce directive:
setTimeout(function () {
tinymce.init(options);
// this is added to override render
if (ngModel.$render != render) {
var originalRender = ngModel.$render;
ngModel.$render = function() {
originalRender();
render();
};
}
});
// I set the render function to a variable to compare it in setTimeout above
var render = function () {
if (!tinyInstance) {
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
ngModel.$render = render;
List of all supported methods
We can either add full jquery to dependencies list or write blur event trigger method by ourselves.
I have a list of items, one of the items can be a tinymce editor. this list can change the order of the items in it. once i change the order of the items, my tinymce stops working.
here is a demo of my code(haml):
%li{:"ng-repeat"=>"item in items | toArray | orderBy:'position'",:class=>"item",:"ng-class"=>"{in_edit:item.in_edit}"}
.edit{:"ng-show"=>"item.in_edit"}
.close_item{:"ng-click"=>"remove(item)"}
.save_item{:"ng-click"=>"save(item)"}
.include{:"ng-include"=>"",:src=>"item.type"}
%script{:type=>"text/ng-template", :id=>"text"}
%textarea{:"ui-tinymce"=>"",:"ng-model"=>"item.body"}
Hello again!
In the readme it says that we should use this to set options:
$scope.tinymceOptions = { ... }
I could not get that to work and i found no code that looks to be doing that in the source. (might be some angular- convention i dont know about?)
I did however find support for config via attributes:
if (attrs.uiTinymce) {
expression = scope.$eval(attrs.uiTinymce);
In the latest version of chrome on OS X this does not work, since it seems to treat all attrs on html-elements as lowercase, so i had to change to attrs.uitinymce to get it to read the settings. Then it works :)
So, is this a bug (or two) or have i just not understood how to use this?
When i add handle_event_callback to the options. In the functions handling the callback (as described in the readme.md) the parameter e is undefined this makes it impossible to check which event fired. The usecase for this is that i want to save the changes made to remote server when focus of the editor is lost.
Has anyone had issues with this?
Similar to issue #12.
His problem was that tinymce doesn't get rendered; my problem is that it does get rendered but the text-editing area is covered with block (as opposed to white editable area).
I am putting a new post at the top, so it messes up all the elements in the list.
When I put a new post at the bottom, it works but when I delete a post, everything below that post gets "blocked-out" while everything above is fine.
jsfiddle:
http://jsfiddle.net/gZV3H/21/
Steps to reproduce
Expected result: model is changed
Actual result: model is not changed
Possible fix: I'd say we should listen for TinyMce 'change' event:
// Update model on change
ed.on('change', function (e) {
console.log(ed.isDirty());
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
scope.$apply();
}
});
It doesn't honour parent <fieldset>
ng-disabled state...
<fieldset ng-disabled="true">
<textarea ui-tinymce="opts" ng-model="myModel"></textarea>
</fieldset>
And it even won't respect own ng-disabled
directive.
<textarea ui-tinymce="opts" ng-model="myModel" ng-disabled="true"></textarea>
This is important for example to prevent the user to continue writing text on the control after he has submitted the form.
following the installation manual i get he following error message
bower error EPERM, rmdir 'MY_PATH\lib\angular-ui-tinymce.git'
There were errors, here's a summary of them:
- angular-ui-tinymce EPERM, rmdir 'MY_PATH\lib\angular-ui-tinymce.git'
using windows machine
Note - installing in empty folder does work
Tinymce editors don't properly removed between tests.
Could you please add priority with value greater then 0 to directive.
return {
require: 'ngModel',
priority: 1,
link:
Such solution should prevent replacing your ngModel.$render.
Thanks
In the docs files are located here:
components/tinymce/tinymce.js
components/angular-ui-tinymce/tinymce.js
But bower is installing them here:
components/tinymce-release/tinymce.min.js
components/angular-ui-tinymce/src/tinymce.js
Setting setup
option to ui-tinymce
directive options (i.e. ui-tinymce
attribute value) causes directive's setup function to be skipped.
Below is the diff with fix. setup
function has following footprint: function (scope, editor) {}
where scope
is directive's scope and editor
is the editor passed to directive's setup
function.
--- tinymce_ori.js 2014-04-07 16:08:15.000000000 +0300
+++ tinymce.js 2014-04-07 15:54:07.000000000 +0300
@@ -26,6 +26,8 @@
} else {
expression = {};
}
+ var ex_setup = expression.setup;
+ delete expression.setup;
options = {
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
@@ -50,9 +52,8 @@
updateView();
}
});
- if (expression.setup) {
- scope.$eval(expression.setup);
- delete expression.setup;
+ if (ex_setup) {
+ scope.$eval(ex_setup, ed);
}
},
mode: 'exact',
Hi there. I just upgraded to version 0.0.5 in which, compared to 0.0.4, you added a priority to the directive. Now each time I focus my editor, its content is empty. I expect the editor to be filled with the contend of the bound model.
I'm using a textarea with ngModel whereas contentBlock.content holds some text:
<textarea ui-tinymce="tinyMceOptions" ng-model="contentBlock.content"></textarea>
I found out that everything works fine if I remove the priority from the uiTinymce directive.
I am getting the following error when loading a view using this plugin.
TypeError: Cannot read property '$$phase' of null
at updateView (http://localhost:3000/public/components/angular-ui-tinymce/src/tinymce.js:16:29)
at Object.<anonymous> (http://localhost:3000/public/components/angular-ui-tinymce/src/tinymce.js:51:17)
at Object.fire (http://localhost:3000/public/components/tinymce/tinymce.min.js:8:8185)
at Object.N.setContent (http://localhost:3000/public/components/tinymce/tinymce.min.js:8:26019)
at ngModel.$render (http://localhost:3000/public/components/angular-ui-tinymce/src/tinymce.js:74:26)
at Object.ngModelWatch (http://localhost:3000/public/components/angular/angular.js:17342:14)
at Scope.$digest (http://localhost:3000/public/components/angular/angular.js:12243:40)
at Scope.$apply (http://localhost:3000/public/components/angular/angular.js:12516:24)
at http://localhost:3000/public/components/angular/angular.js:14023:36
at completeOutstandingRequest (http://localhost:3000/public/components/angular/angular.js:4300:10)
Changing the following lines from https://github.com/angular-ui/ui-tinymce/blob/master/src/tinymce.js#L16-L18
if (!scope.$root.$$phase) {
scope.$apply();
}
to
if (scope.$root && !scope.$root.$$phase) {
scope.$apply();
}
seem to fix it.
The control is bound to the model as shown below.
<textarea id="comment" name="comment" ui-tinymce="tinymceOptions" ng-model="comment"></textarea>
when I set a watch on 'comment', I can see the value going from undefined to some value whenever the data come back from the server. But then the control becomes dirty.
How to prevent that ?
My team member is noticing a problem with a tinymce window that is inside a Angular UI Bootstrap tab. Here is the code she is using:
<input data-ng-model="modal.formData.text" type="text">
<textarea
data-ui-tinymce
data-ng-disabled="modal.action=='delete'"
data-ng-model="modal.formData.text"
id="inputText"
required></textarea>
We are using the very latest code as of July 24th. We have a normal table grid of data with an edit button as the first column on each row. When the edit button is clicked for the first time, the modal is opened, the tinymce window appears and the text is rendered inside the window and in the input box. On subsequent opens of the same or other rows in the grid tinymce window appears blank but the input box is always populated.
Some more information:
I added some console.log statements:
if (!tinyInstance) {
console.log("Making a new instance");
tinyInstance = tinymce.get(attrs.id);
}
if (tinyInstance) {
console.log("setting context");
console.log(tinyInstance);
console.log(ngModel.$viewValue);
tinyInstance.setContent(ngModel.$viewValue || '');
}
It appears that the tinyInstance.setContent is trying to set valid data. But 2nd and subsequent times around the tinymce window still does not show anything.
When changing the code to the following then the problem goes away:
ngModel.$render = function () {
//if (!tinyInstance) {
console.log("Making a new instance");
tinyInstance = tinymce.get(attrs.id);
//}
if (tinyInstance) {
console.log("setting context");
console.log(tinyInstance);
console.log(ngModel.$viewValue);
tinyInstance.setContent(ngModel.$viewValue || '');
}
};
Note: this is a duplicate of this here issue #557 over here.
When a model is bound to both an instance of TinyMCE and something else (say a plain ol' textarea), problems arise when updating the model from said something else. This is easiest to understand with an example:
Enter some text in the plain textarea. Formatting 'splosion. Specifically, TinyMCE formats entered text after every keypress. So when I attempt to enter, say text
, what I get is:
<p>t</p>
<p>e</p>
<p>x</p>
<p>t</p>
I don't know TinyMCE or Angular well enough to know exactly what's happening, but do know that the following code in /modules/directives/tinymce/tinymce.js
appears to be triggering the behavior:
// Update model when calling setContent (such as from the source editor popup)
setup: function (ed) {
ed.onSetContent.add(function (ed, o) {
if (ed.isDirty()) {
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase)
scope.$apply();
}
});
}
For my purposes, adjusting the directive to omit the function entirely works just fine, as what I'm doing obviates the need for TinyMCE's source editor, however this obviously doesn't work for everyone.
I kept getting the error Cannot call method 'add' of undefined (line 41)
and it took me a couple of hours of debugging to discover that the problem was that when I ran bower install angular-ui-tinymce
, it installed the old version of the code (before the move to TinyMCE 4.0); however, the version of TinyMCE included in "tinymce-release" (which the package installed as a dependency) is now 4.0.2. So basically, the current Bower install of this project is broken unless the user manually installs TinyMCE 3.5.8 (or uses the "jquery.tinymce" package as I did). Since the README on here is already updated for TinyMCE 4.0.x, I never knew that I should be using TinyMCE 3.5.8 instead.
Please save someone else a couple of hours of their life and either bump the project version now, or maintain a separate branch for TinyMCE 4.0.x until you're ready to release that as the main version (and make sure that the 3.5.8 version isn't broken in the meantime).
Event handling
TinyMCE 4.0 has a new way of binding events. Instead of the old dispatcher method it uses the more common "on" and "off" like for example jQuery. It also allows you to bind multiple events and cancel events using the more common preventDefault and stopPropagation.
// Old event
editor.onInit(editor, args) {
// Custom logic
});
// New event
editor.on('init', function(args) {
// Custom logic
});
That's the most obvious thing I can see, but after changing the directive the editor shows up, but the key press event is not kicking in:
// Update model on keypress
handle_event_callback: function (e) { -->> not being called
And that's because Tinymce 4.x doesn't have a callback API it seems http://www.tinymce.com/wiki.php/Configuration
I am currently stuck with TinyMCE version 3, but I would like to use some of the updates that have been made to this directive. Is it possible for us to maintain separate branches for each of these versions?
Here is a Plunker to demonstrate the issue: http://plnkr.co/edit/D1UFaF
I have put a timeout around setting the model that contains the content that should display in tinymce. As you can see in the Plunker, the regular 'ol textarea eventually loads up, but tinymce does not.
I'm using AngularJS 1.2.0-rc3, and the latest version of tinymce (4.0.8 at this moment).
I try to use these options:
$scope.tinymceOptions =
menubar: false
statusbar: false
toolbar: "redo undo | styleselect | bold italic | spellchecker link image | save"
But several buttons of the toolbar aren't even visible. I see the first 5 buttons, but not the last 4 ones. If I change the order of the buttons, the problem is the same.
Hi, i am using the ui-tinymce directive with tinymce 3.x and change the version to 4x it's not a possibility. The problem is: when the function updateView() is called the caret of the textarea moves to the beginning and i couldn't find a solution for that.
I'm just curious because I'm adding this functionality to a node site I'm building.
if possible, removing the console.log will reduce noise
thank you
-- a/src/tinymce.js
+++ b/src/tinymce.js
@@ -30,7 +30,6 @@ angular.module('ui.tinymce', [])
});
// Update model on keypress
ed.on('KeyUp', function (e) {
console.log(ed.isDirty());
ed.save();
ngModel.$setViewValue(elm.val());
if (!scope.$$phase) {
If you have multiple textarea elements on a page, then all the elements will be linked to a random one of the models and, also tinymce.init() will be called multiple times.
I worked around this by adding id's to each element and use the exact mode:
// In angular-tinymce.js ~line 77:
setTimeout(function ()
options['mode'] = 'exact';
options['elements'] = attrs.id;
tinymce.init(options);
});
I want to load a set of predefined colors trough a service called Colors.
Modifying the 'uiTinymceConfig' after it was first declared would break the editor.
I made it work modifying the source code :
replacing :
setup: function (ed) {
var args;
ed.on('init', function(args) {
ngModel.$render();
});
By
setup: function (ed) {
var args;
ed.on('init', function(args) {
ed.settings.beforeRender(ed);
ngModel.$render();
});
Then, in my controller, I can define the options this way :
$scope.tinymceOptions = {
beforeRender : function(ed){
Colors.loadPrimaryColors().then(function(c) {
ed.settings.textcolor_map = c;
});
},
toolbar: "hr table code forecolor backcolor bold italic underline strikethrough alignleft aligncenter alignright alignjustify styleselect fontselect fontsizeselect cut copy paste bullist numlist outdent indent blockquote undo redo removeformat ",
menubar: true,
plugins: "textcolor code",
textcolor_rows: 2,
textcolor_cols: 5
};
The mce is render correctly, and most importantly, the editor's model is updated when changes are done. (Which wasn't the case initially).
I am new to github, and would love to contribute to some pieces of code. Any help would be appreciated.
Problem 1.
When i try resize image, resizing start, but not finished when i click inside tinyMCE
(and 'ObjectResizeStart','ObjectResized' events don't propagate).
When i click outside tinyMCE, event 'ObjectResizeStart' don't propogate, but event 'ObjectResized' propogating.
So, i can resize image only when i click first inside tinyMCE, then outside tinyMCE.
Problem 2.
When i click on image inside tinyMCE, image not selecting. I can select image only in two ways:
Hi all,
I am trying to use tinymce editor on my webpage.
I founded problem when I want to use it inside of ng-repeat.
It should load article content into tinymce editor, but it is not working.
http://plnkr.co/edit/AFOQZUaaa6ieDuAUnExW?p=preview
Can somebody help me with that please?
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.