Question

当我将输入更改为textarea时，如何启用tinymce？

这是我的javascript：

<script type="text/javascript"src="/tmc/jscripts/tiny_mce/tiny_mce.js"></script>
<script type="text/javascript">
tinyMCE.init({mode : "textareas",theme : "advanced",skin : "o2k7",

...

$(window).load(function(){
 var textbox = $("#textbox");
 var textarea = $("<textarea id='textarea'></textarea>");
 $("#change").click(function () {
   // Check for textbox or textarea
   if ($("#textbox").length === 1) {
     // Copy value to textarea
     textarea.val(textbox.val());
     // Replace textbox with textarea
     textbox = textbox.replaceWith(textarea);
   } else {
     // Copy value to textbox
     textbox.val(textarea.val());
     // Replace textarea with textbox
     textarea = textarea.replaceWith(textbox);
   }
 });
});

和HTML代码：

 <input type="text" id="textbox" />
 <a href="#" id="change">Change</a>

点击更改链接后如何初始化tinyMCE？

Answer 1

你必须在创建textarea之后手动添加tinyMCE：

tinyMCE.execCommand('mceAddControl', false, 'textarea');

如果你想将它改回输入，你必须使用以下方法将tinyMCE内容保存到textarea：

tinyMCE.triggerSave();

并删除tinyMCE实例：

if (tinyMCE.getInstanceById('textarea')) {
    tinyMCE.execCommand('mceFocus', false, 'textarea');                    
    tinyMCE.execCommand('mceRemoveControl', false, 'textarea');
}

如果你没有任何其他的tinyMCE实例，你仍然必须像现在在页面顶部那样进行初始化，但是你可以将它改为tinyMCE.init({ mode : "none", ...

Answer 2

这里，它是使用onClick事件替换textarea上的tinymce的示例代码。如需更多应用TinyMCE的进展，请遵循此link

<html>
    <head>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
        <script src="https://cloud.tinymce.com/stable/tinymce.min.js"></script>
        <script type="text/javascript">     
            jQuery(document).ready(function(){
                jQuery("button").on("click", function() {
                    var textbox = $("#textbox");
                    var textarea = $("<textarea id='textarea'></textarea>");
                    $("#change").click(function () {
                        // Check for textbox or textarea
                        if ($("#textbox").length === 1) {
                            // Copy value to textarea
                            textarea.val(textbox.val());
                            // Replace textbox with textarea
                            textbox = textbox.replaceWith(textarea);
                        } else {
                            // Copy value to textbox
                            textbox.val(textarea.val());
                            // Replace textarea with textbox
                            textarea = textarea.replaceWith(textbox);
                        }
                    });

                    var id = $(this).data("id");
                    tinymce.init({mode : "textareas"});
                    tinymce.EditorManager.execCommand("mceAddEditor", true, id);
                });
            });         
        </script>
    </head>
    <body>
        <div class="bodyime">
            <input type="text" id="textbox"/>
            <button type="button" data-id="textbox">Click Me</button>
        </div>
    </body>
</html>

如何使用tinymce将输入更改为textarea

2 个答案: