700字范文 > editormd富文本编辑器

editormd富文本编辑器

时间：2019-10-25 03:32:01

相关推荐

editormd富文本编辑器

使用原因: editormd 支持kex公式

详情查看: editor.md

下载的静态资源(editor.md)放:\public\static文件夹下

配置编辑栏

(equation.js是自定义的编辑栏按钮,详情查看:自定义编辑栏按钮)

// 导入自定义的公式编辑import {toolbarIconsClass, // 自定义按钮 icontoolbarIconTexts, // 自定义按钮 texttoolbarCustomIcons, // 自定义按钮 htmltoolbarHandlers, // 自定义工具栏按钮的事件处理lang, // 鼠标悬浮提示信息} from "./equation"const defaultConfig = {width: "100%",height: 600,path: 'static/editor.md/lib/',// theme: 'dark',// previewTheme: 'dark',// editorTheme: 'pastel-on-dark',markdown: '',// 默认填充内容lineWrapping: true, // 编辑框不换行codeFold: true, // 代码折叠placeholder: '请输入...',syncScrolling: true,saveHTMLToTextarea: true, // 保存 HTML 到 TextareasearchReplace: true,watch: true, // 实时预览htmlDecode: "style,script,iframe|on*",// 开启 HTML 标签解析，为了安全性，默认不开启toolbar: true, //工具栏previewCodeHighlight: true,// 预览 HTML 的代码块高亮，默认开启emoji: true,taskList: true,tocm: true, // Using [TOCM]tex: true, // 开启科学公式TeX语言支持，默认关闭flowChart: true,// 开启流程图支持，默认关闭sequenceDiagram: true,// 开启时序/序列图支持，默认关闭,// dialogLockScreen: false,// 设置弹出层对话框不锁屏，全局通用，默认为true// dialogShowMask: false, // 设置弹出层对话框显示透明遮罩层，全局通用，默认为true// dialogDraggable: false, // 设置弹出层对话框不可拖动，全局通用，默认为true// dialogMaskOpacity: 0.4, // 设置透明遮罩层的透明度，全局通用，默认值为0.1// dialogMaskBgColor: "#000", // 设置透明遮罩层的背景颜色，全局通用，默认为#fff// imageUpload: true,// imageFormats: ["jpg", "jpeg", "gif", "png", "bmp", "webp"],// imageUploadURL: "./php/upload.php",// onload: function() {// // this.fullscreen();// // this.unwatch();// // this.watch().fullscreen();// // this.setMarkdown("#PHP");// // this.width("100%");// // this.height(480);// // this.resize("100%", 640);// },// 工具栏toolbarIcons : function() {// return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "reference-link", "image", "code", "preformatted-text", "code-block", "table", "datetime", "emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", "|", "help", "info"]return ["undo", "redo", "|", "bold", "del", "italic", "quote", "ucwords", "uppercase", "lowercase", "|", "h1", "h2", "h3", "h4", "h5", "h6", "|", "list-ul", "list-ol", "hr", "|", "link", "image", "table", "datetime","emoji", "html-entities", "pagebreak", "|", "goto-line", "watch", "preview", "fullscreen", "clear", "search", // 自定义开始"|","equation", "parenthesis", "square", "subscript", "sqrt", "sigma", "delta", "sin", "fractionalType", "integration"]},toolbarIconsClass, toolbarIconTexts, toolbarCustomIcons,toolbarHandlers,lang,};export {defaultConfig,};

显示

<template><div class="markdown-editor-box"><link rel="stylesheet" href="/static/editor.md/css/editormd.min.css"><link rel="stylesheet" href="/static/editor.md/css/editormd.preview.css"><button @click="htmlInfo()">html信息</button><button @click="textInfo()">文本信息</button><div :id="editorId"></div><div style="background: #8f9d6a">内容：{{content}}</div><div id="view2"></div></div></template><script>import scriptjs from 'scriptjs' // 动态引入js文件import { defaultConfig } from '../assets/editorz/index'export default {props: {},data: function () {return {editorId: "markdown-editor",content: null,editor: null,timer: null,doc: {},jsLoadOver: false}},methods: {htmlInfo () {this.content = this.editor.getHTML()},textInfo () {this.content = this.editor.getMarkdown()const zhanshi = this.editor.getMarkdown()window.editormd.markdownToHTML("view2", {markdown: zhanshi,//+ "\r\n" + $("#append-test").text(),//htmlDecode: true, // 开启 HTML 标签解析，为了安全性，默认不开启htmlDecode: "style,script,iframe", // you can filter tags decode//toc : false,path: 'static/editor.md/lib/',tocm: true, // Using [TOCM]//tocContainer : "#custom-toc-container", // 自定义 ToC 容器层//gfm : false,//tocDropdown: true,// markdownSourceCode : true, // 是否保留 Markdown 源码，即是否删除保存源码的 Textarea 标签emoji: true,taskList: true,tex: true, // 默认不解析flowChart: true, // 默认不解析sequenceDiagram: true, // 默认不解析});},fetchScript: function (url) {return new Promise((resolve) => {scriptjs(url, () => {resolve()})})},getConfig: function () {return { ...defaultConfig, ...this.config }},getEditor: function () {return this.editor},getDoc: function () {return this.doc},watch: function () {return this.editor.watch()},unwatch: function () {return this.editor.unwatch()},previewing: function () {return this.editor.previewing()},getHTML: function () {return this.editor.getHTML()},getMarkdown: function () {return this.editor.getMarkdown()},setMarkdown: function (markdown) {return this.editor.setMarkdown(markdown)},initEditor: function (markdown) {let vm = thislet config = vm.getConfig()if (markdown) {config.markdown = markdown}(async () => {await vm.fetchScript('/static/editor.md/jquery.min.js');await vm.fetchScript('/static/editor.md/editormd.min.js');vm.jsLoadOver = truevm.editor = window.editormd(vm.editorId, config)})()}},mounted: function () {this.initEditor("") },destroyed: function () {let vm = thisif (vm.timer != null) {window.clearInterval(vm.timer)vm.timer = null}}}</script><style scoped></style>