javascript - 通过 Ajax 插件加载 Wordpress 编辑器

标签 javascript php ajax wordpress

我在 stackoverflow 上研究了几个关于这个主题的类似问题，这些问题已经有了答案。

有些答案似乎并不完全有效，有些只是在我的脑海中。

我已经阅读并修改了我的代码一个多星期，所以我会尝试再次询问比其他问题更详细的问题。

我写了一个非常简单的 WordPress 插件，它的唯一目的就是通过 ajax 加载功能齐全的编辑器。

这是这个插件工作的截屏视频(有错误): http://screencast.com/t/eyrTdbUy

我认为如果我的问题能够得到解答，将会帮助很多人。

这正是插件的作用。

  1. 它加载我的自定义页面模板而不是主题模板。在此模板中，有一个使用 wp_editor 函数创建的编辑器(用于加载所需文件)和一个用于添加新编辑器的链接。

  2. 当您单击“添加编辑器”链接时，将通过 ajax 使用 wp_editor 函数创建一个新编辑器，然后使用 javascript 进行初始化，并添加新链接以添加另一个编辑器。

这仅在用户登录时有效。

我不建议在您的事件网站上安装它，因为它会接管您的页面。此插件仅供示例，因此只能安装在测试站点上。

问题来了...

  1. 加载了 ajax 的编辑器的第一个实例可以正常工作，但是当您单击选项卡在视觉和文本之间来回切换时出现以下错误 “类型错误:e 未定义” “类型错误:c 未定义”

加载第一个新编辑器时也会发生“TypeError: e is undefined”。

  1. 加载第一个实例后，无法添加另一个编辑器。

所以我的问题是...我的代码有什么问题？

该插件由 4 个文件组成。

文件1是插件文件“load_editor.php”(只包含函数):

    include('functions.php');

文件 2 是函数文件“functions.php”:

<?
// load custom editor template 
function load_editor_template( $template )
{
    $template = plugin_dir_path( __FILE__ ) . 'template.php';

    return $template;
}

add_filter( 'template_include', 'load_editor_template' );

// load javascript 
function load_editor_scripts() {
    wp_enqueue_script( 'load_editor', plugins_url() . '/load_editor/js/load_editor.js', array(), '', true );
    wp_enqueue_script( 'jquery');
}

add_action( 'wp_enqueue_scripts', 'load_editor_scripts' );

// create new editor
function load_editor_new_editor() {
    $id      = $_POST['id'];
    $number  = $_POST['number'];
    $next    = $number + 1;
    $full_id = $id.$number;

    echo "<h1>Editor $number</h1>";

    $content = '<p>This is example content.</p>';
    wp_editor($content, $full_id, array('textarea_rows' => 3));

    // initiate new editor
    echo "<script>
tinyMCE.execCommand('mceAddEditor', true, $full_id);
tinyMCE.init(tinyMCEPreInit.mceInit[$full_id]);
</script>";

    // create "add new" text
    echo "<div><a onclick=\"load_new_editor('editor', $next);\" href='javascript:void(0);'>Click here</a> to add another editor</div>";

    die();
}

add_action( 'wp_ajax_load_editor_new_editor', 'load_editor_new_editor' );

文件3是模板文件“template.php”:

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Load Editor</title>
<?php wp_head(); ?>
</head>

<body>
<? wp_editor('Ecample content', 'id',  array('textarea_rows' => 3)); ?>

<div id="add"><a onClick="load_new_editor('editor', 1);" href="javascript:void(0);">Click here</a> to add an editor</div>
<div id="editor_container">
<!-- Editors will load here -->
</div>

<script>
<?
echo 'ajaxurl = "'.admin_url('admin-ajax.php').'";';
?>
</script>
<?php wp_footer(); ?>
</body>
</html>

文件 4 是 javascript 文件“load_editor.js”:

function load_new_editor(id, number){
    // remove click to add
    jQuery('#add').remove();

    var fullId = id + number;

    var data = {
        'action': 'load_editor_new_editor',
        'number': number,
        'id': id
    };

    jQuery.post(ajaxurl, data, function(response) {

        //add new editor
        jQuery('#editor_container').append(response);

    });
}

我也把它放在github上了: enter link description here

非常感谢您提供的任何帮助。我一直在努力让这个工作这么久，这让我很烦。我什至通过 elance 聘请了一名程序员，但他无法像我一样走得那么远。

最佳答案

这是我能想到的最好的，我认为它对我来说已经足够好了。

除 quicktag 外一切正常，我可以没有它们生活。

我从 funtions.php 中删除了 javascript

<?
// load custom editor template 
function load_editor_template( $template )
{
    $template = plugin_dir_path( __FILE__ ) . 'template.php';

    return $template;
}

add_filter( 'template_include', 'load_editor_template' );

// load javascript 
function load_editor_scripts() {
    wp_enqueue_script( 'load_editor', plugins_url() . '/load_editor/js/load_editor.js', array(), '', true );
    wp_enqueue_script( 'jquery');
}

add_action( 'wp_enqueue_scripts', 'load_editor_scripts' );

// create new editor
function load_editor_new_editor() {
    $id      = $_POST['id'];
    $number  = $_POST['number'];
    $next    = $number + 1;
    $full_id = $id.$number;

    echo "<h1>Editor $number</h1>";

    $content = '<p>This is example content.</p>';
    wp_editor($content, $full_id, array('textarea_rows' => 3));

    // create "add new" text
    echo "<div id='add'><a onclick=\"load_new_editor('editor', $next);\" href='javascript:void(0);'>Click here</a> to add another editor</div>";

    die();
}

add_action( 'wp_ajax_load_editor_new_editor', 'load_editor_new_editor' );

然后我在 load_editor.js 上更改了以下内容

  1. 添加了 quicktags 功能以使选项卡正常工作
  2. 使用 WordPress 使用的设置调用了 tinymce.init

我想就是这样。

// JavaScript Document

function load_new_editor(id, number){
    // remove click to add
    jQuery('#add').remove();

    var fullId = id + number;

    var data = {
        'action': 'load_editor_new_editor',
        'number': number,
        'id': id
    };

    jQuery.post(ajaxurl, data, function(response) {

        //add new editor
        jQuery('#editor_container').append(response);

        // this is need for the tabs to work
        quicktags({id : fullId});

        // use wordpress settings
        tinymce.init({
        selector: fullId,

        theme:"modern",
        skin:"lightgray",
        language:"en",
        formats:{
                        alignleft: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'left'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignleft'}
                        ],
                        aligncenter: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'center'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'aligncenter'}
                        ],
                        alignright: [
                            {selector: 'p,h1,h2,h3,h4,h5,h6,td,th,div,ul,ol,li', styles: {textAlign:'right'}},
                            {selector: 'img,table,dl.wp-caption', classes: 'alignright'}
                        ],
                        strikethrough: {inline: 'del'}
                    },
                    relative_urls:false,
                    remove_script_host:false,
                    convert_urls:false,
                    browser_spellcheck:true,
                    fix_list_elements:true,
                    entities:"38,amp,60,lt,62,gt",
                    entity_encoding:"raw",
                    keep_styles:false,
                    paste_webkit_styles:"font-weight font-style color",
                    preview_styles:"font-family font-size font-weight font-style text-decoration text-transform",
                    wpeditimage_disable_captions:false,
                    wpeditimage_html5_captions:true,
                    plugins:"charmap,hr,media,paste,tabfocus,textcolor,fullscreen,wordpress,wpeditimage,wpgallery,wplink,wpdialogs,wpview",
                    selector:"#" + fullId,
                    resize:"vertical",
                    menubar:false,
                    wpautop:true,
                    indent:false,
                    toolbar1:"bold,italic,strikethrough,bullist,numlist,blockquote,hr,alignleft,aligncenter,alignright,link,unlink,wp_more,spellchecker,fullscreen,wp_adv",toolbar2:"formatselect,underline,alignjustify,forecolor,pastetext,removeformat,charmap,outdent,indent,undo,redo,wp_help",
                    toolbar3:"",
                    toolbar4:"",
                    tabfocus_elements:":prev,:next",
                    body_class:"id post-type-post post-status-publish post-format-standard",

});


        // this is needed for the editor to initiate
        tinyMCE.execCommand('mceAddEditor', false, fullId); 

    });
}

这是它工作的截屏视频。 http://screencast.com/t/Psd9IVVY

如果有人知道如何显示快速标签，我很想知道。

此外，如果您发现我的代码有问题，请告诉我。

如果你想在这里下载它，我已经更新了github: https://github.com/ccbgs/load_editor

关于javascript - 通过 Ajax 插件加载 Wordpress 编辑器，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/25732679/

上一篇：javascript - 从对象中取出具有无效(NaN、空白等)值的键的最佳方法？

下一篇：javascript - 如果 if 条件为假，if block 内的函数是否应为 typeof= ='function'？

相关文章：

php - 自动删除将标签与书签相关联的 MySQL 记录，并使用外键连接它们的中间表？

php - 如何使用 Javascript 提交 POST 变量？

javascript - 使用 JQuery 通过 javascript 中的 1 个操作提交两个表单

javascript - Jquery 选择的插件在 ajax 响应中不起作用

javascript - 如何使用 Ajax 提交表单并获取一些文本作为返回

javascript - DOM 更改后刷新菜单

javascript - scrollTop 似乎不正确

javascript - 保留被拖动的元素

javascript - x === x 在没有 NaN 的情况下返回 false 是否有任何值(value)？

php - 当另一个查询成功时执行另一个查询

©2024 IT工具网  联系我们