1

当我将输入更改为 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 ？

4

2 回答 2

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", ...

于 2013-06-07T03:00:12.733 回答
0

在这里，它是一个使用 onClick 事件替换 textarea 上的 tinymce 的示例代码。对于 TinyMCE 的更多应用改进，请点击此链接 

<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>
于 2017-04-16T06:54:37.910 回答