admin管理员组文章数量:1292968
I ahave multiple Tiny MCE editors which I am trying to disable editing on. I have tried multiple variations of:
if(@Model.hasRegular.ToString().ToLower())
{
tinymce.get('#rte').getBody().setAttribute('contenteditable', false);
}
if(@Model.hasSmall.ToString().ToLower())
{
tinymce.get('#rteSmall').getBody().setAttribute('contenteditable', false);
}
if(@Model.isOneSize.ToString().ToLower())
{
tinymce.get('#rteOneSize').getBody().setAttribute('contenteditable', false);
}
with my editors all defined similarly like:
tinymce.init({
selector: '#rte',
toolbar: 'bold italic underline',
height: '200px',
width: '420px',
elementpath: false,
menubar: false,
content_style: "div {border: 50px solid red;}",
setup: function (ed) {
ed.on('init', function () {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Helvetica';
//disables editing for non admins
if ($('#nonAdmin').length) {
this.setMode('readonly');
}
});
}
});
currently with what I am trying, I am getting a console error: Cannot read property 'getBody' of null
I ahave multiple Tiny MCE editors which I am trying to disable editing on. I have tried multiple variations of:
if(@Model.hasRegular.ToString().ToLower())
{
tinymce.get('#rte').getBody().setAttribute('contenteditable', false);
}
if(@Model.hasSmall.ToString().ToLower())
{
tinymce.get('#rteSmall').getBody().setAttribute('contenteditable', false);
}
if(@Model.isOneSize.ToString().ToLower())
{
tinymce.get('#rteOneSize').getBody().setAttribute('contenteditable', false);
}
with my editors all defined similarly like:
tinymce.init({
selector: '#rte',
toolbar: 'bold italic underline',
height: '200px',
width: '420px',
elementpath: false,
menubar: false,
content_style: "div {border: 50px solid red;}",
setup: function (ed) {
ed.on('init', function () {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Helvetica';
//disables editing for non admins
if ($('#nonAdmin').length) {
this.setMode('readonly');
}
});
}
});
currently with what I am trying, I am getting a console error: Cannot read property 'getBody' of null
- Check the console. if any errors are there. . – Punit Gajjar Commented Aug 10, 2016 at 16:14
- Try this in case of having multiple . . tinyMCE.get('rte').getBody().setAttribute('contenteditable', false); – Punit Gajjar Commented Aug 10, 2016 at 16:16
- Also From version 4.3.x on you can use code below for readonly mode.. its like tinymce.activeEditor.setMode('readonly'); – Punit Gajjar Commented Aug 10, 2016 at 16:17
3 Answers
Reset to default 7You have a typo in your disable code:
tinymce.get('#rte').getBody().setAttribute('contenteditable', false);
This line must be:
tinyMCE.get('rte').getBody().setAttribute('contenteditable', false);
So remove the # symbol.
Because you already used setMode you can do:
tinyMCE.get('rte').setMode('readonly');
or
tinyMCE.get('rte').setMode('code');
Snippet (fiddle: HERE):
$(function () {
$('#nonAdmin').on('change', function(e) {
tinyMCE.get('rte').getBody().setAttribute('contenteditable', !this.checked);
});
tinymce.init({
selector: '#rte',
toolbar: 'bold italic underline',
height: '200px',
width: '420px',
elementpath: false,
menubar: false,
content_style: "div {border: 50px solid red;}",
setup: function (ed) {
ed.on('init', function () {
this.getDoc().body.style.fontSize = '16px';
this.getDoc().body.style.fontFamily = 'Helvetica';
//disables editing for non admins
if ($('#nonAdmin').prop('checked')) {
this.setMode('readonly');
}
});
}
});
});
<script src="https://code.jquery./jquery-1.12.4.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tinymce/4.4.1/tinymce.min.js" type="text/javascript"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/tinymce/4.4.1/jquery.tinymce.min.js" type="text/javascript"></script>
<h1>TinyMCE Quick Start Guide</h1>
<form method="post">
Disable: <input type="checkbox" id="nonAdmin">
<textarea id="rte">Hello, World!</textarea>
</form>
Your call to tinymce.get() is incorrect.
The API for get (https://www.tinymce./docs/api/tinymce/root_tinymce/#get) states:
Returns a editor instance by id.: get(id:String):tinymce.Editor
Parameters: id (String) - Editor instance id or index to return.
This is not a jQuery API call so your call:
tinymce.get('#rteSmall')
...should likely be...
tinymce.get('rteSmall')
TinyMCE(latest version) text editor disable with some style on document ready.
$(function () {
tinymce.init({
selector: '#textEditor',
plugins: "advlist lists table paste textcolor colorpicker tabfocus link preview",
toolbar: "table fontsizeselect bold italic underline forecolor backcolor bullist numlist link preview code", imagetools_toolbar: "rotateleft rotateright | flipv fliph | editimage",
menubar: false,
toolbar_items_size: 'large',
min_height: 500,
max_height: 800,
convert_newlines_to_brs: false,
statusbar: false,
relative_urls: false,
remove_script_host: false,
language: 'en',
});
//controls disable inside sections
tinyMCE.get('textEditor').setMode('readonly'); // disable
setTimeout(function () {
$(".tox .tox-edit-area__iframe, .tox-
toolbar__primary").css("background", "#eee");
$(".tox-tinymce").css("border", "1px solid #eee");
}, 1000);
});
//if you want to enable it again, using your own button
$(".editFormControls").on('click', function () {
$(".sections form").find(".updateControl").show();
});
本文标签： javascriptdisable TinyMCE text editor via JqueryStack Overflow
版权声明：本文标题：javascript - disable TinyMCE text editor via Jquery - Stack Overflow 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://www.betaflare.com/web/1741566601a2385761.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论