TinyMCE 提交带有 HTML 标签的原始文本

Question

我正在使用表单中的 TinyMCE 文本区域来创建新博客 post；当我点击 "Submit" 时，我应该被重定向到一个新的博客页面，其中包含我在文本区域中输入的格式化内容。我实际得到的是带有 <p>、<strong> 等标签的原始内容。

是不是配置有问题？这是代码：

我的模板中的 TinyMCE 配置 <head>:

<script src="//cdn.tinymce.com/4/tinymce.min.js"></script>
<script type="text/javascript">
    tinymce.init({ 
        selector:'textarea' 
});
</script>

带有 TinyMCE 文本区域的表单：

<h1>New post</h1>
    <form method="POST" class="progresstracker-form">{% csrf_token %}
        {{ form.as_p }}
        <button type="submit" class="save btn btn-default">Save</button>
    </form>

查看相关代码处理新博客post:

def pt_detail(request, slug):
    ptpost = get_object_or_404(Post, slug=slug)
    return render(request, 'blog/pt_detail.html', {'ptpost': ptpost})

def progresstracker(request):
    posts = Post.objects.order_by('published_date')
    return render(request, 'blog/progresstracker.html', {'posts': posts})

def progresstracker_new(request):
    if request.method == "POST":
        form = PostForm(request.POST)
        if form.is_valid():
            ptpost = form.save(commit=False)
            ptpost.author = request.user
            ptpost.published_date = timezone.now()
            ptpost.save()
            return redirect('pt_detail', slug=ptpost.slug)
    else:
        form = PostForm()
    return render(request, 'blog/post_edit.html', {'form': form})

def post_edit(request, slug):
    ptpost = get_object_or_404(Post, slug=slug)
    if request.method == "POST":
        form = PostForm(request.POST, instance=ptpost)
        if form.is_valid():
            ptpost = form.save(commit=False)
            ptpost.author = request.user
            ptpost.published_date = timezone.now()
            ptpost.save()
            return redirect('pt_detail', slug=ptpost.slug)

    else:
        form = PostForm(instance=ptpost)
    return render(request, 'blog/post_edit.html', {'form': form})

Answer 1

要从 TinyMCE 获取内容，您必须使用编辑器函数 getContent()。我不知道 Django，但也许你应该使用隐藏的文本输入，其中保存了 TinyMCE 的内容：

<script type="text/javascript">
    tinymce.init({ 
        selector:'textarea.my_css' 
    });

    function saveContent() {
        var ed = tinymce.activeEditor;
        $('#hidContents').val(ed.getContent());
    }
</script>

<h1>New post</h1>
<form method="POST" class="progresstracker-form">{% csrf_token %}
     {{ form.as_p }}
     <button type="submit" class="save btn btn-default" onclick="saveContent">Save</button>
     <input id="hidContents" type="hidden" name="hidContents">
</form>

建议：

使用最新版本(v4.4.3)的TinyMCE
始终使用更具体的选择器，以确保您使用的是正确的文本区域 - 例如：selector: 'textarea.my_css'

Answer 2

我遇到了 tinyMCE 和 Javascript 函数、媒体引用等的问题，最后在我 (1) 回到非常简单的 tinyMCE 代码（如下所示）时解决了我的问题, (2) 在对 tinyMCE 文本的实际引用中添加了“|safe”。

模板

<header>
.
.
<script src="//tinymce.cachefly.net/4.3/tinymce.min.js"></script>
<script type="text/javascript">
tinymce.init({ 
    selector: 'textarea'
});
</script>
</header>

<body>
.
.
    {% for post in posts %} 
        <h3><a href="{{ post.get_absolute_url }}">{{ post.title }}</a></h3>
        <p style="font-size: 16px">{{ post.published_date|date:'M d, Y' }}</p>
           {{ post.body|truncatewords:50|safe }}
        <hr></hr>
    {% endfor %}
.
.
</body>

TinyMCE 提交带有 HTML 标签的原始文本

TinyMCE submitting raw text with HTML tags

django

tinymce

模板