在 Vue webpack 项目中,在富文本编辑器中嵌入可编辑的数学公式
0 创建Vue webpack 项目
## cli2.0
vue init formula-editor
或者
## cli3.0+
vue create formula-editor
(由于我的是cli4.x, 所以我用了vue create 来创建项目)
该实验项目结构如下：
微信截图_20200620004556.png
1 搜索一些相关
-
网上比较流行的 UEditor
-
vue-ueditor-wrap 百度富文本编辑器组件
2 准备搞起
有了前面的准备, 接下来就是把东西整合起来。
- 下载 UEditor (下载jsp版本即可)
微信截图_20200620004213.png
然后将其解压放在 public/UEditor/目录下，如下截图：
微信截图_20200620005606.png
- 下载 UEditor 公式插件
微信截图_20200620004314.png
解压放在 public/UEditor/ 内，如下截图：
微信截图_20200620005945.png
- 安装 vue-ueditor-wrap
npm i vue-ueditor-wrap
# 或者
yarn add vue-ueditor-wrap
3 编写代码
- 在我们需要编写代码的页面 导入 vue-ueditor-wrap
我们在提供的 view/About.vue 下来编写代码。
修改前:
<template>
<div class="about">
<h1>This is an about page</h1>
</div>
</template>
修改后：
<template>
<div class="about">
<h1>This is an about page</h1>
<vue-ueditor-wrap :config="editorConfig"></vue-ueditor-wrap>
</div>
</template>
<script>
import VueUeditorWrap from "vue-ueditor-wrap";
export default {
name:'Editor',
components:{
VueUeditorWrap //注册组件
},
data(){
return{
editorConfig:{
// 你的UEditor资源存放的路径,相对于打包后的index.html
UEDITOR_HOME_URL: "/UEditor/",
// 编辑器不自动被内容撑高
autoHeightEnabled: false,
// 初始容器高度
initialFrameHeight: 300,
// 初始容器宽度
initialFrameWidth: "80%",
// 关闭自动保存
enableAutoSave: false,
// 自定义工具栏，需要额外选项可以参考ueditor.config.js
toolbars: [
[
"fullscreen",
"source",
"|",
"bold",
"italic",
"underline",
"|",
"fontsize",
"fontfamily",
"|",
"kityformula",
"preview",
"|",
"justifyleft",
"justifycenter",
"justifyright",
"justifyjustify",
"|"
]
]
}
}
}
}
</script>
-
在public/index.html 加载静态资源
微信截图_20200620012514.png
<!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">
<link rel="icon" href="<%= BASE_URL %>favicon.ico">
<!-- 静态资源 -->
<script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.config.js"></script>
<script type="text/javascript" charset="utf-8" src="./UEditor/ueditor.all.min.js"></script>
<script src="./UEditor/kityformula-plugin/addKityFormulaDialog.js"></script>
<script src="./UEditor/kityformula-plugin/getKfContent.js"></script>
<script src="./UEditor/kityformula-plugin/defaultFilterFix.js"></script>
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<noscript>
<strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled.
Please enable it to continue.</strong>
</noscript>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
4 运行测试
-
npm install
-
npm run serve
-
浏览器查看
微信截图_20200620013329.png
微信截图_20200620013701.png
微信截图_20200620013758.png
5 更多操作
本次只是粗浅学习使用,更多复杂操作,请查看相关文档 https://www.npmjs.com/package/vue-ueditor-wrap
网友评论