web-dev-qa-db-ja.com

読み取り専用にする/ tinymceテキストエリアを無効にする

実行時に、tinymceテキストエリアを無効にするか、読み取り専用にする必要があります。

javascriptjqueryhtmltinymcewysiwyg
47
Ahmed-Anas

構成パラメーター readonly を使用します

tinyMCE.init({
        ...
        theme : "advanced",
        readonly : 1
});

デモへのリンク です。

Update：ユーザーがエディターでコンテンツを編集できないようにするには、エディターのiframe本体のcontenteditable属性をfalseに設定します。

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);
59
Thariama

バージョン4.3.x以降では、以下のコードを読み取り専用モードで使用できます

tinymce.activeEditor.setMode('readonly');

および設計モードの場合：

tinymce.activeEditor.setMode('design');
45
grajsek

エディターが1つしかない場合、これは機能します。

tinymce.activeEditor.getBody().setAttribute('contenteditable', false);

複数のエディターがある場合は、textareaのIDでエディターを選択する必要があります。

tinyMCE.get('textarea_id').getBody().setAttribute('contenteditable', false);
23
Makiavelo

Thariamaの solution は、ページ上のすべてのTinyMCEテキスト領域を読み取り専用に設定します。

私が見つけた最良の解決策は、Magnar Myrtveitによる posted で、これは読み取り専用属性を持つフィールドを読み取り専用に設定します。コードは次のとおりです。

tinyMCE.init({
    ...
    setup: function(ed) {
        if ($('#'+ed.id).prop('readonly')) {
            ed.settings.readonly = true;
        }
    }
});
11
josephdpurcell

使用できます

this.getBody().setAttribute('contenteditable', false);

完全なソリューションを見てください、私のサーバー側はAsp.net MVCです

 setup: function (ed) {
        ed.on('init', function () {
            this.execCommand("fontSize", false, "17px");
            $("html,body").scrollTop(0);
            @if (ViewBag.desableEdit != null && ViewBag.desableEdit == true)
            {
                <text>
                    this.getBody().setAttribute('contenteditable', false);
                </text>
            }

        });

返されたHTMLで削除されるserver side conditionがある場合は別の方法

 tinymce.init({
    selector: ... ,
    ....
    @if (ViewBag.desableEditExseptExportNumber != null && ViewBag.desableEditExseptExportNumber == true)
    {
         <text>
              readonly: 1,
         </text>
    }
    language: 'ar',
    ....});
1
Basheer AL-MOMANI

無効にするには、次のコマンドを呼び出します。

tinymce.EditorManager.execCommand('mceToggleEditor', true, tinymceId);

エディターを再び有効にするには、このコマンドを再度呼び出します。

'mceToggleEditor'コマンドは、textareaとエディターインスタンスを表示または非表示にすることで、WYSIWYGモードのオンとオフを切り替えます。インスタンスはまだ存在し、初期化されていないため、mceAddControlやmceRemoveControlとは異なります。したがって、このメソッドは高速です。

上記のコマンドのリンク： http://archive.tinymce.com/wiki.php/TinyMCE3x:Command_identifiers

1
Gaurav

このコード行は、iframeを使用する他のブラウザーで役立つ可能性があります。

tinymce.activeEditor.getBody().contenteditable = false

よろしく！

0
antoniosanct

Readonly：1コマンドを使用しようとすると、ツールバーが消えます。

使い方

tinymce.activeEditor.getBody（）。setAttribute（ 'contenteditable'、false）;

0
user3109762

ASP.NET MVC Razorで機能します

readonly: @(Model.Readonly ? "true" : "false")

tinyMCEの初期化中：

tinymce.init({/* put readonly setting here */});
0
adam.bielasty

この回答は、@ riotedによってここで確認できます。 https://stackoverflow.com/a/34764607/182796 。

私はそれを使用してこの解決策を考え出しました：

tinymce.settings = $.extend(tinymce.settings, { readonly: 1 });
tinymce.EditorManager.editors.forEach(function (editor) {
    tinymce.EditorManager.execCommand('mceRemoveEditor', false, editor.id);
    //tinymce.EditorManager.editors = [];
    tinymce.EditorManager.execCommand('mceAddEditor', false, editor.id);
});
0
Blair Connolly