You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 

472 lines
10 KiB

  1. <template>
  2. <view class="main">
  3. <u-parse class="ql-editor" :content="content" @preview="preview" @navigate="navigate"/>
  4. <web-view v-if="webviewShow" :webview-styles="webviewStyles" :src="webviewUrl"></web-view>
  5. <!-- <view v-html="content"></view> -->
  6. <!-- <rich-text :nodes="content"></rich-text> -->
  7. </view>
  8. </template>
  9. <script>
  10. var util = require("../../utils/util.js");
  11. var config = require("../../config");
  12. import uParse from '../../components/gaoyia-parse/parse.vue'
  13. export default {
  14. data() {
  15. return {
  16. content:"",
  17. id:"",
  18. webviewShow:false,
  19. webviewUrl:"",
  20. webviewStyles: {
  21. progress: {
  22. color: '#FF3333'
  23. }
  24. }
  25. };
  26. },
  27. components: {
  28. uParse
  29. },
  30. onLoad(e){
  31. this.id = e.id;
  32. let link=JSON.parse(decodeURIComponent(e.content))
  33. this.content = link
  34. this.read()
  35. },
  36. methods:{
  37. navigate(href, e) {
  38. if(href!=undefined && href!=""){
  39. this.webviewShow = true;
  40. this.webviewUrl = href
  41. }
  42. console.log(href,111)
  43. //比如点击a标签,打开某个传输url
  44. uni.navigateTo({
  45. url: href
  46. })
  47. },
  48. read(){
  49. uni.request({
  50. url: config.service.updateRead,
  51. method: "GET",
  52. data:{id:this.id,accountId:uni.getStorageSync('weapp_session_userInfo_data').accountId},
  53. header: {
  54. 'content-type': 'application/json',
  55. 'Authorization': 'Bearer '+uni.getStorageSync('weapp_session_login_data').token
  56. },
  57. success: (res) => {
  58. console.log(res)
  59. }
  60. })
  61. }
  62. }
  63. }
  64. </script>
  65. <style lang="scss">
  66. @import '../../static/css/quill/quill.core.css';
  67. @import '../../static/css/quill/quill.snow.css';
  68. @import '../../static/css/quill/quill.bubble.css';
  69. .main{
  70. padding: 20rpx;
  71. word-wrap: break-word;
  72. }
  73. .ql-container {
  74. box-sizing: border-box;
  75. font-family: Helvetica, Arial, sans-serif;
  76. font-size: 13px;
  77. height: 100%;
  78. margin: 0px;
  79. position: relative;
  80. }
  81. .ql-editor h1 {
  82. font-size: 2em;
  83. }
  84. .ql-container.ql-disabled .ql-tooltip {
  85. visibility: hidden;
  86. }
  87. .ql-container.ql-disabled .ql-editor ul[data-checked] > li::before {
  88. pointer-events: none;
  89. }
  90. .ql-clipboard {
  91. left: -100000px;
  92. height: 1px;
  93. overflow-y: hidden;
  94. position: absolute;
  95. top: 50%;
  96. }
  97. .ql-clipboard p {
  98. margin: 0;
  99. padding: 0;
  100. }
  101. .ql-editor {
  102. box-sizing: border-box;
  103. line-height: 1.42;
  104. height: 100%;
  105. outline: none;
  106. overflow-y: auto;
  107. padding: 12px 15px;
  108. tab-size: 4;
  109. -moz-tab-size: 4;
  110. text-align: left;
  111. white-space: pre-wrap;
  112. word-wrap: break-word;
  113. }
  114. .ql-editor > * {
  115. cursor: text;
  116. }
  117. .ql-editor p,
  118. .ql-editor ol,
  119. .ql-editor ul,
  120. .ql-editor pre,
  121. .ql-editor blockquote,
  122. .ql-editor h1,
  123. .ql-editor h2,
  124. .ql-editor h3,
  125. .ql-editor h4,
  126. .ql-editor h5,
  127. .ql-editor h6 {
  128. margin: 0;
  129. padding: 0;
  130. counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  131. }
  132. .ql-editor ol,
  133. .ql-editor ul {
  134. padding-left: 1.5em;
  135. }
  136. .ql-editor ol > li,
  137. .ql-editor ul > li {
  138. list-style-type: none;
  139. }
  140. .ql-editor ul > li::before {
  141. content: '\2022';
  142. }
  143. .ql-editor ul[data-checked=true],
  144. .ql-editor ul[data-checked=false] {
  145. pointer-events: none;
  146. }
  147. .ql-editor ul[data-checked=true] > li *,
  148. .ql-editor ul[data-checked=false] > li * {
  149. pointer-events: all;
  150. }
  151. .ql-editor ul[data-checked=true] > li::before,
  152. .ql-editor ul[data-checked=false] > li::before {
  153. color: #777;
  154. cursor: pointer;
  155. pointer-events: all;
  156. }
  157. .ql-editor ul[data-checked=true] > li::before {
  158. content: '\2611';
  159. }
  160. .ql-editor ul[data-checked=false] > li::before {
  161. content: '\2610';
  162. }
  163. .ql-editor li::before {
  164. display: inline-block;
  165. white-space: nowrap;
  166. width: 1.2em;
  167. }
  168. .ql-editor li:not(.ql-direction-rtl)::before {
  169. margin-left: -1.5em;
  170. margin-right: 0.3em;
  171. text-align: right;
  172. }
  173. .ql-editor li.ql-direction-rtl::before {
  174. margin-left: 0.3em;
  175. margin-right: -1.5em;
  176. }
  177. .ql-editor ol li:not(.ql-direction-rtl),
  178. .ql-editor ul li:not(.ql-direction-rtl) {
  179. padding-left: 1.5em;
  180. }
  181. .ql-editor ol li.ql-direction-rtl,
  182. .ql-editor ul li.ql-direction-rtl {
  183. padding-right: 1.5em;
  184. }
  185. .ql-editor ol li {
  186. counter-reset: list-1 list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  187. counter-increment: list-0;
  188. }
  189. .ql-editor ol li:before {
  190. content: counter(list-0, decimal) '. ';
  191. }
  192. .ql-editor ol li.ql-indent-1 {
  193. counter-increment: list-1;
  194. }
  195. .ql-editor ol li.ql-indent-1:before {
  196. content: counter(list-1, lower-alpha) '. ';
  197. }
  198. .ql-editor ol li.ql-indent-1 {
  199. counter-reset: list-2 list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  200. }
  201. .ql-editor ol li.ql-indent-2 {
  202. counter-increment: list-2;
  203. }
  204. .ql-editor ol li.ql-indent-2:before {
  205. content: counter(list-2, lower-roman) '. ';
  206. }
  207. .ql-editor ol li.ql-indent-2 {
  208. counter-reset: list-3 list-4 list-5 list-6 list-7 list-8 list-9;
  209. }
  210. .ql-editor ol li.ql-indent-3 {
  211. counter-increment: list-3;
  212. }
  213. .ql-editor ol li.ql-indent-3:before {
  214. content: counter(list-3, decimal) '. ';
  215. }
  216. .ql-editor ol li.ql-indent-3 {
  217. counter-reset: list-4 list-5 list-6 list-7 list-8 list-9;
  218. }
  219. .ql-editor ol li.ql-indent-4 {
  220. counter-increment: list-4;
  221. }
  222. .ql-editor ol li.ql-indent-4:before {
  223. content: counter(list-4, lower-alpha) '. ';
  224. }
  225. .ql-editor ol li.ql-indent-4 {
  226. counter-reset: list-5 list-6 list-7 list-8 list-9;
  227. }
  228. .ql-editor ol li.ql-indent-5 {
  229. counter-increment: list-5;
  230. }
  231. .ql-editor ol li.ql-indent-5:before {
  232. content: counter(list-5, lower-roman) '. ';
  233. }
  234. .ql-editor ol li.ql-indent-5 {
  235. counter-reset: list-6 list-7 list-8 list-9;
  236. }
  237. .ql-editor ol li.ql-indent-6 {
  238. counter-increment: list-6;
  239. }
  240. .ql-editor ol li.ql-indent-6:before {
  241. content: counter(list-6, decimal) '. ';
  242. }
  243. .ql-editor ol li.ql-indent-6 {
  244. counter-reset: list-7 list-8 list-9;
  245. }
  246. .ql-editor ol li.ql-indent-7 {
  247. counter-increment: list-7;
  248. }
  249. .ql-editor ol li.ql-indent-7:before {
  250. content: counter(list-7, lower-alpha) '. ';
  251. }
  252. .ql-editor ol li.ql-indent-7 {
  253. counter-reset: list-8 list-9;
  254. }
  255. .ql-editor ol li.ql-indent-8 {
  256. counter-increment: list-8;
  257. }
  258. .ql-editor ol li.ql-indent-8:before {
  259. content: counter(list-8, lower-roman) '. ';
  260. }
  261. .ql-editor ol li.ql-indent-8 {
  262. counter-reset: list-9;
  263. }
  264. .ql-editor ol li.ql-indent-9 {
  265. counter-increment: list-9;
  266. }
  267. .ql-editor ol li.ql-indent-9:before {
  268. content: counter(list-9, decimal) '. ';
  269. }
  270. .ql-editor .ql-indent-1:not(.ql-direction-rtl) {
  271. padding-left: 3em;
  272. }
  273. .ql-editor li.ql-indent-1:not(.ql-direction-rtl) {
  274. padding-left: 4.5em;
  275. }
  276. .ql-editor .ql-indent-1.ql-direction-rtl.ql-align-right {
  277. padding-right: 3em;
  278. }
  279. .ql-editor li.ql-indent-1.ql-direction-rtl.ql-align-right {
  280. padding-right: 4.5em;
  281. }
  282. .ql-editor .ql-indent-2:not(.ql-direction-rtl) {
  283. padding-left: 6em;
  284. }
  285. .ql-editor li.ql-indent-2:not(.ql-direction-rtl) {
  286. padding-left: 7.5em;
  287. }
  288. .ql-editor .ql-indent-2.ql-direction-rtl.ql-align-right {
  289. padding-right: 6em;
  290. }
  291. .ql-editor li.ql-indent-2.ql-direction-rtl.ql-align-right {
  292. padding-right: 7.5em;
  293. }
  294. .ql-editor .ql-indent-3:not(.ql-direction-rtl) {
  295. padding-left: 9em;
  296. }
  297. .ql-editor li.ql-indent-3:not(.ql-direction-rtl) {
  298. padding-left: 10.5em;
  299. }
  300. .ql-editor .ql-indent-3.ql-direction-rtl.ql-align-right {
  301. padding-right: 9em;
  302. }
  303. .ql-editor li.ql-indent-3.ql-direction-rtl.ql-align-right {
  304. padding-right: 10.5em;
  305. }
  306. .ql-editor .ql-indent-4:not(.ql-direction-rtl) {
  307. padding-left: 12em;
  308. }
  309. .ql-editor li.ql-indent-4:not(.ql-direction-rtl) {
  310. padding-left: 13.5em;
  311. }
  312. .ql-editor .ql-indent-4.ql-direction-rtl.ql-align-right {
  313. padding-right: 12em;
  314. }
  315. .ql-editor li.ql-indent-4.ql-direction-rtl.ql-align-right {
  316. padding-right: 13.5em;
  317. }
  318. .ql-editor .ql-indent-5:not(.ql-direction-rtl) {
  319. padding-left: 15em;
  320. }
  321. .ql-editor li.ql-indent-5:not(.ql-direction-rtl) {
  322. padding-left: 16.5em;
  323. }
  324. .ql-editor .ql-indent-5.ql-direction-rtl.ql-align-right {
  325. padding-right: 15em;
  326. }
  327. .ql-editor li.ql-indent-5.ql-direction-rtl.ql-align-right {
  328. padding-right: 16.5em;
  329. }
  330. .ql-editor .ql-indent-6:not(.ql-direction-rtl) {
  331. padding-left: 18em;
  332. }
  333. .ql-editor li.ql-indent-6:not(.ql-direction-rtl) {
  334. padding-left: 19.5em;
  335. }
  336. .ql-editor .ql-indent-6.ql-direction-rtl.ql-align-right {
  337. padding-right: 18em;
  338. }
  339. .ql-editor li.ql-indent-6.ql-direction-rtl.ql-align-right {
  340. padding-right: 19.5em;
  341. }
  342. .ql-editor .ql-indent-7:not(.ql-direction-rtl) {
  343. padding-left: 21em;
  344. }
  345. .ql-editor li.ql-indent-7:not(.ql-direction-rtl) {
  346. padding-left: 22.5em;
  347. }
  348. .ql-editor .ql-indent-7.ql-direction-rtl.ql-align-right {
  349. padding-right: 21em;
  350. }
  351. .ql-editor li.ql-indent-7.ql-direction-rtl.ql-align-right {
  352. padding-right: 22.5em;
  353. }
  354. .ql-editor .ql-indent-8:not(.ql-direction-rtl) {
  355. padding-left: 24em;
  356. }
  357. .ql-editor li.ql-indent-8:not(.ql-direction-rtl) {
  358. padding-left: 25.5em;
  359. }
  360. .ql-editor .ql-indent-8.ql-direction-rtl.ql-align-right {
  361. padding-right: 24em;
  362. }
  363. .ql-editor li.ql-indent-8.ql-direction-rtl.ql-align-right {
  364. padding-right: 25.5em;
  365. }
  366. .ql-editor .ql-indent-9:not(.ql-direction-rtl) {
  367. padding-left: 27em;
  368. }
  369. .ql-editor li.ql-indent-9:not(.ql-direction-rtl) {
  370. padding-left: 28.5em;
  371. }
  372. .ql-editor .ql-indent-9.ql-direction-rtl.ql-align-right {
  373. padding-right: 27em;
  374. }
  375. .ql-editor li.ql-indent-9.ql-direction-rtl.ql-align-right {
  376. padding-right: 28.5em;
  377. }
  378. .ql-editor .ql-video {
  379. display: block;
  380. max-width: 100%;
  381. }
  382. .ql-editor .ql-video.ql-align-center {
  383. margin: 0 auto;
  384. }
  385. .ql-editor .ql-video.ql-align-right {
  386. margin: 0 0 0 auto;
  387. }
  388. .ql-editor .ql-bg-black {
  389. background-color: #000;
  390. }
  391. .ql-editor .ql-bg-red {
  392. background-color: #e60000;
  393. }
  394. .ql-editor .ql-bg-orange {
  395. background-color: #f90;
  396. }
  397. .ql-editor .ql-bg-yellow {
  398. background-color: #ff0;
  399. }
  400. .ql-editor .ql-bg-green {
  401. background-color: #008a00;
  402. }
  403. .ql-editor .ql-bg-blue {
  404. background-color: #06c;
  405. }
  406. .ql-editor .ql-bg-purple {
  407. background-color: #93f;
  408. }
  409. .ql-editor .ql-color-white {
  410. color: #fff;
  411. }
  412. .ql-editor .ql-color-red {
  413. color: #e60000;
  414. }
  415. .ql-editor .ql-color-orange {
  416. color: #f90;
  417. }
  418. .ql-editor .ql-color-yellow {
  419. color: #ff0;
  420. }
  421. .ql-editor .ql-color-green {
  422. color: #008a00;
  423. }
  424. .ql-editor .ql-color-blue {
  425. color: #06c;
  426. }
  427. .ql-editor .ql-color-purple {
  428. color: #93f;
  429. }
  430. .ql-editor .ql-font-serif {
  431. font-family: Georgia, Times New Roman, serif;
  432. }
  433. .ql-editor .ql-font-monospace {
  434. font-family: Monaco, Courier New, monospace;
  435. }
  436. .ql-editor .ql-size-small {
  437. font-size: 0.75em;
  438. }
  439. .ql-editor .ql-size-large {
  440. font-size: 1.5em;
  441. }
  442. .ql-editor .ql-size-huge {
  443. font-size: 2.5em;
  444. }
  445. .ql-editor .ql-direction-rtl {
  446. direction: rtl;
  447. text-align: inherit;
  448. }
  449. .ql-editor .ql-align-center {
  450. text-align: center;
  451. }
  452. .ql-editor .ql-align-justify {
  453. text-align: justify;
  454. }
  455. .ql-editor .ql-align-right {
  456. text-align: right;
  457. }
  458. .ql-editor.ql-blank::before {
  459. color: rgba(0,0,0,0.6);
  460. content: attr(data-placeholder);
  461. font-style: italic;
  462. left: 15px;
  463. pointer-events: none;
  464. position: absolute;
  465. right: 15px;
  466. }
  467. </style>