正文

富文本编辑器(代码片段)

author  author  2022-12-12  173

关键词：

Django 的富文本编辑器

想要用首先下载

pip install django-tinymce

创建应用
python manage.py startapp task_1

创建模型
from django.db import models
from tinymce.models import HTMLField

class MessageInfo(models.Model):
username = models.CharField(max_length=20)
email = models.EmailField(blank=True, null=True)
subject = models.CharField(max_length=50)

info = HTMLField()

在settings中注册应用

INSTALLED_APPS = [
‘django.contrib.admin‘,
‘django.contrib.auth‘,
‘django.contrib.contenttypes‘,
‘django.contrib.sessions‘,
‘django.contrib.messages‘,
‘django.contrib.staticfiles‘,

#需要使用到第三方的静态资源  必须注册应用
`‘tinymce‘`

]**
生成迁移文件：根据模型类生成sql语句**
python manage.py makemigrations

执行迁移：执行sql语句生成数据表
python manage.py migrate

tinymce配置
TINYMCE_DEFAULT_CONFIG =
‘theme‘: ‘advanced‘,
‘width‘: 600,
‘height‘: 400,

配置项目URL
from django.conf.urls import url
from . import views
app_name= ‘blog‘

urlpatterns = [

url(r‘^contactus/$‘, views.contactus, name=‘contactus‘),

]

编写视图函数
from django.shortcuts import render
from .models import MessageInfo

def contactus(request):
if request.method == ‘GET‘:
return render(request, ‘contact.html‘)
elif request.method == ‘POST‘:
x = MessageInfo()
x.username = request.POST[‘name‘]
x.email = request.POST[‘email‘]
x.subject = request.POST[‘subject‘]
x.info = request.POST[‘message‘]
x.save()
return render(request, ‘index.html‘)
编写模板文件
<!DOCTYPE html>
<html>
<head>
<title>Black & White</title>

    <!-- meta -->
    <meta charset="UTF-8">

    <script src="/static/tiny_mce/tiny_mce.js"></script>
    <script type="text/javascript">
      tinyMCE.init(
          ‘mode‘:‘textareas‘,
          ‘theme‘:‘simple‘,
          ‘width‘: ‘100%‘ ,
          ‘height‘:100
      );
    </script>
</head>
<body>
    <div>
        <form action="% url ‘blog:contactus‘ %" method="post">
                <input type="text" name="name" placeholder="姓名" required>
                <input type="email" name="email" placeholder="邮箱" required>
                <input type="text" name="subject" placeholder="建议标题" required>
                <textarea name="message" rows="7" placeholder="输入你的建议" required></textarea>
                <button type="submit">提交</button>
        </form>
    </div>
</body>

</html>

在线文档技术揭秘开篇-富文本编辑器(代码片段)

前言本文旨在向大家介绍在线文档的核心模块富文本编辑器技术，并介绍业内主流商业文档产品如何进行富文本编辑器技术选型。富文本编辑器富文本编辑器，RichTextEditor,简称RTE,是一种可内嵌于浏览器，所见即所得... 查看详情

富文本编辑器(代码片段)

Q1：富文本编辑器在模态框中只有第一次有效解决：在关闭模态框时移除富文本编辑器Kindeditor解决方法：$(‘#myModal‘).on(‘hidden.bs.modal‘,function()//关闭Dialog前移除编辑器KindEditor.remove(‘#content‘););UEditor解决方法：$(‘#adminModalLg... 查看详情

富文本编辑器(代码片段)

借助富文本编辑器网站的编辑人员能够像Office一样，写出漂亮的所见即所得的页面。此处以tinymce为例在虚拟环境中安装包pipinstalldjango-tinymce目录： models.py settings.py urls.py admin.py ... 查看详情

ios小技能：富文本编辑器(下篇)(代码片段)

...：核心代码逻辑II工具栏设计（含demo）2.1工具栏在富文本编辑器的底部2.2工具栏在富文本编辑器的顶部III常见问题3.1隐藏键盘失去焦点时，图片内容被清空3.2插入图片无效3.3插入的网络图片只能添加到最后位置seealso引言富文本... 查看详情

vue-cli富文本编辑器(代码片段)

vue-cli富文本编辑器富文本编辑器富文本编辑器来源以下教程参考自官方的教程：https://www.wangeditor.com/安装执行以下语句安装：npmiwangeditor--save使用<template><div><divclass="home"><divid="demo1 查看详情

百度富文本编辑器的使用(代码片段)

百度富文本编辑器的使用(2016年版本)对于大文章的网上编辑，你的输入编辑框肯定不够用，现在看看功能强大的富文本编辑框吧1.ueditor官方地址：http://ueditor.baidu.com/website/index.html 开发文档地址： http://ueditor.b... 查看详情

django之百度ueditor富文本编辑器后台集成(代码片段)

Python3+Django2.0百度Ueditor富文本编辑器的集成百度富文本编辑器官网地址：http://fex.baidu.com/ueditor/ 疑问：为什么要二次集成？答案：因为百度富文本编辑器Ueditor没有对python的支持步骤1：　　在官网下载Ueditor的任意版本代... 查看详情

富文本编辑器kindeditor(代码片段)

下载在页面中添加JS代码，用于初始化kindeditor<scripttype="text/javascript">vareditor;KindEditor.ready(function(K)editor=K.create(‘textarea[name="content"]‘,allowFileManager:true););</script> 查看详情

django富文本编辑器(代码片段)

创建工程，数据中数据格式设置为models.TextField()此时编辑器是普通的文本框。使用tinymce1、安装django-tinymcepipinstalldjango-tinymce12、INSTALLED_APPS中添加‘tinymce’,3、模型文件中导入包fromtinymce.modelsimportHTMLField14、设置模型成员类型：sc... 查看详情

富文本编辑器(代码片段)

官方文档：http://simditor.tower.im/docs/doc-usage.htmllinkrel="stylesheet"type="text/css"href="[stylepath]/simditor.css"/>注意Simditor基于jQuery和module.js。hotkeys.js用于绑定热键。uploader.js与上传文件有关。如果您不需要上传功能，则不需要查看详情

vue的富文本编辑器(代码片段)

效果图一、先安装vue-quill-editornpminstallvue-quill-editor--save2.在main.js中引入//引入富文本编辑器importVueQuillEditorfrom'vue-quill-editor'//引入vue-quill-editor相关样式import'quill/dist/quill.core.css'import 查看详情

html富文本编辑器-ckeditorv4.6.2(代码片段)

查看详情

ios小技能：富文本编辑器(代码片段)

....1获得焦点3.2监听网页上选定文本的变化seealso引言富文本编辑器的应用场景：编辑商品详情设计思路：编辑器基于WKWebview实现，Editor使用WKWebview加载一个本地editor.html文件，Edito 查看详情

百度富文本ueditor编辑器的使用(代码片段)

...其是在网站开发后台管理系统的时候经常会使用到富文本编辑器，这里我们来使用百度提供的富文本编辑器UEditor，以提高我们的开发效率UEditor官网下载地址：https://ueditor.baidu.com/website/download.html 这里我下载的是jsp版本中的UT... 查看详情

kindeditor同时绑定多个富文本编辑器(代码片段)

　　　　　　　varoptions=filterMode:false,allowImageUpload:true,items:[‘source‘,‘|‘,‘undo‘,‘redo‘,‘|‘,‘preview‘,‘cut‘,‘copy‘,‘paste‘,‘justifyleft‘,‘justifycenter‘,‘justifyright‘,‘justifyfull‘,‘insertordered 查看详情

富文本编辑器-ueditor(代码片段)

官方网址：http://ueditor.baidu.com/website/index.html下载地址：http://ueditor.baidu.com/website/download.html二、使用简单步骤1.在使用页面正确导入UEditor的js文件<scripttype="text/javascript"src="<%=request.getContextPath()%&g 查看详情

富文本编辑器tinymce的使用(reactvue)(代码片段)

富文本编辑器TinyMCE的使用(ReactVue)一,需求与介绍 1.1,需求编辑新闻等富有个性化的文本 1.2,介绍TinyMCE是一款易用、且功能强大的所见即所得的富文本编辑器。TinyMCE的优势：开源可商用，基于LGPL2.1插件丰富，... 查看详情