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

时间:2019-01-15 02:41:06

标签: javascript node.js express mongoose tinymce

我正在使用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

1 个答案:

答案 0 :(得分:0)

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

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

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

然后您可以通过以下链接链接到上传的图像:

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

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