标签: tinymce-4

有没有什么方法可以从编辑器中解体TinyMCE工具栏和菜单栏(默认情况下它附在编辑器的顶部)？

我希望获得类似于Google Document的东西,其中Toolbar和Menubar位于顶部,与实际编辑器分离,让人感觉MS Word而不是记事本.

任何帮助是极大的赞赏.谢谢!!

我想在Tiny MCE 4中获得插入位置,但我不想获得行/列号 - 我想获得像素位置(x&y dimmension).它可以是任何东西.最后一件事 - 我想这样做而不在内容中创建任何额外的标签,比如书签.TinyMCE有办法做到这一点吗？或者是否可以选择以像素为单位获取书签位置,然后删除它？

谢谢你的回复

我有一个像这样的span标签的tinymce textarea : <span data-range-id="4oYnl5fH0">...</span>.

单击文本范围时,我想在文本旁边显示一个弹出窗口.

问题是文本隐藏在iframe中,因此JQuery无法访问它.

有没有办法用JQuery更改iframe中的内容,特别是使用tinymce？我不能只是复制内容,然后将其粘贴回来,因为我需要获取文本在屏幕上的位置的坐标为此,我会使用这个:

position = $(this).offset();

thisspan标记在哪里

当我将脚本标记添加<script src="../Scripts/tinymce.min.js"></script>到我的页面时,TinyMCE加载正常 - 插件和主题引用.min版本.但是,当我删除脚本标记并尝试使用jQuery加载它时,它会引用非缩小版本,如控制台日志中所述.我正在使用TinyMCE v4.1.7(2014-11-27)

        $.getScript('http://localhost:52417/Scripts/tinymce.min.js', function () {
            window.tinymce.dom.Event.domLoaded = true;
            tinymce.baseURL = 'http://localhost:52417/Scripts';
            tinymce.init({
                selector: '#announcementText',
                plugins: ['link image'],
                toolbar: 'undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist | outdent indent | link image',
                menubar: false,
                statusbar: false
            });
        });

GET http://localhost:52417/Scripts/themes/modern/theme.js 404 (Not Found) GET http://localhost:52417/Scripts/plugins/link/plugin.js 404 (Not Found) GET http://localhost:52417/Scripts/plugins/image/plugin.js 404 (Not Found)

domLoaded和baseURL行是从SO上的其他示例中找到的,并没有产生任何影响.如何让它引用主题和插件的正确路径？

我在启用了ajax的Foundation Reveal框中使用了TinyMCE .现在TinyMCE在第一次加载时踢,但是如果我关闭盒并再次打开它不会触发:(

我有其他脚本,如选择和屏蔽输入在完全相同的前查询中触发,但是当我第二次重新加载它时,TinyMCE将不会重新初始化

这是我目前的代码,我正在尝试这个问题:

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () {
    $("#expenseUser, #expenseVendorID, #expenseCategoryID, #expenseAccidentID").chosen({disable_search_threshold: 5, width: '365px'});
    $("#expOdo").mask("999999",{placeholder:"0"});
    $('.datePicker').each(function() {
        $(this).datetimepicker({
            addSliderAccess: true,
            sliderAccessArgs: {touchonly: false},
            changeMonth: true,
            changeYear: true,
            altField: "#"+$(this).attr('id')+"Alt",
            altFieldTimeOnly: false,
            altFormat: "yy-mm-dd",
            altTimeFormat : "HH:mm:ss",
            dateFormat: "D, d MM yy",
            timeFormat: "hh:mmtt"
        });
    });
    tinymce.execCommand('mceRemoveEditor',true,"textarea#expenseComments");
    tinymce.execCommand('mceAddEditor',true,"textarea#expenseComments");
    tinyMCE.init({selector: "textarea#expenseComments",menubar : false,toolbar: "undo redo | styleselect | bold italic | alignleft aligncenter alignright"});
});

更新

我已经尝试过运气,但是我认为这是正确的道路吗？

$(document).on('opened.fndtn.reveal', '[data-reveal]', function () …

我在ASP.NET C#Project中使用http://www.tinymce.com插件.我在aspx页面中添加了以下代码

 <script src="../Scripts/TinyEditor/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({
        selector: "textarea",
        theme: "modern",
        plugins: [
            "advlist autolink lists link image charmap print preview hr anchor pagebreak",
            "searchreplace wordcount visualblocks visualchars code fullscreen",
            "insertdatetime media nonbreaking save table contextmenu directionality",
            "emoticons template paste textcolor colorpicker textpattern"
        ],
        toolbar1: "undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image",
        toolbar2: "print preview media | forecolor backcolor emoticons",
        image_advtab: true,
        templates: [
            { …

我试图做一个函数file_browser_callback,mais似乎不起作用:

在我的浏览器中:

Uncaught TypeError: a is not a function

功能调用:

function elFinderBrowser (field_name, url, type, win) {
    tinymce.activeEditor.windowManager.open({
        file:"http://stores-concept:8899/app_dev.php/admin/elfinder/tinycme",
        title: "elFinder 2.0",
        width: 900,
        height: 450,
        resizable: 'yes'
    }, {
        setUrl: function (url) {
            win.document.getElementById(field_name).value = url;
        }
    });
    return false;
}

我的小init:

    jQuery(document).ready(function($) {
        var $configs = {"language":"fr","file_browser_callback":"elFinderBrowser","plugins":"bootstrap code codemirror fullscreen preview table visualblocks link image media","toolbar1":"styleselect | bold italic | fontsizeselect | alignleft aligncenter alignright alignjustify | link image media | bootstrap | code preview","menubar":false,"toolbar_items_size":"small","codemirror":"path: \"CodeMirror\"","script_url":"\/bundles\/whadmin\/js\/plugin\/tinymce\/tinymce.min.js"};
        var $textarea …

考虑初始化：

function initMyTinymce() {
    tinymce.init({
        selector: $(this).attr("id"),
        directionality: "ltr",
    });
}

之后是否可以向tinyMCE添加属性init()？

例如：

plugins: "link,code,textcolor",
relative_urls: false,
convert_urls: false,
remove_script_host: false

我正在使用TinyMce 4.1.6（2014-10-08）。

我想在tinyMCE addButton()函数中的自定义按钮上添加自定义类.

例如

editor.addButton('keywords', {
              text: 'Insert Keywords',
              class: 'MyCoolBtn', 
              icon: false,
              onclick: function () {

                  if($(this.id).hasClass("mce-active"))
                      EditorMethods.removeKeywordsToolbar(this.id);
                  else
                      EditorMethods.displayKeywordsToolbar(this.id);  
              }
          });

这对我不起作用.TinyMCE JS在包含按钮的div上添加了唯一的Id和一些类.我想在该div上添加我的自定义类以及其他类.

按钮的当前HTML是

 <div aria-labelledby="mceu_35" tabindex="-1" class="mce-widget mce-btn mce-first mce-last mce-btn-has-text mce-active" id="mceu_35" role="button"> <button tabindex="-1" type="button" role="presentation"> <span class="mce-txt">Insert Keywords</span> </button> </div>

请建议一种获取div Id的方法,或者在包含该按钮的div上插入类.

我的JS:

$(document).ready(function() {
  tinymce.init({
    selector: 'textarea',
    height: 500,
    menubar: false,
    plugins: [
      'advlist autolink lists link image charmap print preview anchor',
      'searchreplace visualblocks code fullscreen',
      'insertdatetime media table contextmenu paste code'
    ],
    toolbar: 'undo redo | insert | styleselect | bold italic | alignleft aligncenter alignright alignjustify |  bullist numlist outdent indent | link image',
    content_css: '//www.tinymce.com/css/codepen.min.css'
  });
});

我的HTML:

<textarea></textarea>

我有以下外部JS文件:

http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js http://cdnjs.cloudflare.com/ajax/libs/tinymce/4.5.6/jquery.tinymce.min .js文件

JS小提琴:

http://jsfiddle.net/bcv1tv1b/

我的错误:

Uncaught ReferenceError: tinymce is not defined
    at HTMLDocument.<anonymous> ((index):54)
    at j (jquery.min.js:2) …