如何使用 tinyMCE 上传带有 url 的图片

Question

我正在使用 mongoose/express/mongodb 创建博客。当我将带有 tinyMCE 的图像上传到我的博客并输入源时，该图像不会出现在我的博客上。 alt 在检查时出现，但来源没有。 tinyMCE 是否允许上传 url 图片或仅允许本地上传？如果确实允许，我该如何进行源上传？

创建路由的代码

<div class="form-group">
                    <!-- use TINYMCE for textarea -->
                    <label for="blogContent">Blog Content</label>
                    <textarea class="form-control" name="blog[body]" id="editor" cols="30" rows="10" type="hidden"></textarea>
                </div>

<script>
    tinymce.init({
        selector: 'textarea',
        height: 500,
        menubar: false,
        plugins: [
            'advlist autolink lists link image charmap print preview anchor textcolor',
            'searchreplace visualblocks code fullscreen',
            'insertdatetime media table contextmenu paste code help wordcount'
        ],
        toolbar: 'insert | undo redo |  styleselect | bold italic backcolor  | alignleft aligncenter alignright | bullist numlist outdent indent | image link | removeformat | help',
    });
    </script>

Here is me entering a photo locally

Here is the local photo populating in tinyMCE

Here is the front end of the blog with no image appearing

Here is the database entry in mlab missing the src attribute

Answer 1

您可能需要设置和提供静态文件。查看此 URL 以获取更多信息： https://expressjs.com/en/starter/static-files.html

首先在你的根目录中创建一个名为“public”的目录，然后在 express 中使用此代码：

app.use(express.static('public'))

然后您可以通过以下方式链接到上传的图片：

http://localhost:3000/images/kitten.jpg

在您的情况下，您可能需要将静态文件夹的目录设置为 tinyMCE 放置的位置。话虽如此，我个人总是出于习惯将其放在公共目录中。