首页 > 其他分享 >vue-quill编辑器网页版

vue-quill编辑器网页版

时间:2024-01-13 11:23:51浏览次数:31  
标签:vue false list height 编辑器 html editor quill

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      body,
      html {
        box-sizing: border-box;
        max-height: 100vh;
      }
      * {
        margin: 0;
        padding: 0;
      }
      #editor {
        height: 90vh;
      }
    </style>
    <!-- 引入样式文件 -->
    <link
      href="https://cdn.quilljs.com/1.3.4/quill.snow.css"
      rel="stylesheet"
    />
    <!-- 引入Quill库文件 -->
    <script src="https://cdn.quilljs.com/1.3.4/quill.js"></script>
  </head>
  <body>
    <!-- 创建一个编辑器容器 -->
    <div id="editor"></div>
    <!-- 初始化Quill编辑器 -->
    <script>
      var quill = new Quill("#editor", {
        theme: "snow",
        debug: "warn",
        modules: {
          toolbar: [
            ["bold", "italic", "underline", "strike", "link"],
            ["blockquote", "code-block"],
            [{ size: ["small", false, "large", "huge"] }],
            [{ font: [] }],
            [{ align: [] }],
            [{ list: "ordered" }, { list: "bullet" }],
            [{ indent: "-1" }, { indent: "+1" }],
            [{ header: [1, 2, 3, 4, 5, 6, false] }],
            ["image"],
            [{ direction: "rtl" }],
            [{ color: [] }],
            [{ background: [] }],
          ],
        },
        placeholder: "在此编辑内容",
        readOnly: false,
        content: "",
        contentType: "html",
      });
    </script>
    <div style="text-align: center; padding: 10px">
      <h6>Power By Lambert</h6>
    </div>
  </body>
</html>

标签:vue,false,list,height,编辑器,html,editor,quill
From: https://www.cnblogs.com/lambertlt/p/17962136

相关文章

  • Vue3 的效率提升主要表现在哪些方面?
    Vue3带来了许多性能优化和效率提升的特性。本文将重点讨论Vue3在静态提升、预字符串化、缓存事件处理函数、BlockTree和PatchFlag方面的改进。我们将通过对比Vue2和Vue3的编译结果来说明这些方面的效率提升。静态提升在Vue2中,每次渲染时都会重新创建VNode节点,即使是静态节点也会被......
  • Vue 3 Composition API 详解
    一、引言在Vue3中,引入了一个新的CompositionAPI,旨在提供一种更灵活和可重用的方式来组织组件代码。CompositionAPI基于函数式编程思想,允许开发者将逻辑和状态管理逻辑分离,使代码更加清晰和可维护。二、CompositionAPI的核心概念响应式数据在Vue3中,响应式数据是组件状态的重要......
  • VUE怎么提示,当用户关闭标签页,提示离开此网站?系统可能不会保存
    如果您想在用户关闭标签页时提示而不是基于路由的导航离开,您可以使用beforeunload事件。在Vue中,可以在组件的mounted钩子中添加事件监听器。以下是一个简单的示例:<template><div><!--YourVuecomponentcontentgoeshere--></div></template><script>expo......
  • 从0开始使用vue-cli构建Vue3项目
    一、环境检查1、环境是否正常#查询Node版本node-v#查询vue版本npminfovue#查询vue-cli版本vue-V2、如果没有安装vue-cli,可以执行下方命令安装vue-cli最新版本npminstall-g@vue/cli如果是旧版本,可以执行下方命令卸载旧版本,然后再安装新版本的脚手架npmuninstallv......
  • vue使用flexible.js 最大宽度只有540
    分辨率大于540px的时候,flexible限制为540,一般的手机显示没有问题,但对于大于540的竖屏屏幕,可能右边就会留白。我想让横屏的时候限制在540,竖屏的时候根据页面实际宽度自适应,解决方法如下:1、安装npminstalllib-flexible--save 2、为了避免每次安装的时候,都被覆盖掉,打开\nod......
  • Vue.nextTick在动态更新iframe的src中的使用
    Vue.nextTick在动态更新iframe的src中的使用:https://codeleading.com/article/63673310260/ 当iframe中的地址src需要动态改变时,需要使用Vue.nextTick来切换地址src,否则DOM的地址不会实现更新,而是保持上一次的src。在数据变化后要执行的某个操作,而这个操作需要使用随数据改变......
  • vue入门——???06days
    案例回顾:点击显示小电影案例-按钮点击事件-axios.get().then(res=>{res.data#响应体的内容})-v-for循环---》div#2计算属性-必须要有返回值,返回值当做属性的值-方法当属性用-computed中-它依赖的变量发生变......
  • vue 高德地图异步引用
    先建立一个文件,引入高德  gDMapLoader.jsconstak='4e9f15de14b05fd8f19e1d8fbe91f0a3'exportdefaultfunctionload(){returnnewPromise(function(resolve,reject){if(window.AMap){resolve(window.AMap)}else{varscript=doc......
  • Vue2 使用 Knova Canvas 合成图片、多个视频、音频在一个画面中并播放,自定义 video co
    本文转载https://blog.csdn.net/RosaChampagne/article/details/128020428?spm=1001.2014.3001.5502的文章安装插件npminstallvue-konva@2konva--save在main.js中使用importVuefrom'vue';importVueKonvafrom'vue-konva';Vue.use(VueKonva);相关实现代......
  • Vue-Router: 如何在Vue应用程序中使用编程式导航?
    Laravel是一个流行的PHP框架,它具有出色的可测试性,可以帮助开发人员在更短的时间内编写可靠的代码。但是,即使使用了这个框架,也可能会出现测试覆盖率较低的情况。测试覆盖率是指代码中已由测试案例覆盖的部分比例。测试覆盖率越高,代码质量越高。在本文中,我们将分享几种技巧,帮助您提......