如何将 TinyMCE 编辑器与 php 集成

Posted 2023-05-07

【中文标题】如何将 TinyMCE 编辑器与 php 集成

【英文标题】：How to Integrate TinyMCE editor with php

【发布时间】：2014-05-01 20:04:33

【问题描述】：

？我已经下载了编辑器并将它放在我根目录下的 js 文件夹中。我的代码中有以下实现。

    <script type="text/javascript" src="js/tinymce/tinymce.min.js"></script>
    <script type="text/javascript">
    tinymce.init(
        selector: "textarea",
        themes: "modern",   
        plugins: [
            "advlist autolink lists link image charmap print preview anchor",
            "searchreplace visualblocks code fullscreen",
            "insertdatetime media table contextmenu paste moxiemanager"
        ],
        toolbar: "insertfile undo redo | styleselect | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link image"   
    );
    </script>

这里是文本框区域的位置：

     <textarea name="pageBody" id="pageBody" rows="4"></textarea>

当我查看网页时，文本编辑器没有显示。

【问题讨论】：

这个集成是在 Javascript 中，而不是 php 中！你的 javascript 控制台有什么错误吗？ （在 chrome 中加载您的页面，右键单击 > 元素检查器 > 控制台）

尝试删除所有插件到插件：[""]，您是否收到任何 javascript 错误？

我在检查控制台时收到此错误：加载资源失败：服务器响应状态为 404（未找到）localhost/trainingSite/administrator/js/tinymce/tinymce.min.jsUncaught ReferenceError: tinymce is not defined adminTestPage.php:13加载资源失败：服务器响应状态为 404 事件。returnValue 已弃用。请改用标准 event.preventDefault()。

您的脚本路径似乎错误。看看吧。

是的，你是对的。我更改了脚本路径，但遇到了一个新错误。 localhost/trainingSite/js/tinymce/plugins/moxiemanager/…我的插件文件夹中没有 moxiemanager。我怎么才能得到它？通过谷歌搜索，发现它是一个高级工具

【参考方案1】：

从您的插件中删除 moxiemanager: 条目。 （最后一个条目）

【讨论】：

我已经删除了它，它工作得很好。非常感谢！还有一件事...我无法使用文本编辑器添加图片和文件。在上传之前我必须知道文件路径。关于添加 moxie 插件的任何想法？

【参考方案2】：

/* JS */

<script src="https://cdn.tiny.cloud/1/d5xkm37lhhdhglxdlbmt0eg9ug9mkwhcne5zrfikmlq7qxoi/tinymce/5/tinymce.min.js" referrerpolicy="origin"></script>

function textEditor() 
    tinymce.init(
        selector: '.texteditor',
        plugins: 'image code, casechange, permanentpen, checklist, pageembed, formatpainter, table advtable, media, autoresize, paste, lists, searchreplace, emoticons, fullscreen, autolink link',
        toolbar: 'undo redo | casechange | formatselect | pageembed | permanentpen | bold italic | checklist numlist bullist | alignleft aligncenter alignright forecolor backcolor | table advtable searchreplace | link image media | code | rotateleft rotateright | imageoptions | quicklink blockquote | emoticons',
        // toolbar: "undo redo | bold italic | alignleft aligncenter alignright alignjustify | bullist numlist outdent indent | link code ",
        // menubar: true
        image_title: true,
        /* enable automatic uploads of images represented by blob or data URIs*/
        automatic_uploads: true,
        file_picker_types: 'image',
        /* and here's our custom image picker*/
        file_picker_callback: function (cb, value, meta) 
            var input = document.createElement('input');
            input.setAttribute('type', 'file');
            input.setAttribute('accept', 'image/*');
            input.onchange = function () 
                var file = this.files[0];

                var reader = new FileReader();
                reader.onload = function () 
                    var id = 'blobid' + (new Date()).getTime();
                    var blobCache = tinymce.activeEditor.editorUpload.blobCache;
                    var base64 = reader.result.split(',')[1];
                    var blobInfo = blobCache.create(id, file, base64);
                    blobCache.add(blobInfo);

                    /* call the callback and populate the Title field with the file name */
                    cb(blobInfo.blobUri(), title: file.name);
                ;
                reader.readAsDataURL(file);
            ;
            input.click();
        ,
        content_style: 'body  font-family:Helvetica,Arial,sans-serif; font-size:14px '
    );

/* html */

<textarea class="form-control texteditor" name="content" rows="2"></textarea>