首页 > 其他分享 >Golang实现小型CMS内容管理功能(二):前端接入百度ueditor富文本编辑器

Golang实现小型CMS内容管理功能(二):前端接入百度ueditor富文本编辑器

时间:2022-11-30 23:02:05浏览次数:52  
标签:ueditor 文本编辑 前端 Golang 内容 ue CMS

当我们把接口都做好以后,我们需要去开发前端界面。

添加文章功能里面,最重要的就是文章内容部分,需要配置上富文本编辑器,这样才能给我们的内容增加样式。

 

下载ueditor代码

ueditor已经很久没有更新了,我们现在去github下载压缩好的代码包

https://github.com/fex-team/ueditor/releases/tag/v1.4.3.3 

下载好以后,可以看到有这些文件,把这个目录放到我们的前端资源目录里

 

 引入加载富文本编辑器

下面是我自己项目里面的目录,请酌情修改

<script src="/static/js/ueditor/ueditor.config.js"></script>
<script src="/static/js/ueditor/ueditor.all.min.js"></script>

在合适的位置放富文本占位标签

<script id="container" name="content" type="text/plain">这里写你的初始化内容</script> 

下面是我的项目里面加载富文本vue cdn引入模式下的

  new Vue({
        el: '#app',
        data: {
            ue:{},
        },
        methods: {

        },
        mounted:function(){
        },
        created: function () {

            this.ue = UE.getEditor('container');
        }
    })

 

如果想要获取内容就是

this.ue.getContent();

修改增加的时候需要设置内容

this.ue.setContent(content);

 

默认的编辑器高度太低了,可以这样改高度

<script id="container" name="content" style="height: 380px" type="text/plain"></script>

 

标签:ueditor,文本编辑,前端,Golang,内容,ue,CMS
From: https://www.cnblogs.com/taoshihan/p/16940095.html

相关文章

  • Golang-单元测试
    单元测试针对使用传统方式测试代码块的不足:1)测试代码块需要在main函数中去调用,需要修改main函数,若项目正在运行,就可能去停止项目,不方便2)不利于管理,当需要测试多个函数或多个......
  • DevExpress文本编辑类控件设置水印
    为TextEdit增加水印publicstaticclassTextEditHelper{//设置水印值publicstaticvoidSetWatermark(thisTextEdittextEdit,stringwatermark){......
  • Django-6.1富文本编辑器-笔记
    富文本编辑器借助富文本编辑器,网站的编辑人员能够像使用offfice一样编写出漂亮的、所见即所得的页面。此处以tinymce为例,其它富文本编辑器的使用也是类似的。在虚拟环境中安......
  • 解决golang循环引用问题
    go出现包循环引用的问题,首当其冲的就是程序结构没设计好,最好的方式就是在项目框架构建的时候,将各个模块设计好,避免出现该问题。尝试分层的设计,高层依赖于低层,低层不依赖......
  • golang 怎么获取kubernetes deployments的状态?
    如果我们需要把k8s的信息展示为一个友好的web页面。那么deployment的信息基本上是非常重要的(大部分的服务都是使用deployment部署)。从yaml中我们能获取到很多关于depl......
  • Golang sync.WaitGroup的用法
    参考链接:https://studygolang.com/articles/12972funcmain(){wg:=sync.WaitGroup{}wg.Add(100)fori:=0;i<100;i++{gofunc(iint)......
  • 值得尝试的 30 个开源文本编辑器
    正在寻找新的文本编辑器?这里有30个编辑器可供尝试。计算机是基于文本的,因此你使用它们做的事情越多,你可能就越需要文本编辑应用程序。你在文本编辑器上花费的时间越多,......
  • Vue富文本编辑器(vue-quill-editor)使用✔✔
    最近工作中需求使用一款富文本编辑器,最终选择了vue-quill-editor,之所以选择vue-quill-editor,是看上了它的轻量以及外观简洁的优势。打开官方文档,直接上手配置,各种报错,踩了......
  • 文本压缩归档及文本编辑器vi
    一、文件压缩与归档1.文件压缩gzip、bzip2命令用于文件压缩,压缩完成后源文件会消失,不能用于文件夹压缩常见命令选项:-q 压缩等级,0-9,值越大,压缩等级越高    ......
  • Cent 7 安装 tilde 文本编辑器
    cd/etc/yum.repos.dwget http://download.opensuse.org/repositories/home:/gphalkes:/tilde/CentOS_CentOS-7/home:gphalkes:tilde.repomvhome:gphalkes:tilde.repo......