标签: tinymce

我有tinyMCE的这个设置:

tinymceOptions = {
  inline: true,
  resize: false,
  plugins: "textcolor",
  selector: "div.editing",
  toolbar: "forecolor backcolor",
  fixed_toolbar_container: ".my-toolbar"
}

我应该这样做,但不满足我的需求,我想要的是一个固定的外部工具栏,用于多个编辑器实例,当焦点丢失时(模糊事件)不会消失,这与此设置不同.

注意:

删除inline: true没有效果!？

我正在使用WordPress开发网站,我是WordPress的新手.WP <p>在添加任何帖子或页面时在编辑器中添加标签.但我无法<p>在HTML模式下看到标签.
任何人都可以建议我可能是什么问题？

提前致谢

我想在更新面板中为文本区域使用富文本编辑器.

我发现这篇帖子:http://www.queness.com/post/212/10-jquery-and-non-jquery-javascript-rich-text-editors通过这个问题:需要ASP.Net/MVC富文本编辑器

决定使用TinyMCE,因为我之前在非AJAX情况下使用它,并且它在该列表中说它与AJAX兼容.好吧,我做了很好的' tinyMCE.init({ //settings here }); 测试它,它在更新面板更新后消失了.我从这里的一个问题中找出它应该在page_load函数中,所以它甚至可以在异步回发上运行.好吧,这样做,面板停留.但是,在尝试从我的textarea提交值时,它的文本总是返回为空,因为我的表单验证器总是说"你必须输入描述",即使我在其中输入文本.这是在页面第一次加载以及对页面执行异步回发之后发生的.

好吧,我发现这个http://www.dallasjclark.com/using-tinymce-with-ajax/并且不能从同一个AJAX TinyMCE textarea发布两次.我尝试在tinyMCE.init之后立即将此代码添加到我的页面加载函数中.这样做会破坏我之后在page_load中调用的所有jquery,它仍然存在同样的问题.

我仍然是客户端脚本编写的初学者,所以也许我需要将代码放在与page_load不同的位置？不确定我链接的帖子不知道放置代码的位置.

我的Javascript:

<script type="text/javascript">

var redirectUrl = '<%= redirectUrl %>';

function pageLoad() {

    tinyMCE.init({
        mode: "exact",
        elements: "ctl00_mainContent_tbDescription",
        theme: "advanced",
        plugins: "table,advhr,advimage,iespell,insertdatetime,preview,searchreplace,print,contextmenu,paste,fullscreen",
        theme_advanced_buttons1_add_before: "preview,separator",
        theme_advanced_buttons1: "bold,italic,underline,separator,justifyleft,justifycenter,justifyright, justifyfull,bullist,numlist,undo,redo,link,unlink,separator,styleselect,formatselect",
        theme_advanced_buttons2: "cut,copy,paste,pastetext,pasteword,separator,removeformat,cleanup,charmap,search,replace,separator,iespell,code,fullscreen",
        theme_advanced_buttons2_add_before: "",
        theme_advanced_buttons3: "",
        theme_advanced_toolbar_location: "top",
        theme_advanced_toolbar_align: "left",
        extended_valid_elements: "a[name|href|target|title|onclick],img[class|src|border=0|alt|title|hspace|vspace|width|height|align|onmouseover|onmouseout|name],hr[class|width|size|noshade],font[face|size|color|style],span[class|align|style]",
        paste_auto_cleanup_on_paste: true,
        paste_convert_headers_to_strong: true,
        button_tile_map: true
    });

    tinyMCE.triggerSave(false, true);
    tiny_mce_editor = tinyMCE.get('ctl00_mainContent_tbDescription');
    var newData = tiny_mce_editor.getContent();
    tinyMCE.execCommand('mceRemoveControl', false, 'your_textarea_name'); …

我环顾了论坛,但似乎无法找到这个问题的明确答案......

我在我们的网站上使用jQuery和TinyMCE.我已经阅读了TinyMCE的文档,但我还是迷路了.我们正在做一个界面,需要在页面的多个位置进行就地编辑.唯一的问题是,每个都将在顶部的一个工具栏中提供TinyMCE的所有编辑选择.因此,回顾一下,它是多个编辑器(每个编辑器都没有自己的工具栏,只是编辑或选择文本的位置),页面顶部只有一个工具栏来控制当时活动的文本框.

怎么能实现这一目标？它甚至可能吗？任何帮助,任何正确方向的推动,任何关于这个问题的提示/技巧/知识将是一个伟大的,伟大的帮助.

谢谢,詹姆斯

我目前正在将TinyMCE源作为依赖项传递,然后调用tinyMCE.init({}); 但它没有初始化TinyMCE.当我在console.log TinyMCE时,它返回一个TinyMCE对象.代码示例如下:

define([
'jQuery',
'Underscore',
'Backbone',
'TinyMCE'
], function($, _, Backbone, tinyMCE) {

        tinyMCE.init({
            mode: "exact",
            elements: $('textarea'),
            theme: "advanced",
            theme_advanced_toolbar_location: 'top',
            theme_advanced_buttons1: 'bold,italic,underline,bullist,numlist,link,unlink',
            theme_advanced_buttons2: '',
            theme_advanced_buttons3: '',
            theme_advanced_toolbar_align: 'left',
            plugins: 'paste,inlinepopups',
            width: '100%',
            height: textarea.attr('data-height'),
            oninit: function () {
                console.log('TargetTD :');
                console.log(targetTD);

            }
        });
   }
});

我正在使用TinyMCE <textarea>.我的要求是将字符大小限制为2000,并在工具栏下方的某处显示剩余的字符.我以某种方式设法获得了人物编号; 现在我不知道显示剩余的字符并防止超出限制.

这是我的TinyMCE代码

tinyMCE.init({
    // General options
    mode : "textareas",
    theme : "simple",
    plugins : "autolink,lists,pagebreak,style,table,save,advhr,advimage,
               advlink,emotions,media,noneditable,visualchars,nonbreaking,
               xhtmlxtras,template",

    // Theme options
    theme_advanced_buttons1 : "bold,italic,underline,strikethrough,|,
                               justifyleft,justifycenter,justifyright,
                               justifyfull,|,styleselect,formatselect,
                               fontselect,fontsizeselect", 
    theme_advanced_buttons2 : "bullist,numlist,|,outdent,indent,|,undo,redo,|,
                               link,unlink,anchor,image,code,|,forecolor,
                               backcolor",
    theme_advanced_toolbar_location : "top",
    theme_advanced_toolbar_align : "left",
    theme_advanced_statusbar_location : "bottom",
    theme_advanced_resizing : true,
    charLimit : 10, // this is a default value which can get modified later
    setup : function(ed) {
        //peform this action every time a key is pressed
        ed.onKeyUp.add(function(ed, e) {
        //define local variables
        var …

这是问题演示

你可以在这里试试:http://fiddle.tinymce.com/SLcaab

这是TinyMCE的默认配置

• 少了所有的插件
• with extended_valid_elements:"span"

1 - 打开Html源编辑器

2 - 将此html粘贴到Html源编辑器中:

<p><span>Hello</span></p>
<p><a href="http://www.google.com">Google 1</a></p>
<p><a href="http://www.google.com">Google 2</a></p>

3 - 单击Html源编辑器中的更新以将html粘贴到编辑器中

4 - 请记住'Hello'周围有一个范围.

5 - 将光标放在Google 2之前,然后按退格键(两个链接应合并在同一段落元素中).

6 - 使用Html源代码编辑器查看生成的html.

结果(问题):即使我们在TinyMCE设置中为extended_valid_elements添加了"span",html文档中也不再有span.

注意:我删除了所有插件,以确保问题是TinyMCE的核心.

编辑1 - 我也尝试过: valid_children:"+ p [span]" - 仍然不起作用

编辑2:仅在WebKit上重现(在Firefox和IE上确定)

所有.

我很难搞清楚这一点,这是我第二次需要用tinyMCE做点什么,但这次我找不到答案.

这就是我想要做的事情:我在编辑器上添加了一个按钮,用于打开一个带有单个文本输入字段和按钮的新弹出窗口.我想单击按钮并获取我在输入字段中设置的值,然后使用该值修改我在编辑器中的内容.

这是我到目前为止 - 只有相关的代码:

    init : function( ed, url ) {
        ed.addCommand( 'mceTooltip', function() {
            ed.windowManager.open({
                file: 'imageurl.html',
                width: 480,
                height: 180,
                inline: 1,
                title: 'Please enter an image URL'
            }, {});
        });
    }

这就是imageurl.html的含义:

<input type="text" id="image-url" />
<input type="button" id="submit-image-url" value="Ok" />

所以,我需要做的是每当我点击OK按钮时,得到任何"image-url"文本输入,并在我的编辑器中使用该文本.我知道我可以使用ed.selection.setContent(fieldValue),它会用image-url值替换我选择的文本,我只是不知道如何获取image-url值.

我能找到的最详细的信息是http://www.tinymce.com/wiki.php/How-to_implement_a_custom_file_browser,但我无法满足我的需求.有谁可以帮我解决这个问题？我相信对于那些有更多经验的人来说应该很简单.

谢谢大家的关注.

更新了imageurl.html**

        <script>
            document.getElementById( 'submit-image-url' ).onclick = function(){
                var imageUrl = document.getElementById( 'image-url' ).value;

                window.parent.tinyMCE.activeEditor.execCommand( 'mceInsertContent', 0, imageUrl );
                window.parent.tinyMCEPopup.close(); // this line gets me this error: "Uncaught TypeError: Cannot …

我必须在tinymce中显示一个下拉列表.我用谷歌搜索任何教程或任何一个很好的例子,但我刚发现代码:

// Adds a menu to the currently active editor instance
var dm = tinyMCE.activeEditor.controlManager.createDropMenu('somemenu');

// Add some menu items
dm.add({title : 'Menu 1', onclick : function() {
    alert('Item 1 was clicked.');
}});

dm.add({title : 'Menu 2', onclick : function() {
    alert('Item 2 was clicked.');
}});

// Adds a submenu
var sub1 = dm.addMenu({title : 'Menu 3'});
sub1.add({title : 'Menu 1.1', onclick : function() {
    alert('Item 1.1 was clicked.');
}});

// Adds a horizontal separator
sub1.addSeparator();

sub1.add({title : 'Menu 1.2', …

我正在创建一个下拉列表,其中包含一个类列表,因此我的用户可以将它们应用于链接,段落等.我已经阅读了很多地方,现在advanced主题支持这个开箱即用,但我可以找不到这个主题的下载地点.

我怀疑高级主题仅仅是Wordpress,因为我发现它包含在wordpress下载中但不是允许我使用它的格式.

我错过了什么吗？