精华内容
参与话题
问答
  • mavon-editor markdown 编辑器 项目使用mavon-editor markdown编辑器,由于项目需要存储在数据库中的是md文件,所以需要通过marked转译为HTML文件 引入mavon-editor //安装 npm i mavon-editor //引入 import mavon...

    博客地址:http://www.globm.top/blog/1/detail/27
    效果图

    代码块效果图copy

    mavon-editor markdown 编辑器

    项目使用mavon-editor markdown编辑器,由于项目需要存储在数据库中的是md文件,所以需要通过marked转译为HTML文件

    引入mavon-editor

    //安装
    npm i mavon-editor
    
    //引入
    import mavonEditor from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)
    
    //使用
    <template>
    	<mavon-editor
    	      v-model="content"
    	      :placeholder="'Edit ···'"
    	      ref="md"
    	      @imgAdd="$imgAdd"
    	      @imgDel="$imgDel"
    	      @change="change"
    	      :toolbars="toolbars"
    	      :toolbarsBackground="'#f9f9f9'"
    	      style="height: calc(100vh - 50px)"
    	    />
    </template>
    
    //参数
    toolbars: {
            bold: true, // 粗体
            italic: true, // 斜体
            header: true, // 标题
            underline: true, // 下划线
            strikethrough: true, // 中划线
            mark: true, // 标记
            superscript: true, // 上角标
            subscript: true, // 下角标
            quote: true, // 引用
            ol: true, // 有序列表
            ul: true, // 无序列表
            link: true, // 链接
            imagelink: true, // 图片链接
            code: true, // code
            table: true, // 表格
            fullscreen: false, // 全屏编辑
            readmodel: false, // 沉浸式阅读
            htmlcode: true, // 展示html源码
            help: true, // 帮助
            /* 1.3.5 */
            undo: true, // 上一步
            redo: true, // 下一步
            trash: true, // 清空
            save: false, // 保存(触发events中的save事件)
            /* 1.4.2 */
            navigation: true, // 导航目录
            /* 2.1.8 */
            alignleft: true, // 左对齐
            aligncenter: true, // 居中
            alignright: true, // 右对齐
            /* 2.2.1 */
            subfield: true, // 单双栏模式
            preview: false // 预览
          }
    
    //methods
    methods: {
        $imgAdd (pos, $file) {
          // 第一步.将图片上传到服务器.
          var formdata = new FormData()
          formdata.append('image', $file)
          this.img_file[pos] = $file
          this.$http({
            url: '/api/edit/uploadimg',
            method: 'post',
            data: formdata,
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((res) => {
            let _res = res.data
            // 第二步.将返回的url替换到文本原位置![...](0) -> ![...](url)
            this.$refs.md.$img2Url(pos, _res.url)
          })
        },
        $imgDel (pos) {
          delete this.img_file[pos]
        },
        change (value, render) {
          this.html = render
        },
        // 提交
        submit () {
          console.log(this.content)
          console.log(this.html)
        }
      }
    

    注:该编辑器支持代码块高亮,可通过codeStyle自定义配置,本项目为了灵活运用,使用的是自定义的代码样式
    具体参数请参考mavon-editor官方文档

    导入文件
    数据库存储数据为md文件,所以需要转译为html文件

    安装

    npm install marked
    

    转译

    import marked from 'marked'             //引入
    //通过marked()转译
    this.article.html = marked(this.article.content)
    

    代码块高亮显示

    引入

    npm install highlight.js
    

    配置
    新建hljs.js,注册全局指令

    import Vue from 'vue'
    import hljs from 'highlight.js'
    import 'highlight.js/styles/googlecode.css' // 样式文件
    Vue.directive('highlight', function (el) {
      let blocks = el.querySelectorAll('pre code')
      blocks.forEach((block) => {
        hljs.highlightBlock(block)
      })
    })
    

    main.js引入hljs.js

    import './plugins/hljs'
    

    组件中使用

    <div class="markdown-body" v-html="article.content" v-highlight></div>
    

    mavon-editor 编辑器需要单独导入css文件

    import 'mavon-editor/dist/markdown/github-markdown.min.css'
    

    问题(按需使用):这样使用会在页面渲染的时候会出现高亮效果,但是这导致的问题是,切换路由的时候代码高亮会消失。之所以产生这种现象,这跟 hljs.initHighlightingOnLoad()的定义有关,因为只执行一次。
    可以重写 hljs.initHighlighting()方法,在组件的中是使用 hljs.highlightCode(),每次页面加载的时候都会执行渲染代码的逻辑

    //在main.js中  
    import 'highlight.js/styles/googlecode.css'
    import hljs from 'highlight.js'
    hljs.highlightCode = function () { 
    	//自定义highlightCode方法,将只执行一次的逻辑去掉
    	let blocks = document.querySelectorAll('pre code');
    	[].forEach.call(blocks, hljs.highlightBlock);
    };
    //在组件中
    export default {
      mounted(){
         hljs.highlightCode()
      }    
    }
    

    代码块添加行号
    新建mavon.js

    
    import $ from 'jquery'
    import Vue from 'vue'
    export const addCodeBtn = _ => {
    	//markdown代码存放在pre code 标签对中
      $('pre code').each(function () {
        let lines = $(this).text().split('\n').length - 1
        //添加有序列表
        let $numbering = $('<ol/>').addClass('pre-numbering')
        //添加复制按钮,此处使用的是element-ui icon 图标
        let $copy = $('<i title="copy"/>').addClass('el-icon-document-copy code-copy')
        $(this)
          .parent()
          .addClass('code')
          .append($numbering)
          .append($copy)
        for (let i = 0; i <= lines; i++) {
          $numbering.append($('<li/>'))
        }
      })
      //监听复制按钮点击事件
      $('pre.code i.code-copy').click(e => {
        let text = $(e.target).siblings('code').text()
        let element = $('<textarea>' + text + '</textarea>')
        $('body').append(element)
        element[0].select()
        document.execCommand('Copy')
        element.remove()
        //这里是自定义的消息通知组件
        Vue.prototype.$notice.success({
          msg: '代码复制成功'
        })
      })
    }
    
    

    在css文件中设置样式

    pre.code {
        position: relative;
        border-radius: 3px;
        border: 1px solid #C3CCD0;
        overflow: hidden;
        padding-left: 60px!important;
        code {
            line-height: 30px!important;
        }
        ol.pre-numbering {
            position: absolute;
            top: 0;
            left: 5px;
            line-height: 30px;
            padding: 16px 0;
            list-style-type:none;
            counter-reset:sectioncounter;
            margin-bottom: 0;
            li{
                margin-top: 0!important;
                &:before{
                    content:counter(sectioncounter) "";
                    counter-increment:sectioncounter;
                    display: inline-block;
                    width: 40px;
                    text-align: center;
                    border-right: solid 1px rgba(0, 0, 0, 0.53);
                }
            }
        }
        i.code-copy{
            position: absolute;
            top:0;
            right: 0;
            background-color: #464d5e;
            padding: 3px;
            margin: 3px 3px 0 0;
            font-size: 11px;
            border-radius: inherit;
            color: #f1f1f1;
            cursor: pointer;
            display: none;
        }
        &:hover i.code-copy{
            display: block;
        }
    }
    

    last
    在组件中引入

    import { addCodeBtn } from '../assets/js/mavon'
    
    this.$nextTick(_ => {
      addCodeBtn()
    })
    

    ok最后,踩坑不易,点个赞吧 ^ _ ^

    展开全文
  • Vue轻量级富文本编辑器-Vue-Quill-Editor

    万次阅读 多人点赞 2018-09-04 19:51:35
    先看效果图:女神镇楼 ...下载Vue-Quill-Editor npm install vue-quill-editor --save 下载quill(Vue-Quill-Editor需要依赖) npm install quill --save 代码 <template>...

         

      先看效果图:女神镇楼
          

               

    1. 下载Vue-Quill-Editor
       
      
      npm install vue-quill-editor --save

       

    2. 下载quill(Vue-Quill-Editor需要依赖)
       
      npm install quill --save

       

    3. 代码
       
      <template>
          <div class="edit_container">
              <quill-editor 
                  v-model="content" 
                  ref="myQuillEditor" 
                  :options="editorOption" 
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
              </quill-editor>
          </div>
      </template>
      <script>
      import { quillEditor } from "vue-quill-editor"; //调用编辑器
      import 'quill/dist/quill.core.css';
      import 'quill/dist/quill.snow.css';
      import 'quill/dist/quill.bubble.css';
      export default {
          components: {
              quillEditor
          },
          data() {
              return {
                  content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
                  editorOption: {}
              }
          },
          methods: {
              onEditorReady(editor) { // 准备编辑器
      
              },
              onEditorBlur(){}, // 失去焦点事件
              onEditorFocus(){}, // 获得焦点事件
              onEditorChange(){}, // 内容改变事件
          },
          computed: {
              editor() {
                  return this.$refs.myQuillEditor.quill;
              },
          }
      }
      </script>
      

      OK,搞定,简洁的富文本编辑器就展现在你眼前了,另外附上API。Vue-Quill-Editor

    4. 自定义 toolbar 菜单
       

      editorOption: {
                    placeholder: "请在这里输入",
                    modules:{
                      toolbar:[
                                ['bold', 'italic', 'underline', 'strike'],    //加粗,斜体,下划线,删除线
                                ['blockquote', 'code-block'],     //引用,代码块
                                [{ 'header': 1 }, { 'header': 2 }],        // 标题,键值对的形式;1、2表示字体大小
                                [{ 'list': 'ordered'}, { 'list': 'bullet' }],     //列表
                                [{ 'script': 'sub'}, { 'script': 'super' }],   // 上下标
                                [{ 'indent': '-1'}, { 'indent': '+1' }],     // 缩进
                                [{ 'direction': 'rtl' }],             // 文本方向
                                [{ 'size': ['small', false, 'large', 'huge'] }], // 字体大小
                                [{ 'header': [1, 2, 3, 4, 5, 6, false] }],     //几级标题
                                [{ 'color': [] }, { 'background': [] }],     // 字体颜色,字体背景颜色
                                [{ 'font': [] }],     //字体
                                [{ 'align': [] }],    //对齐方式
                                ['clean'],    //清除字体样式
                                ['image','video']    //上传图片、上传视频
                                ]
                            }
                      },

       

    5. 存储及将数据库中的数据反显为HTML字符串

      后台接收到数据后会将字符中的标签进行转码,所以我们要先进行一个解码的操作让他变成标签形式的字符串:
      例如后台接收的数据如下:"&lt;h1&gt;title&lt;"  ,对应解码后就是`<h1>title</h1>`。

      //把实体格式字符串转义成HTML格式的字符串
      escapeStringHTML(str) {
          str = str.replace(/&lt;/g,'<');
          str = str.replace(/&gt;/g,'>');
          return str;
      }

      然后将返回值赋值给对应的参数:
       

      <div v-html="str" class="ql-editor">
          {{str}}
      </div>

      上面的str就是转码函数返回的值,我们要先在data中定义,所以我现在将新增跟展示放在一起,代码如下:

       

      <template>
          <div class="edit_container">
              <!--  新增时输入 -->
              <quill-editor 
                  v-model="content" 
                  ref="myQuillEditor" 
                  :options="editorOption" 
                  @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
                  @change="onEditorChange($event)">
              </quill-editor>
              <!-- 从数据库读取展示 -->
              <div v-html="str" class="ql-editor">
                  {{str}}
              </div>
          </div>
      </template>
      <script>
      import { quillEditor } from "vue-quill-editor"; //调用编辑器
      import 'quill/dist/quill.core.css';
      import 'quill/dist/quill.snow.css';
      import 'quill/dist/quill.bubble.css';
      export default {
          components: {
              quillEditor
          },
          data() {
              return {
                  content: `<p></p><p><br></p><ol><li><strong><em>Or drag/paste an image here.</em></strong></li><li><strong><em>rerew</em></strong></li><li><strong><em>rtrete</em></strong></li><li><strong><em>tytrytr</em></strong></li><li><strong><em>uytu</em></strong></li></ol>`,
                  str: '',
                  editorOption: {}
              }
          },
          methods: {
              onEditorReady(editor) { // 准备编辑器
      
              },
              onEditorBlur(){}, // 失去焦点事件
              onEditorFocus(){}, // 获得焦点事件
              onEditorChange(){}, // 内容改变事件
              // 转码
              escapeStringHTML(str) {
                  str = str.replace(/&lt;/g,'<');
                  str = str.replace(/&gt;/g,'>');
                  return str;
              }
          },
          computed: {
              editor() {
                  return this.$refs.myQuillEditor.quill;
              },
          },
          mounted() {
              let content = '';  // 请求后台返回的内容字符串
              this.str = this.escapeStringHTML(content);
          }
      }
      </script>
      

      最后提醒大家一句,插件只兼容IE10以上,不能向下兼容,如果要向下兼容,只能放弃使用这个插件。     

     

    展开全文
  • CHM Editor

    千次阅读 2020-04-28 10:56:34
    CHM Editor .chm的各种官方文档查看工具
      

    CHM Editor

    .chm的各种官方文档查看工具

    展开全文
  • 小伙伴们在Unity中开发时,可能会遇到Invalid editor window UnityEditor.FallbackEditorWindow UnityEditor.EditorApplication这个问题,如何解决呢? 二、解决方案 在Layout中,点击Revert Factory Settings即可。...

    一、背景

    小伙伴们在Unity中开发时,可能会遇到Invalid editor window UnityEditor.FallbackEditorWindow UnityEditor.EditorApplication这个问题,如何解决呢?

    二、解决方案

    在Layout中,点击Revert Factory Settings即可。
    在这里插入图片描述

    三、注意事项

    1.大家好,我是黑夜の骑士,欢迎大家关注我的博客,笔者将持续输出BIM相关软件开发、移动互联网开发以及游戏编程干货;
    2.欢迎加入BIM行业开发交流群,获取更多开发资料 群号:711844216
    3.欢迎加入U3D魔法师交流群,共同学习进步,群号:1105535938

    展开全文
  • Three.js编辑器editor使用详解

    万次阅读 2020-08-03 15:34:14
    Three.js编辑器editor使用详解官网下载Three.js压缩包其他的文件内容如下:了解过文件内容之后下一步: 官网下载Three.js压缩包 github官网源码包 解压后文件目录如下图: 其他的文件内容如下: Build目录:包含两...
  • 虚幻4 Editor 编程

    千次阅读 2015-07-10 12:13:36
    Editor
  • Monaco Editor

    千次阅读 2019-05-15 11:18:20
    Monaco Editor是为VS Code提供支持的代码编辑器,其功能在此处有更好的描述。 请注意,此存储库不包含代码编辑器的源代码,它仅包含将所有内容打包在一起并发送monaco-editornpm模块的脚本。 图片 试试看 在我们...
  • UnityEditor研究学习之EditorWindow

    千次阅读 2019-03-22 22:26:41
    UnityEditor研究学习之EditorWindow 在unity使用过程中,其实我们都是在各个不同功能的Window下工作。 比如在Scene窗口中操作物体,在Inspector中操作物体属性,在Game视窗中观察游戏状态。 所以窗口是Unity...
  • Torrent File Editor

    千次阅读 2018-07-29 20:53:41
    https://jaist.dl.sourceforge.net/project/torrent-file-editor/ v0.3.11 下载: https://jaist.dl.sourceforge.net/project/torrent-file-editor/v0.3.11/torrent-file-editor-0.3.11-x64.exe ...
  • Invalid editor window UnityEditor.FallbackEditorWindow UnityEditor.EditorApplicationLayout:FinalizePlaymodeLayout() 在我从远程服务器上下载文件时unity一直报这个错误。我找到了百度贴吧 ...
  • Notepad++的64位HexEditor免费下载

    万次阅读 多人点赞 2018-10-10 22:05:44
    64位Notepad++的HexEditor下载",搜索结果全是CDSN的用户上传的需要积分才能下载的链接。我就奇了怪了,这个插件明明是人人可取之,用之的东西,却成了你们赚积分的工具,好生不要脸。  下面是Notepade++64位...
  • Unity_Editor

    2019-06-27 10:59:30
    在资源目录下的Editor文件夹下的脚本。 引用UnityEditor并继承Editor类 [MenuItem("MyEditor/MyFunction")] 放在静态方法的前面,在上面的菜单栏会出现MyEditor选项,点击下选项中的MyFunction会执行相应的静态...
  • [Editor]Unity Editor类常用方法

    千次阅读 2017-11-15 09:55:01
    [Editor]Unity Editor类常用方法 Editor文档资料 Unity教程之-Unity Attribute的使用总结:http://www.unity.5helpyou.com/3550.html 利用unity3d属性来设置Inspector面板的特殊行为: ...
  • unity3D安卓打包报错: UnityEditor.BuildPlayerWindow+BuildMethodException: ... at UnityEditor.BuildPlayerWindow+DefaultBuildMethods.BuildPlayer (UnityEditor.BuildPlayerOptions options) [0x00242] in ...
  • Unity Editor 编辑器扩展 六 EditorWindow

    千次阅读 2016-12-03 15:17:19
    为窗口添加图标和菜单EditorWindow的简单用法之前都用过了,这里介绍一些特殊的用法窗口弹出框在Editor下创建脚本如下:using UnityEditor; using UnityEngine;public class WindowExample1 : EditorWindow { ...
  • UnityEditor开发(二)EditorWindow

    千次阅读 2018-03-15 14:16:37
    贴出一下常用的按钮 输入框等用法using UnityEditor; using UnityEngine; public class EditorWindowTemolate : EditorWindow { string m_Lable = ""; float m_SliderValue = 0; Color m_color; ...
  • Unity Editor 数据持久化及窗口的使用 代码 Test2_1csUnity Editor 数据持久化及窗口的使用学习一下编辑器数据永久保存,和PlayerPrefs基本上是一样的,顺便熟悉下新建窗口,里面控件类似OnGUI。代码 Test2_1.cs...
  • MonacoEditor 配置

    2020-07-27 14:19:40
    <template> <... class="monaco-editor"></div> </div> </template> <script> import * as monaco from "monaco-editor"; export default { name: "MonacoEd.
  • jsonEditor用法

    万次阅读 2018-04-14 13:12:38
    resources/js/jsoneditor/jsoneditor.js?v=&lt;%=WebResourcesVersion.JSONEDITOR%&gt;"&gt;&lt;/script&gt; &lt;link rel="stylesheet" type="text/css" href=
  • jsonEditor离线版

    热门讨论 2014-07-23 18:26:33
    jsonEditor离线版.可整理JSON格式生成对象树。
  • SQLite Editor

    千次阅读 2014-08-07 22:50:02
    SQLite Editor是Speed Software开发的一款Android本地SQLite数据库文件查看器,在Google Play的购买和下载量为5万次以上。这些用户主要是Speed Software开发的另一款大名鼎鼎的工具Root Explorer带来。 当用户...
  • 另外代码不高亮的问题参考:解决0.25.1 版本的 react-monaco-editor 代码高亮和代码提示问题及我的另一篇文章。 注意: 本文章是基于 react-monaco-editor@0.18.0 版本写的,如果使用新版本,比如 0.25.1 代码无法...
  • Editor.js 使用

    千次阅读 2019-04-04 16:22:28
    Editor.js Editor.js 是一个在线富文本编辑器 官网链接:https://editorjs.io/ Editor.js 快速入门 导入编辑器库 Install Editor.js 编辑器初始化 Configure and initialise the Editor 安装工具 Install and Tools...
  • Unity3D Editor 编辑器扩展3 Editor脚本

    千次阅读 2018-05-31 23:06:56
    Unity3D Editor 编辑器扩展3 Editor脚本环境:Unity2017.2 语言:C# 总起:在编辑Unity项目的时候,总不可能避免的接触到Unity自身自带的Inspector参数调整无法很好的完成某些特定功能的情况。 比方说想要一个...
  • 只需要将自己的GUI方法注册到事件Editor.finishedDefaultHeaderGUI即可,在GUI方法中你可以书写任何已知的GUI控件代码,如下,新建一个类DefaultHeaderDisplay,将他放到Editor文件夹下,并在其中键入如下代码: ...
  • quillEditor 高度设置

    万次阅读 2019-03-01 23:59:32
    问题:quillEditor 高度设置 // 设置编辑器高度 this.editor.container.style.height = `${500}px` 问题:解决
  • vue使用Monaco editor

    千次阅读 2020-07-08 17:04:17
    1、项目中使用monaco-editor首先要安装 npm install monaco-editor -S 2、在组件中引用并使用:初始化、更改内容、销毁 <template> <div ref="container" style="height: 360px;width: 100%;"><...

空空如也

1 2 3 4 5 ... 20
收藏数 141,519
精华内容 56,607
关键字:

editor