精华内容
下载资源
问答
  • 1.优点 轻量级(相比Ueditor) 使用更加简单 操作功能基本可以满足需求 ...$ npm install --save vue-markdown //2.引入 可以在main.js中 import { mavonEditor } from 'mavon-editor' import 'mavon-editor...

    1.优点

    1. 轻量级(相比Ueditor)
    2. 使用更加简单
    3. 操作功能基本可以满足需求

    2.缺点

    1. 没有Ueditor功能齐全

    3.使用方法(步骤)

    1. 安装
    $ npm install --save vue-markdown
    
    1. 引入
    可以在main.js中
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    Vue.use(mavonEditor)
    也可以在xxx.vue文件中使用
    <script>
    import { mavonEditor } from 'mavon-editor'
    import 'mavon-editor/dist/css/index.css'
    // 注册组件
    components: {
       mavonEditor
     },
    </script>
    
    1. 页面
    <template>
    	<div class="warp">
    		<mavonEditor
    			@change="getValue"
    			:ishljs = "true"
    			:toolbars='toolbars'
    			ref=md
    			@imgAdd="imgAdd"
    			@imgDel="imgDel">
    		</mavonEditor>
    	</div>
    </template>
    
    1. data中的配置项
    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: true, // 全屏编辑
        readmodel: true, // 沉浸式阅读
        htmlcode: false, // 展示html源码
        help: false, // 帮助
        /* 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: true // 预览
      }
    

    5)方法集

    methods: {
    	imgDel (pos) {
          delete this.img_file[pos]
        },
        getValue (val) {
          console.log(val)
        },
        // 绑定@imgAdd event
        imgAdd (pos, file) {
          // 第一步.将图片上传到服务器.
          var formdata = new FormData()
          formdata.append('images', file)
          axios({
            url: 'server url',
            method: 'post',
            data: formdata,
            headers: { 'Content-Type': 'multipart/form-data' }
          }).then((url) => {
            // 第二步.将返回的url替换到文本原位置[外链图片转存失败(img-km0CAbRE-1566284198012)(0)] -> [外链图片转存失败(img-Pf2xMUAu-1566284198016)(url)]
          })
        }
    }
    
    

    5)最后呈现的效果图
    在这里插入图片描述

    展开全文
  • 使用 Showdown.js 可以实现在 Anki 中使用 Markdown 语法编写内容。在 PC 端和 Ankidroid 上都能正常渲染 Markdown。这里有一个样例牌组可以直接导入使用:Markdown Demo 牌组模板 HTML 中,所有<div class="md-...

    e970e6660457b7765f1af205e2e50d18.png

    使用 Showdown.js 可以实现在 Anki 中使用 Markdown 语法编写内容。在 PC 端和 Ankidroid 上都能正常渲染 Markdown。

    这里有一个样例牌组可以直接导入使用:Markdown Demo 牌组

    模板 HTML 中,所有<div class="md-content">...</div> 之间的内容都会被当作 Markdown 格式进行渲染。


    为了使用 Showdown.js 需要引入三个文件:

    • highlight.min.js
    • showdown.min.js
    • highlight.default.min.css

    这三个文件可以直接添加到媒体文件(推荐)或者从网络 CDN 处获取。

    • 如果通过媒体文件,文件名要以下划线 _ 开头,防止 Anki 把它们当作未被引用的文件而删除。
    • 如果使用网络 CDN,需要修改下面代码中三个变量的值:highlightcssUrl showdownUrl highlightjsUrl 替换为完整的 CDN 链接:
    https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/styles/default.min.css
    https://cdnjs.cloudflare.com/ajax/libs/showdown/1.9.0/showdown.min.js
    https://cdnjs.cloudflare.com/ajax/libs/highlight.js/9.15.5/highlight.min.js

    在 js 代码中通过 addStylesheetaddScript 两个而函数分别引入 css 样式文件和 js 文件(这一部份具体从哪里参考来的我已经不记得了)。

    进行 Markdown 渲染时,<div class="md-content"> 中的内容会被提取文本(使用 innerText 属性从 HTML 富文本中提取出内容文字的文本),并替换其中的空白字符。最后通过 Showdown.js 将 Markdown 转化为 HTML 格式。

    正面模板:

    <div class="section">
    <div class="question md-content">{{Question}}</div>
    </div>
    
    <script>
    function addStylesheet(src, callback) {
        var s = document.createElement('link');
        s.rel = 'stylesheet';
        s.href = src;
        s.onload = callback;
        document.head.appendChild(s);
    }
    function addScript(src, callback) {
        var s = document.createElement('script');
        s.src = src;
        s.type = "text/javascript";
        s.onload = callback;
        document.body.appendChild(s);
    }
        
    function replaceAllWhitespaceWithSpace(str) {
        return str.replace(/[tvf u00a0u2000-u200bu2028-u2029u3000]/g, ' ');
    }
    var highlightcssUrl = "_highlight.default.min.css";
    var showdownUrl = "_showdown.min.js";
    addStylesheet(highlightcssUrl, function() {
    });
    addScript(showdownUrl, function() {
        var highlightjsUrl = "_highlight.min.js";
        addScript(highlightjsUrl, function() {
            function processShowdownDivs() {
                var showdownConverter = new showdown.Converter();
                showdownConverter.setFlavor('github');
    
                document.querySelectorAll('div.md-content').forEach((div) => {
                    var rawText = div.innerText;
                    var classes = div.className.replace(/md-content/g, "");
                    var text = replaceAllWhitespaceWithSpace(rawText);
                    var html = showdownConverter.makeHtml(text);
                    var newDiv = document.createElement('div');
                    newDiv.innerHTML = html;
                    newDiv.className = classes;
                    newDiv.querySelectorAll('pre code').forEach((block) => {
                        hljs.highlightBlock(block);
                    });
                    div.parentNode.insertBefore(newDiv, div.nextSibling);
                    div.style.display = 'none';
                });
            };
    
            processShowdownDivs();
         });
    });
    </script>

    背面模板:

    {{FrontSide}}
    
    <hr id=answer>
    
    <div class="section">
    <div id="back" class="answer md-content">{{Answer}}</div>
    </div>

    样式:

    .card {
     font-family: roboto, arial;
     font-size: 15px;
     text-align: center;
     color: black;
     background-color: white;
    }
    .question {
        font-size: 20px;
        line-height: 2;
        background-color: #d0d4ea;
    }
    .answer {
        font-size: 15px;
        text-align: left;
        line-height: 1.3;
        border-radius: 1.2em 0.2em;
    }
    .section {
      box-shadow: 0 1px 2px 0px rgba(0, 0, 0, 0.16),0 0px 0px 1px rgba(0, 0, 0, 0.02);
      border-radius: 2px;
      margin: 8px 0 8px 0;
    }
    .hightlight{
      font-size: 13px;
      border-radius: 4px;
      color: #fff;
      padding: 0 3px;
      margin-right: 5px;
    }

    最后是一张截图预览:

    221c253d3ed1e2d98a3cd27b0d666075.png
    Markdown 显示结果

    参考

    • How to load external javascript? : Anki
    • showdownjs/showdown: A bidirectional Markdown to HTML to Markdown converterter
    • 【Anki】在Ankidroid上显示数学公式_Perfect的博客-CSDN博客_ankidroid
    展开全文
  • Django使用Ueditor

    千次阅读 2017-04-23 23:18:42
    Ueditor是比较流行的富文本编辑器,如果不喜欢用markdown可以考虑使用。注意:这俩玩意不兼容,换了Ueditor以后markdown语法就失效了。

    Ueditor是比较流行的富文本编辑器,如果不喜欢用markdown可以考虑使用。

    注意:这俩玩意不兼容,换了Ueditor以后markdown语法就失效了。


    安装

    直接用pip安装的Ueditor是python2版本的,如果需要Python3版本就需要下载源码包

    解压后在命令行中进入源码包,输入python setup.py install

    配置settings

    就是在INSTALLED_APPS添加’DjangoUeditor’即可

    配置urls

    在主urls.py中添加url(r'^ueditor/',include('DjangoUeditor.urls' ))

    在models.py中使用

    from DjangoUeditor.models import UEditorField
    
    #创建文章模型
    class Article(models.Model):
    #models中所有的模型都是django.db.models.Model的子类
        #用来给文章状态提供选项的二元组
        STATUS_CHOICES = (
    	    ('draft','草稿'),
    		('published','已发布'),
    		)
    
    	#创建文章的标题、正文、创建时间、文章状态、分类等属性
        title = models.CharField('标题',max_length=20)
        **text = UEditorField('正文',)**
    

    下面是后台添加文章的截图:

    mark

    展开全文
  • 转自机器之心只要你有纯文本编辑器,加上一条语句,瞬间它就可以成为 Markdown 编辑器。Markdeep 是一个用来写纯文本的插件,它能以 Markdown 的语法与渲染方式纯文本,并在网页上展示。同时,除了 Markdown 语法,...

    公众号关注 “GitHubDaily”

    设为 “星标”,每天带你逛 GitHub!

    16e18cf667f69f6303d2a1561af4d116.png转自机器之心
    只要你有纯文本编辑器,加上一条语句,瞬间它就可以成为 Markdown 编辑器。
    Markdeep 是一个用来写纯文本的插件,它能以 Markdown 的语法与渲染方式纯文本,并在网页上展示。同时,除了 Markdown 语法,Markdeep 还额外支持图表、数学方程等扩展能力。项目主页:https://casual-effects.com/markdeep/我们先看看效果,如下左边是纯文本编辑器的编辑页面,右边是在浏览器上的渲染效果:2218a9e0d1e66c6ffe98e4baac319cb1.pngMarkdeep 非常容易使用,它也不需要安装插件或联网。如上所示只要在纯文本最后加上「看着 Markdeep 很简单,但它的功能却不少,一点也不逊色于 Typora 等正统的 Markdown 编辑器。不论我们是写项目的 README 文档、实验报告,还是要做 PPT 或写论文,它都能满足。该项目提供了很多示例,例如生成的 PPT 是什么样的,后文会具体展示。开源代码Markdeep 是开源的,所以可以直接下载和修改源代码文件 markdeep.js。整个编辑器就是一个 JavaScript 脚本,上面定义了各种格式与渲染方式。作者表示,目前他正研究该如何有效降低脚本文件大小。27f17510116d2a6ecb6a500f93cb5f10.png用于表格处理的部分代码,整个脚本有超过 5000 行代码。脚本源码地址:https://casual-effects.com/markdeep/latest/markdeep.js作者表示,这个项目本来就是一个业余项目,它并不会有完整的技术支持。不过只要提交的 Bug 足够具体,作者都会完善它。此外,该项目还会经常加入一些新特性,从 2015 年 10 月份的第一版,到今年 2 月份的最新版,这个编辑器已经维护了很长时间。Markdeep 怎么用如果你需要创建一个 Markdeep 的文件,只需要打开任意一个文本编辑器,然后开始编辑。完成文本编辑工作后,只需要在其底部写下一个简单的代码就行了。然后,将这个文档保存为纯文本文件,使用 .md.html 为扩展名。
    <style class="fallback">body{visibility:hidden;white-space:pre;font-family:monospace}style><script src="markdeep.min.js" charset="utf-8">script><script src="https://casual-effects.com/markdeep/latest/markdeep.min.js" charset="utf-8">script><script>window.alreadyProcessedMarkdeep||(document.body.style.visibility="visible")script>
    如果你希望在源文档中使用 Unicode,则需要在文档顶部先加上这句话:
    <meta charset="utf-8">
    想要看看效果?你可以将文本拖入浏览器或双击它。即使网络离线也可以查阅文档。如果不想因为离线而失去格式,可以将 markdeep.min.js 文件和文档保存在一个文件夹中。如果想要看看 Markdeep 原始文本,在文件 URL 最后加上「?noformat」即可。上手示例小编随手测试了几个典型 Markdown 语法,比如:代办列表、自动链接、表格、内联图片、代码。与此同时,LaTeX 的数学表达式和图形也能直接设计,而不需要任何插件。具体效果可参考:dc37189a28e0fa50c99732497f36ecd2.png简而言之,配备完善,对于熟悉 Markdown 的小伙伴来说,用起来会十分顺手及方便。这意味着,在有网的情况下,随意拎一个文本编辑器后,就再也没有人能拦得了你使用 Markdown 了。与此同时,时时预览效果也非常简便,只需要在文本编辑器里修改,浏览器中刷新下便可呈现最新效果。Markdeep 能干什么只要是 Markdown 支持的,Markdeep 就能够支持,它在业界和学术界能得到广泛使用。如下所示,各种题材与格式的文档都能用 Markdeep 完成:
    • API 文档

    • 教学大纲

    • 游戏设计文件

    • 家庭作业

    • 课程 PPT

    • 软件库网站

    • 个人博客

    • 简历

    • 论文

    看起来 Markdeep 似乎什么都能做,项目作者同样也展示了这些方面的效果图:255dd25dc9731901b3f7309c2e05fa2c.pngMarkdeep 制作的 PPT。f2024359849f24f1c423525f86da41d0.pngMarkdeep 制作的个人简历。总之,除了使用方便、展示炫酷,Markdeep 的功能也是非常强大。正如其它开发者所强调的,Markdeep 是能制作简单图表的 Markdown 工具,它以一种「ASCII Art」的方式用纯文本制作出图形,并且不用渲染也非常明晰。
    推荐阅读:计算机领域有哪些常见的比赛微信小程序学习资源汇总整理哈哈哈,这个教人写出烂代码的项目在 GitHub 上火了...GitHub 开源的这款编程神器,我爱了!太赞了:中文版开源!这或许是最经典的计算机编程教材
    	
    展开全文
  • spring boot2.0整合富文本编辑器Ueditor

    千次阅读 2019-01-02 22:06:24
    个人博客需要使用到富文本编辑器,当时在markdownueditor两者间选择,但是由于外观问题,就否决了markdown,进了ueditor的坑,弄了好几天。 好吧,直接开始介绍我的过程。 首先工具 1.spring boot2.1.0 2....
  • 导读:利用markdown语法,让更多的博客作者能够专注于写作本身,而不会因为各种设置打乱了创作的思绪。本文首先简单介绍markdown的编辑器Typora,接着描述了怎么通过Typora的代码模式将编辑好的文件发布到csdn和微信...
  • UEditor开发文档

    2015-12-09 13:07:19
    UEditor是百度开发的富文本编辑器,提供强大的在线编辑功能.由于官方文档都是在线的,所以特意制作了离线版本的文档 注意,该文档需要用火狐浏览器才能查看,或部署到服务器.因为需要加载markdown文件
  • 项目地址简书不支持markdown其他站点的外链很遗憾整合过程后端改造因为项目使用的springboot框架,而UEditor对于java后端的支持仅仅是给了一个jsp文件。因此,需要对该文件进行一下处理,修改为面向springboot的统一...
  • 打算用django框架做一个类似csdn的网站,不过没有使用markdown而是用的ueditor。 这里在django中嵌入ueditor以及显示代码高亮的时候遇到了一些困难,现在记录下来。插入ueditor 这里django框架下使用DjangoUeditor...
  • 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor (二)...
  • 如何在vue3.0项目中使用ueditor上传图片并回显 含token(vue+vue-ueditor-wrap)欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的...
  • Laravel 框架集成 UEditor 编辑器

    千次阅读 2019-02-18 20:39:07
    在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor ...
  • 欢迎使用Markdown编辑器 你好! 这是你第一次使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何使用Markdown编辑器, 可以仔细阅读这篇文章,了解一下Markdown的基本语法知识。 新的改变 我们对Markdown编辑器...
  • 3)typecho后台---控制台---个人设置---关闭使用 Markdown 语法编辑和解析内容功能。 4)typecho后台---控制台---插件---开启UEditor插件。 详情可以查看:http://www.jyboke.com/typecho/42.html
  • 最近在做一个美食博客的网站系统,需要实现发布文章页面的效果(类似CSDN的Markdown写文章的功能),所以使用了UEditor编辑器代替了Markdown的编辑器,发布文章的时候可以将文章的html生成出来并直接插入到数据库数据中...
  • Markdown编辑器使用[StackEdit][6]修改而来,用它写博客,将会带来全新的体验哦: Ueditor Cannot set property ‘innerHTML’ of undefined UE.getEditor(‘toolLicenseUpUE’).setContent(data.reason); ...
  • 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor ...
  • 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor ...
  • 在项目开发的过程中,免不了使用修改功能,而富文本编辑器是极为方便的一种推荐,当然,个人认为 MarkDown 更为简单,但是感觉暂时只适合程序猿 此文介绍如何在 Laravel5.5 框架中集成使用富文本编辑器 UEditor...
  • 什么web编辑器? -------------------------------------- ... ueditor markdown 编辑器 主要排版使用的markdown语法,markdown一种标签语言 Markdown在线编辑器 MdEditor (演示:https://www.mded...
  • ueditor文本编辑器,选择多行更改样式只对部分生效的BUG修复欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的...
  • 官网:http://pandao.github.io/editor.md/Editor.md的安装使用:基本使用markdown是相当简单的,比ueditor还要简单,从git上下载回来的Editor.md是1.5版,压缩包里有分门别类详细的文件夹。在examples文件夹中有一...
  • 编辑器记录欢迎使用Markdown编辑器新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右...
  • Markdown编辑器之Editor.md v1.5.0应用

    千次阅读 2016-11-08 16:38:35
    在开始写CSDN博客前一直使用的是类似xhEditor、百度的ueditor编辑器,新版本的有道云笔记也实现markdown编辑器,的确用过markdown后感觉很喜欢,再用之前的编辑器很别扭,然后项目中用到编辑器的时候我就想使用...
  • 在做自己项目的时候,再选择富文本编辑器的时候小小的纠结了一下,之前的项目大多使用的是百度的Ueditor,但是自己的练习项目上面再使用这个那么练习就变得毫无意义,所以选择了CKeditor编辑器(文档纯英文所以不是...
  • UEditor百度插件使用 项目需要用到富文本编辑器由于之前的项目所用的插件现在看来是有些落后,看起来也不完美,今天试试 百度的UEditor发现还是国产的插件有点意思,符合本土特色 整个搭建工程时间不超过30分钟。...

空空如也

空空如也

1 2 3 4 5
收藏数 87
精华内容 34
关键字:

markdownueditor