个人中心
gpt4 book ai didi

javascript - TINYMCE V3 或 V4 在聚焦/模糊时显示/隐藏工具栏

转载 作者：搜寻专家 更新时间：2023-11-01 05:12:03 25 4
gpt4 key购买 nike

我正在使用 Tinymce 的 V3 或 v4 版本，我想进行下一步操作:

1- 聚焦 显示工具栏。2- 模糊隐藏工具栏。

我在看这个例子:http://sourceforge.net/p/tinymce/plugins/185/ ，还不错，但我正在尝试处理事件，但没有成功。

有人知道一个很好的例子吗？

    <!-- TinyMCE -->
<script type="text/javascript" src="tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript" src="Scripts/jquery-1.10.2.min.js"></script>
<script type="text/javascript">

    $(document).ready(function () {
        alert("cargado...");
    });

    tinyMCE.init({

        // General options
        mode: "textareas",
        theme: "advanced",
        plugins: "toggletoolbars, pdw, safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,print,contextmenu,paste,directionality,fullscreen,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",
        toggletoolbars_status: "off",
        // Theme options
        theme_advanced_buttons1: "pdw_toggle, save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|,forecolor,backcolor",
        theme_advanced_buttons3: "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
        theme_advanced_buttons4: "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        theme_advanced_statusbar_location: "bottom",
        theme_advanced_resizing: true,

        // PDW Toggle Toolbars settings
        pdw_toggle_on: 0,
        pdw_toggle_toolbars: "2,3,4",

        // Example content CSS (should be your site CSS)
        content_css: "css/content.css",

        // Drop lists for link/image/media/template dialogs
        template_external_list_url: "lists/template_list.js",
        external_link_list_url: "lists/link_list.js",
        external_image_list_url: "lists/image_list.js",
        media_external_list_url: "lists/media_list.js",

        // Replace values for the template plugin
        template_replace_values: {
            username: "Some User",
            staffid: "991234"
        },

        setup: function (ed) {
            ed.onBlur.add(function (ed, l) {
                tinyMCE.getInstanceById(editorID).toolbarElement.style.display = 'none';
            });
        }
    });
    </script>
<!-- /TinyMCE -->

最佳答案

非常感谢 afzalulh 的帮助，现在可以使用了，我已经粘贴了代码....如果对其他人有用的话。

但是..我对这个解决方案有问题，我使用这个编辑器从文本框 ASP.net 组件中的数据库加载文本，当我加载文本时，文本没有出现，但是当我选择一个 Tiny 编辑器时在焦点上，我在出现的文本中插入一个空格，我没有错误，我不知道是否需要添加另一个配置参数..？

<head runat="server">
<title>Show/Hide ToolBar on Focus/Blur Event - TinyMCE 4.0.16 jQuery package </title>
<!-- Loading the jQuery Library -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery-1.11.0.min.js"></script>
<link rel="stylesheet" type="text/css" href="stylesheet.css" />
<!-- Loading jQuery TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/jquery.tinymce.min.js"></script>
<!-- Loading TinyMCE -->
<script type="text/javascript" src="Javascript/tinymce/js/tinymce/tinymce.min.js"></script>


<script type="text/javascript">
tinymce.init({
    selector: ".editorTextarea",
    theme: "modern",
    plugins: "pagebreak table save charmap media contextmenu paste directionality noneditable visualchars nonbreaking spellchecker template",
    toolbar1: "bold italic underline strikethrough | alignleft aligncenter alignright alignjustify fontselect fontsizeselect | bullist numlist | undo redo | forecolor backcolor | charmap nonbreaking",

    contextmenu: "cut copy paste",
    menubar: false,
    statusbar: false,
    toolbar_item_size: "small",

    setup: function (theEditor) {
        theEditor.on('focus', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").show();
        });
        theEditor.on('blur', function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
        theEditor.on("init", function () {
            $(this.contentAreaContainer.parentElement).find("div.mce-toolbar-grp").hide();
        });
    }
});

<asp:TextBox ID="Block1_Text2_D" runat="server" Rows="3" TextMode="MultiLine" Width="400px" CssClass="editorTextarea"></asp:TextBox>

关于javascript - TINYMCE V3 或 V4 在聚焦/模糊时显示/隐藏工具栏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21665974/

25 4 0
文章推荐： javascript - 为什么异常用于拒绝 JS 中的 promise ？
文章推荐： ios - viewWillTransitionToSize 协调器忽略 block
文章推荐： ios - GPUImageMovie 不尊重 imageOrientation
文章推荐： javascript - 单击按钮后开始倒计时
搜寻专家
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com