TinyMCE使用HTML标签提交原始文本

时间:2016-09-20 12:20:36

标签: django tinymce

我在表单中使用TinyMCE文本区域来创建新的博文;当我点击&#34;提交&#34;我应该被重定向到一个新的博客页面,其中包含我在文本区域中输入的格式化内容。我实际得到的是包含<p><strong>等标签的原始内容。

是否配置不正确?这是代码:

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

<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>

查看相关代码以处理新博文:

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})

2 个答案:

答案 0 :(得分:0)

要从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>

建议:

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

答案 1 :(得分:0)

我带着一个带有tinyMCE和Javascript函数,媒体引用等的兔子洞,最后解决了我的问题,当我(1)回到非常简单的tinyMCE代码(下面是),并且(2)添加“| safe”指向tinyMCE文本的实际引用。

模板

<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>