js富文字編寫練習

阿新 • • 發佈：2018-12-12

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
        .editable{
            width: 200px;
            height: 200px;
            border: 1px solid # 
000;
        }
    </style>
</head>
<body>
    <div class="editable" id="richedit" contenteditable="true"></div>
    <input type="button" id="btn1" value="變紅">
    <input type="button" id="btn2" value="變粗">
    <script>
            var btn1 = document.getElementById("btn1");
             
var btn2 = document.getElementById("btn2");

            btn1.onclick = function(){
                document.execCommand("forecolor",false,"#ff0000");
            }
            btn2.onclick = function(){
                document.execCommand("bold",false,null);
            }
    </script>
</body>
</html>

效果：

還可以繼續編寫其他富文字功能，方法類似，就不一一列舉了，如：

js富文字編寫練習

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-wi

【Cocos2d-js教程】cocos2d-js 富文字 RichText

cocos2d-js富文字的實現還是需要GUI元件，使用UIRichText控制元件即可實現，該元件支援三種節點 1、ccui.RichElementText 主要操作文字，可以修改文字顏色，大小，字型 2、ccui.RichElementImage 主要操作圖

js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤的正則公式

js獲取富文字中的第一張圖片url正則公式及去除字串裡面的html標籤後臺發來一個富文字字串裡面可能包含了0、1、2、3…個圖片標籤（img）,我們的任務是獲取這個字串裡面第一張圖片的url，如果沒有圖片則返回空 var imgUrlFun = function(str){

基於 Sphinx 以純文字編寫富媒體專案文件的方法介紹

文章目錄簡介環境依賴安裝安裝 Sphinx 安裝 PlantUML Sphinx 關鍵知識總結使用方式 Sphinx 中的 reStructedText 常用語法 index.r

富文字編輯ckeditor.js的使用

使用ckeditor.js編輯副本，生成靜態頁面前端程式碼： <div style="margin:20px"> <textarea rows="20" name="editor" id="editor"></textarea><

【js】kindeditor富文字編輯器的簡單使用

首先去下載kindeditor的相關檔案引入css以及js <link rel="stylesheet" href="js/kindeditor-4.1.10/themes/defaul

在Vue專案使用quill-editor帶樣式編輯器（更改插入圖片和視訊）運用vue-quilt-editor編寫富文字編輯器自定義圖片路徑獲取後臺返回路徑

一、首先在main.js 引入 vue-quilt-editorimport VueQuillEditor from 'vue-quill-editor'import 'quill/dist/quill.core.css'import 'quill/dist/quill.s

jquery wysiwyg.js實現富文字編輯框，可複製圖片及文字

wysiwyg.js是一款十分強大的、所見即所得的jQuery富文字編輯器外掛。wysiwyg.js富文字編輯器體積小，支援選擇、鍵盤、佔位等眾多事件。而且該富文字編輯器的相容性十分好，甚至相容IE

js處理去掉富文字編輯的html，樣式，只顯示純文字內容，以供列表頁使用

JS實現簡易版富文字編輯器

<table border='1' class="tablebox" id='tablebox'> <tr> <td> <input type="button" name="bold" value='Bold' clas

React Js Simditor Textarea 富文字的元件封裝

本文出自：下面用了jquery如果不需要自行刪除即可. import React from 'react'; import Simditor from "simditor"; import

bootstrap-wysiwyg中JS控制元件富文字中的圖片由本地上傳到伺服器（阿里雲、七牛、自己的資料庫）

一、我假設你是要儲存到自己的資料庫中（因為上傳到阿里雲、七牛更簡單原理一樣的）點選插入圖片如下圖： 1、其實你插入的時候不需要做什麼處理一樣也可以插入資料庫的（但是前提你插入的那個欄位必須要求足夠空間比如Mysql你要用LONGTEXT型別，否則是存不下的這樣子前臺獲

js過濾（去除）富文字編輯器中的html標籤和換行回車等標記的正則表示式

一段這樣的Html包裹的文字： var description="<p>\n\t<img src=\"http://localhost/Scripts/KindEditor/Editor/plugins/emoticons/images/0.gif\" a

所見即所得的jQuery富文字編輯器外掛-wysiwyg.js

wysiwyg.js是一款十分強大的、所見即所得的jQuery富文字編輯器外掛。wysiwyg.js富文字編輯器體積小，支援選擇、鍵盤、佔位等眾多事件。而且該富文字編輯器的相容性十分好，甚至相容IE6。該富文字編輯器還有一個大小10k（minified）的jQuery外掛-

js頁面顯示word編輯頁面 kindeditor（富文字編輯器）的使用

1、匯入js： 2、定義多行文字（不可見、給定name） 3、呼叫TT.createEditor 4、效果 1.1. 取文字編輯器中的內容將編輯器的內容設定到原來的textarea控制元件裡。 editor.sync();

js普通文字轉富文字

var obj = document.getElementById("id"); var obj_text = document.getElementById("id").innerText; va

js獲取富文字編輯器資料

問題：從資料庫中獲取繫結到編輯器中的資料js是可以獲取到的，但是如果新加內容資料的話，js是獲取不到的。解決方案：獲取編輯器內容之前執行其中紅色為編輯器的ID值；editor.sync();這樣之後

電力項目七--js控制文字內容過長的顯示

style property stat center -- value bsp blog station 當文本框中文字內容過長時，需要調整顯示的樣式如上圖所示的樣式對應的代碼為： <div id="showInfomation" style="visibi

JS基礎_js編寫位置

style tle 利用 set ext col cnblogs doc 鏈接 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"

記錄一下js有關知識點的練習

檢測 settime 構造函數調用調用知識點 pin img set 1.有關作用域，變量提升的 2.有關類型檢測的，基本類型的是用typeof，還有構造函數方法判斷，還有duck typing 3.有關函數調用，setTimeout的記

js富文字編寫練習

相關推薦